Google Login im Web

Einführung

In diesem Guide lernst du, wie du Google Login mit Capgo Social Login für Web-Apps einrichtest. Ich setze voraus, dass du bereits die allgemeinen Setup-Guide.

Google Login im Web nutzen

Die Nutzung von Google Login im Web ist recht einfach. Um es zu verwenden, musst du Folgendes tun:

1. Einen Web-Client in der Google Console erstellen

   Hinweis

   Falls du Google Login bereits für Android konfiguriert hast, kannst du diesen Schritt überspringen, da du bereits einen Web-Client erstellt hast. Du kannst direkt mit Schritt 2 fortfahren.

   1. Klicke in die Suchleiste

      

   2. Suche nach credentials und klicke auf APIs and Services Option (Nummer 2 im Screenshot)

      

   3. Klicke auf create credentials

      

   4. Wähle OAuth client ID

      

   5. Wähle den Application type als Web application

      

   6. Gib deinem Client einen Namen und klicke auf Create

      

   7. Kopiere die Client ID; du wirst sie als webClientId in deiner Anwendung verwenden

      

2. Konfiguriere den Web-Client in der Google Console

   1. Bitte öffne die Credentials-Seite und klicke auf deinen Web-Client

      

   2. Füge nun bitte die Authorized JavaScript originshinzu. Dies sollte alle Adressen enthalten, die du für deine App nutzen möchtest. In meinem Fall werde ich NUR use localhost, but since I use a custom port I have to add both http://localhost und http://localhost:5173

      1. Bitte klicke auf add URI

         

      2. Bitte gib deine URL ein

         

      3. Bitte wiederhole dies, bis du alle URLs hinzugefügt hast

      4. Wenn du fertig bist, sollte dein Bildschirm etwa so aussehen

         

   3. Füge nun bitte einige Authorized redirect URIs hinzu. Das hängt davon ab, auf welcher Seite du das CapacitorSocialLogin Plugin nutzt. In meinem Fall verwende ich es auf http://localhost:5173/auth

      1. Bitte klicke auf ADD URI

         

      2. Gib deine URL ein und klicke auf ADD URL noch einmal

         

   4. Klicke auf save

      

3. Jetzt kannst du bereit sein, login so aus JavaScript aufzurufen:

   1. Zuerst importiere SocialLogin

      import { SocialLogin } from '@capgo/capacitor-social-login';

   2. Rufe dann initialize auf. Dies sollte NUR einmal aufgerufen werden.

      // onMounted is Vue specific
      // webClientId is the client ID you got in the web client creation step not the android client ID.
      onMounted(() => {
       SocialLogin.initialize({
         google: {
           webClientId: '673324426943-avl4v9ubdas7a0u7igf7in03pdj1dkmg.apps.googleusercontent.com',
         }
       })
      })

   Web-Redirect-Handling

   Wenn du Google Login im Web nutzt, musst du UNBEDINGT eine beliebige Funktion aus dem Plugin aufrufen, wenn der Redirect stattfindet, damit das Plugin initialisiert wird und den Redirect verarbeiten und das Popup-Fenster schließen kann. Du kannst entweder isLoggedIn() ODER initialize() - beide lösen das Redirect-Handling aus:

   // Option 1: Call isLoggedIn when the redirect page loads
   SocialLogin.isLoggedIn({ provider: 'google' }).catch(() => {
     // Ignore the result, this is just to initialize the plugin
   });
   
   // Option 2: Call initialize when the redirect page loads
   SocialLogin.initialize({
     google: {
       webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
     }
   }).catch(() => {
     // Ignore any errors, this is just to handle the redirect
   });

   Achtung

   Im Web SocialLogin.refresh({ provider: 'google' }) ist nicht implementiert, selbst wenn google.mode: 'online'verwendet wird. Wenn du im Web ein neues Google-Token benötigst, rufe SocialLogin.login({ provider: 'google', ... }) erneut auf.

   3. Erstelle einen Login-Button, der SocialLogin.login beim Klicken aufruft

      const res = await SocialLogin.login({
       provider: 'google',
       options: {}
      })
      // Handle the response
      console.log(JSON.stringify(res));

Google Login im Web fortsetzen

Wenn Sie ... verwenden Google Login im Web um Authentifizierungs- und Account-Flows zu planen, verbinde es mit Mit @capgo/capacitor-social-login für die native Funktion in „Mit @capgo/capacitor-social-login“, @capgo/capacitor-social-login für das Implementierungsdetail in @capgo/capacitor-social-login, @capgo/capacitor-passkey für das Implementierungsdetail in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric für das Implementierungsdetail in @capgo/capacitor-native-biometric, und Zwei-Faktor-Authentifizierung für das Implementierungsdetail in der Zwei-Faktor-Authentifizierung.