Google Login im Web

Einführung

In diesem Leitfaden lernen Sie, wie Sie Google Login mit Capgo Social Login für Webanwendungen einrichten. Ich gehe davon aus, dass Sie die allgemeine Einrichtungsanleitung bereits gelesen haben.

Verwendung von Google Login im Web

Die Verwendung des Google-Logins im Web ist ziemlich einfach. Um es zu verwenden, müssen Sie Folgendes tun:

1. Erstellen Sie einen Web-Client in der Google Console

   Note

   Wenn Sie Google Login für Android bereits konfiguriert haben, können Sie diesen Schritt überspringen, da Sie bereits einen Web-Client erstellt haben. Sie können direkt zu Schritt 2 übergehen.

   1. Klicken Sie auf die Suchleiste

      

   2. Suchen Sie nach credentials und klicken Sie auf die APIs and Services Option (Nummer 2 auf dem Screenshot)

      

   3. Klicken Sie auf create credentials

      

   4. Wählen Sie OAuth client ID

      

   5. Wählen Sie den Application type als Web application

      

   6. Benennen Sie Ihren Client und klicken Sie auf Create

      

   7. Kopieren Sie die Client-ID, Sie werden diese als webClientId in Ihrer Anwendung verwenden

      

2. Konfigurieren Sie den Web-Client in der Google Console

   1. Bitte öffnen Sie die Credentials-Seite und klicken Sie auf Ihren Web-Client

      

   2. Fügen Sie nun die Authorized JavaScript origins hinzu. Dies sollte alle Adressen enthalten, die Sie möglicherweise für Ihre App verwenden. In meinem Fall werde ich NUR localhost verwenden, aber da ich einen benutzerdefinierten Port verwende, muss ich sowohl http://localhost als auch http://localhost:5173 hinzufügen

      1. Bitte klicken Sie auf add URI

         

      2. Bitte geben Sie Ihre URL ein

         

      3. Bitte wiederholen Sie dies, bis Sie alle URLs hinzugefügt haben

      4. Wenn Sie fertig sind, sollte Ihr Bildschirm ungefähr so aussehen

         

   3. Fügen Sie nun einige Authorized redirect URIs hinzu. Dies hängt davon ab, auf welcher Seite Sie das CapacitorSocialLogin Plugin verwenden möchten. In meinem Fall werde ich es auf http://localhost:5173/auth verwenden

      1. Bitte klicken Sie auf ADD URI

         

      2. Geben Sie Ihre URL ein und klicken Sie erneut auf ADD URL

         

   4. Klicken Sie auf save

      

3. Jetzt sollten Sie bereit sein, login von JavaScript wie folgt aufzurufen:

   1. Importieren Sie zuerst SocialLogin

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

   2. Rufen Sie dann initialize auf. Dies sollte NUR einmal aufgerufen werden.

      // onMounted ist Vue-spezifisch
      // webClientId ist die Client-ID, die Sie im Web-Client-Erstellungsschritt erhalten haben, nicht die Android-Client-ID.
      onMounted(() => {
       SocialLogin.initialize({
         google: {
           webClientId: '673324426943-avl4v9ubdas7a0u7igf7in03pdj1dkmg.apps.googleusercontent.com',
         }
       })
      })

   Web Redirect Verarbeitung

   Wenn Sie Google Login im Web verwenden, MÜSSEN Sie beim Redirect eine beliebige Funktion des Plugins aufrufen, um das Plugin zu initialisieren, damit es den Redirect verarbeiten und das Popup-Fenster schließen kann. Sie können entweder isLoggedIn() ODER initialize() aufrufen - beide lösen die Redirect-Verarbeitung aus:

   // Option 1: Rufen Sie isLoggedIn auf, wenn die Redirect-Seite lädt
   SocialLogin.isLoggedIn({ provider: 'google' }).catch(() => {
     // Ignorieren Sie das Ergebnis, dies dient nur zur Initialisierung des Plugins
   });
   
   // Option 2: Rufen Sie initialize auf, wenn die Redirect-Seite lädt
   SocialLogin.initialize({
     google: {
       webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
     }
   }).catch(() => {
     // Ignorieren Sie eventuelle Fehler, dies dient nur zur Verarbeitung des Redirects
   });

   3. Erstellen Sie eine Login-Schaltfläche, die SocialLogin.login beim Klicken aufruft

      const res = await SocialLogin.login({
       provider: 'google',
       options: {}
      })
      // Verarbeiten Sie die Antwort
      console.log(JSON.stringify(res));