Google-Anmeldung auf 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 bereits die allgemeine Einrichtungsanleitung gelesen haben. Allgemeine Einrichtungsanleitung.

Google-Login auf der Webanwendung verwenden

Mit dem Google-Login auf der Webanwendung ist es ziemlich einfach.

1. Um es zu verwenden, müssen Sie Folgendes tun:

   Hinweis

   Hinweis

   1. Wenn Sie bereits Google Login für Android konfiguriert haben, können Sie diesen Schritt überspringen, da Sie bereits einen Webclient erstellt haben. Sie können direkt zum Schritt 2 weitergehen.

      

   2. Suchleiste im Google-Konsolen credentials Suchen Sie nach APIs and Services und klicken Sie auf die

      

   3. Suchergebnisse, die die Anmeldeinformationen mit APIs und Diensten hervorheben create credentials

      

   4. Auswählen OAuth client ID

      

   5. Auswählen Sie das Application type als Web application

      

   6. Benennen Sie Ihren Kunden und klicken Sie Create

      

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

      

2. Konfigurieren Sie den Web-Kunden in der Google-Konsolen

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

      

   2. Nun bitte fügen Sie die Authorized JavaScript originsDies sollte alle Adressen enthalten, die Sie für Ihre App verwenden könnten. In meinem Fall werde ich NICHTS als localhost verwenden, aber da ich einen benutzerdefinierten Port verwende, muss ich beide http://localhost und http://localhost:5173

      1. Bitte klicken Sie auf add URI

         

      2. Bitte geben Sie Ihre URL ein

         

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

      4. Wenn Sie fertig sind, sollte Ihre Bildschirmansicht wie folgt aussehen

         

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

      1. Klicken Sie auf ADD URI

         

      2. Geben Sie Ihre URL ein und klicken Sie ADD URL wieder

         

   4. Klicken Sie save

      

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

   1. Zuerst importieren Sie SocialLogin

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

   2. Dann rufen Sie 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-Verwaltung

   Wenn Sie Google-Login auf der Web-Seite verwenden, müssen Sie MUSSEN jede Funktion vom Plugin aufrufen, wenn der Redirect erfolgt, um die Plugin zu initialisieren, damit es den Redirect und das Schließen der Popup-Fenster handhaben kann. Sie können entweder isLoggedIn() ODR initialize() - beide lösen das Umleiten 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
   });

   Vorsicht

   Bei Web, SocialLogin.refresh({ provider: 'google' }) wird nicht implementiert, auch wenn google.mode: 'online'wenn Sie ein frisches Google-Token bei Web benötigen, rufen Sie SocialLogin.login({ provider: 'google', ... }) wieder an.

   3. Erstellen Sie einen Anmeldebereich, der SocialLogin.login aufruft, wenn er angeklickt wird

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

Bleib weiterhin bei Google Login auf Web

Wenn Sie Google Login auf Web für die Planung der Authentifizierung und der Kontoflows 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-biometrisch und Zweifaktor-Authentifizierung für die Implementierungsdetails in Zweifaktor-Authentifizierung.