Google Login Setup

Einführung

In dieser Anleitung lernen Sie, wie Sie Google Login mit Capgo Social Login einrichten. Um Google Login einzurichten, benötigen Sie Folgendes:

• Ein Google-Konto

Allgemeine Einrichtung

Hinweis

Diese Schritt ist unabhängig von der gewählten Plattform erforderlich.

In dieser Teilschritte wird die Anmeldungsschleifen durch Google konfiguriert.

1. Bitte gehen Sie zu console.cloud.google.com
2. Klicken Sie auf den Projektselector
3. Wenn Sie noch keinen Projekt haben, bitte ein neues Projekt erstellen.
   1. Klicken Sie auf New project
   2. Benennen Sie Ihr Projekt und klicken Sie Create
   3. Stellen Sie sicher, dass Sie sich auf dem richtigen Projekt befinden
4. Beginnen Sie mit der Konfiguration des OAuth consent screen

   1. Klicken Sie auf die Suchleiste

      

   2. Suchen Sie nach OAuth consent screen und klicken Sie darauf

      

   3. Konfigurieren Sie den Zustimmungsbildschirm

      Hinweis

      Ich werde annehmen, dass Sie ein öffentlich zugängliches App entwickeln, also werde ich den external Benutzerart wählen. Bitte wählen Sie die Benutzerart, die Ihnen am besten passt UND klicken Sie create

      Klicken Sie auf create

      
5. Füllen Sie die Informationen über Ihre App

   1. Lassen Sie uns mit der App Information

      
      • Bitte geben Sie Ihren App Name

        Vorsicht

        Dies wird den Benutzern angezeigt

      • Geben Sie den user support email

        Hinweis

        Sie können mehr über die Support-E-Mail erfahren hier

      2. Sie KÖNNEN den App-Logo hinzufügen.

         

         Hinweis

         Dies ist nicht obligatorisch und ich werde diesen Schritt überspringen

      3. Sie SOLLTE die App-Domäneneinstellungen mit dem Feld für autorisierte Domänen konfigurieren App domain

         

         Ich werde das nicht tun, weil dies nur eine einfache Demonstration ist, die nicht veröffentlicht werden wird, aber ich empfehle Ihnen stark, dieses Feld auszufüllen.

         Sie MUSSEN configure the

      4. App domain configuration section with authorized domains field Note E-Mail des Entwicklers bereitstellen

         

      5. Klicken Sie auf save and continue

         
6. Konfigurieren Sie die Berechtigungen

   1. Klicken Sie auf add or remove scopes

      

   2. Folgende Berechtigungen auswählen und klicken update

      

   3. Klicken Sie save and continue

      
7. Einen Testnutzer hinzufügen
   1. Klicken Sie auf add users
   2. Geben Sie Ihre Google-E-Mail ein, drücken Sie Enter und klicken Sie add
   3. Klicken Sie save and continue
8. Klicken Sie back to dashboard
9. Bewerben Sie Ihr App für die Verifizierung

   Hinweis

   Ich empfehle Ihnen stark, Ihre App für die Verifizierung zu bewerben. Dies liegt außerhalb des Umfangs dieses Tutorials. Sie können mehr erfahren hier. Dies ist nicht erforderlich für lokale Tests, aber ist erforderlich für die Produktion.

Unterschiede zwischen Online-Zugriff und Offline-Zugriff

Es gibt mehrere Möglichkeiten, Google Login mit Capacitor zu verwenden. Hier ist eine Tabelle, die die Unterschiede zwischen den beiden zusammenfasst:

	Online-Zugriff	Offline-Zugriff
Benötigt einen Backend	❌	✅
Langzeit-Zugriffstoken	❌	✅
Einfache Einrichtung	✅	❌

Hinweis

Offline-Modus bedeutet, dass Ihr Backend Zugriff auf Googles APIs auch dann hat, wenn der Benutzer nicht aktiv mit Ihrer App interagiert (d. h., wenn der Benutzer von der Perspektive Ihrer App „offline“ ist). Langzeitzugriffstoken ermöglichen diese Funktionalität, indem sie dem Backend erlauben, Googles APIs auf behalf des Benutzers zu jeder Zeit aufzurufen.

Vorsicht

Offline-Modus ERFORDERT einen Backend-Server. Wenn Sie Offline-Modus verwenden, erhält die Vorderseite nur minimalen Informationen (hauptsächlich nur einen Serverauth code). Ohne einen Backend, um diesen code gegen Token und Benutzerinformationen auszutauschen, bietet Offline-Modus keine nützlichen Daten für Ihre Vorderseiteanwendung.

Vorsicht

SocialLogin.refresh({ provider: 'google' }) funktioniert nicht mit google.mode: 'offline'. In Offline-Modus gibt Ihnen das Plugin nur serverAuthCodeund Ihr Backend muss das code durch Zugriffs- und Refresh-Tokens austauschen, dann diese Tokens im Backend erneuern.

Wenn Sie immer noch nicht wissen, welches Sie wählen sollten, bitten Sie sich bitte die folgenden Szenarien zu überlegen:

1. Sie möchten, dass der Benutzer sich anmeldet, und sofort erhalten Sie ihm einen benutzerdefinierten JWT. Ihre App wird NICHT die Google-APIs aufrufen.

   In diesem Fall wählen Sie online-Zugriff.

2. Ihre App ruft einige Google-APIs vom Client aus, aber nie vom Backend auf.

   In diesem Fall wählen Sie online-Zugriff.

3. Ihre App ruft einige Google-APIs vom Backend aus, aber nur, wenn der Benutzer aktiv am App verwenden ist.

   In diesem Fall wählen Sie online-Zugriff.

4. Ihre App überprüft periodisch den Kalender des Benutzers, auch wenn er nicht aktiv am App verwenden ist.

   In diesem Fall wählen Sie offline-Zugriff.

Ein Beispiel-Backend für online-Zugriff

In diesem Teil der Anleitung zeige ich Ihnen, wie Sie den Benutzer auf Ihrem Backend validieren können.

Dieses Beispiel wird sehr einfach sein und sich auf die folgenden Technologien beziehen:

• TypeScript

• Hono

• JavaScripts fetch API

Sie können die code für dieses Beispiel hier

Wie Sie sehen können:

Die Idee ist eigentlich sehr einfach. Sie senden eine einfache GET Anfrage an https://www.googleapis.com/oauth2/v3/tokeninfo und diese gibt Ihnen mit zurück, ob der Token gültig ist oder nicht und wenn es ist, gibt sie Ihnen auch die E-Mail-Adresse des Benutzers sowie einige weitere Informationen über den Benutzer-Token zurück.

Von dort aus könnten Sie dem Benutzer Ihren eigenen JWT oder eine Art Sitzungscookie ausstellen. Die Möglichkeiten sind endlos, für die endgültige Auth-Implementierung.

Wenn Sie Google API’s aufrufen möchten, empfehle ich Ihnen stark, sich Google’s OAuth 2.0 PlaygroundVon dort aus können Sie leicht erkennen, welche APIs Sie aufrufen können.

Mit Offline-Zugriff mit Ihrem eigenen Backend

Um Offline-Zugriff zu verwenden, benötigen Sie Folgendes:

• Einen HTTP-Server

In diesem Beispiel werde ich die folgenden Technologien verwenden, um den Offline-Zugriff in meiner App bereitzustellen:

• Hono

• Hono Zod-Validator

• Zod

• Hono JWT

• LowDb (eine einfache Datenbank)

Die code für dieses Beispiel finden Sie hier

Beachten Sie, wie der Client code aussieht:

import { Capacitor } from '@capacitor/core';
import { GoogleLoginOfflineResponse, SocialLogin } from '@capgo/capacitor-social-login';
import { usePopoutStore } from '@/popoutStore'; // <-- specific to my app

const baseURL = "[redacted]";

async function fullLogin() {
  await SocialLogin.initialize({
    google: {
      webClientId: '[redacted]',
      iOSClientId: '[redacted]',
      iOSServerClientId: 'The same value as webClientId',
      mode: 'offline' // <-- important
    }
  })
  const response = await SocialLogin.login({
    provider: 'google',
    options: {
      forceRefreshToken: true // <-- important
    }
  })

  if (response.provider === 'google') {
    const result = response.result as GoogleLoginOfflineResponse
    const res = await fetch(`${baseURL}/auth/google_offline`, {
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        serverAuthCode: result.serverAuthCode,
        platform: Capacitor.getPlatform()
      }),
      method: "POST"
    })

    if (res.status !== 200) {
      popoutStore.popout("Full google login failed", "check console");
      return
    }

    const { jwt } = await res.json();
    const userinfo = await fetch(`${baseURL}/auth/get_google_user`, {
      headers: {
        Authorization: `Bearer ${jwt}`
      }
    })
    if (userinfo.status !== 200) {
      popoutStore.popout("Full google (userinfo) login failed", "check console");
      return
    }
    popoutStore.popout("userinfo res", await userinfo.text());
  }
}

Beachten Sie, was hier fehlt: es gibt keine SocialLogin.refresh() Aufruf in der App. Das ist bewusst. Bei Google Offline-Modus passiert die Aktualisierung nachdem Ihr Backend den serverAuthCode refresh token sicher speichert.

Weitermachen von Google Login Setup

Wenn Sie Google Login Setup für die Planung der Authentifizierung und der Kontenflüsse verwenden, verbinden Sie es mit Mit @capgo/capacitor-social-login für die native Fähigkeit in Mit @capgo/capacitor-social-login, @capgo/capacitor-social-login für die Implementierungsdetails in @capgo/capacitor-social-login, @capgo/capacitor-passkey für die Implementierungsdetails in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric für die Implementierungsdetails in @capgo/capacitor-native-biometric und Zwei-Faktor-Authentifizierung für die Implementierungsdetails in Zwei-Faktor-Authentifizierung.