Google-Anmeldung auf Web

Einführung

In dieser Anleitung lernen Sie, wie Sie Google-Login mit Capgo Social Login für Webanwendungen einrichten können. Ich gehe davon aus, dass Sie bereits die allgemeine Einrichtungsanleitung.

Google-Login auf dem Web

Die Verwendung von Google-Anmelden auf der Webanwendung ist ziemlich einfach. Um sie zu verwenden, müssen Sie Folgendes tun:

1. Einen Webclient in der Google-Konsole erstellen

   Hinweis

   Wenn Sie bereits Google-Anmelden 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.

   1. Auf die Suchleiste klicken

      

   2. Nach credentials und auf die APIs and Services Option (Zahl 2 auf dem Screenshot)

      

   3. Klicken Sie auf den create credentials

      

   4. Wählen Sie OAuth client ID

      

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

      

   6. Bennen Sie Ihren Kunden und klicken Sie Create

      

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

      

2. Konfigurieren Sie den Webclient im Google-Konsolen

   1. Bitte öffnen Sie das Zugriffsdaten-Seite und klicken Sie auf Ihren Webclient

      

   2. Now, bitte fügen Sie die Authorized JavaScript origins. Dies 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 sowohl http://localhost als auch http://localhost:5173

      1. Bitte klicken Sie auf add URI

         

      2. Bitte geben Sie Ihre URL ein

         

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

      4. Wenn Sie fertig sind, sollte Ihr Bildschirm 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 wie folgt aus JavaScript:

   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 Web verwenden, müssen Sie MUSS wirft bei der Rückleitung eine Funktion des Plugins aus, um das Plugin zu initialisieren, damit es die Rückleitung und das Schließen des Popup-Fensters handhaben kann. Sie können entweder isLoggedIn() ODER initialize() - beide werden die Rückleitungshandhabung auslösen:

   // 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 ist dies nicht implementiert, auch wenn Sie SocialLogin.refresh({ provider: 'google' }) verwenden. Wenn Sie ein frisches Google-Token bei Web benötigen, rufen Sie google.mode: 'online'wieder auf. SocialLogin.login({ provider: 'google', ... }) Erstellen Sie einen Anmeldebereich, der

   3. aufruft, wenn er angeklickt wird SocialLogin.login __CAPGO_KEEP_0__

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

Weiter mit Google Login on Web

Wenn Sie Google Login on Web zur Planung der Authentifizierung und der Kontoflows verwenden, verbinden Sie es mit Mithilfe von @capgo/capacitor-social-login für die native Fähigkeit in Mithilfe von @capgo/capacitor-social-login für die Implementierungsdetail in @capgo/capacitor-social-login für die Implementierungsdetail in @capgo/capacitor-passkey für die Implementierungsdetail in @capgo/capacitor-passkey für die Implementierungsdetail in @capgo/capacitor-passkey @capgo/capacitor-native-biometrisch für die Implementierungsdetails in @capgo/capacitor-native-biometrisch, und Zweifaktor-Authentifizierung für die Implementierungsdetails in Zweifaktor-Authentifizierung.