Google-Anmeldung auf Webanwendung

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 Einrichtungshilfe.

Google-Anmeldung auf der Webanwendung verwenden

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

1. Ein Webclient in der Google-Konsole erstellen

   Hinweis

   Wenn Sie bereits die Google-Anmeldung 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 wechseln.

   1. Auf die Suchleiste klicken

      

   2. Nach suchen 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 das Application type Anwendungstypen auswählen mit Web-Option hervorgehoben Web application

      

   6. Web-Kundenkonto-Erstellungsfeld mit Name-Highlight Create

      

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

      

2. Konfigurieren Sie den Webclient im Google-Console

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

      

   2. Fügen Sie nun bitte die Authorized JavaScript originsdies sollte alle Adressen enthalten, die Sie für Ihre App verwenden möchten. In meinem Fall werde ich NICHTS ausschließlich http://localhost localhost verwenden, aber da ich einen benutzerdefinierten Port verwende, muss ich beide http://localhost:5173

      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 wie folgt aussehen

         

   3. Fügen Sie nun einige 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. Bitte klicken Sie auf ADD URI

         

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

         

   4. Klicken 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 der Webanwendung verwenden, dann __CAPGO_KEEP_0__ müssen Sie jede Funktion aus dem Plugin aufrufen, wenn der Umleitungsprozess stattfindet, um das Plugin zu initialisieren, damit es den Umleitungsprozess und das Schließen des Popup-Fensters handhaben kann. Sie können entweder isLoggedIn() __CAPGO_KEEP_1__ initialize() oder

   // 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

   Vorsicht SocialLogin.refresh({ provider: 'google' }) Auf der Webanwendung google.mode: 'online'wird nicht implementiert, auch wenn Sie SocialLogin.login({ provider: 'google', ... }) verwenden. Wenn Sie einen frischen Google-Token auf der Webanwendung benötigen, rufen Sie

   3. Einen Anmeldebereich erstellen, der aufgerufen wird SocialLogin.login wenn geklickt

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

Weitermachen von Google Login auf Web

Wenn Sie Google Login auf Web verwenden um die Authentifizierung und die Kontenflüsse zu planen, verbinden Sie es mit Mit @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-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, für die native Fähigkeit 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.