Google-Anmeldung auf Android

Einführung

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

Google-Anmeldung auf Android

In diesem Teil lernen Sie, wie Sie Google-Anmeldung in Android einrichten.

Vorsicht

Die Android SHA1-Zertifizierung ist sehr frustrierend und ich möchte niemandem diese Konfiguration aufbürden. Die folgenden Schritte gehen davon aus, dass sich die App nicht im Google Play Store befindet und nur auf dem lokalen Simulator oder dem Entwicklungshardwaregerät verwendet wird.

Wenn Sie Ihre App im Google Play Store veröffentlicht haben, MUSSEN Sie Test and release > Setup > App Signing.

eine zusätzliche Android-Kunden-ID hinzufügen, die den SHA1-Wert aus dem Google Play-Konsolen enthält, für Produktionsversionen. Sie können den SHA1-Hash finden, den Google Play zum Signieren Ihres Release-Bundles verwendet, unter Github issues.

__CAPGO_KEEP_0__ Issues zusätzlich an. Außerdem können Sie sich die Troubleshooting-Sektion

ansehen, um mehr Informationen zu erhalten.

Hinweis, Hinweis, Sie können mehrere Android-Kunden-IDs erstellen. Dies ist erforderlich, wenn Sie mehrere SHA1-Zertifikate haben.

1. Erstelle einen Android-Kunden-ID.

   1. Klicken Sie auf die Suchleiste

      

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

      

   3. Klicken Sie auf die create credentials

      

   4. Wählen Sie OAuth client ID

      

   5. Wählen Sie die Android Anwendungsart

      

   6. Android Studio öffnen

   7. Am unteren Ende des Navigators finden Sie die Gradle Scripts

      

   8. Finden build.gradle für das Modul app

      

   9. Die android.defaultConfig.applicationIdDies wird Ihre package name in der Google-Konsole

      

   10. Now, öffnen Sie das Terminal. Stellen Sie sicher, dass Sie sich im Verzeichnis Ihrer App befinden und führen Sie android Terminal zeigt gradlew signInReport-Befehl an ./gradlew signInReport

   
   11. Terminal-Ausgabe zeigt SHA1-Zertifikatsfingerprint an SHA1.
   
   12. als das applicationId und Ihren SHA1 in das Zertifikatsfeld ein und klicken Sie Package Name Android-Client-Erstellungsbildschirm mit Paketnamen und SHA1-Feldern ausgefüllt create
   

2. Gehen Sie zur

   1. Seite in Google-Konsolen Create credentials __CAPGO_KEEP_0__

   2. Anwendungstyp auf "Set application type to" Web

      

   3. Klicken Sie Create

      

   4. Kopieren Sie die Client-ID, Sie verwenden diese als webClientId in Ihrem JS/TS code

      

3. Ihre MainActivity

   1. Bitte öffnen Sie Ihre App in Android Studio. Sie können cap open android

   2. Finden Sie MainActivity.java

      1. Öffnen Sie das app Ordner

         

      2. Finden java

         

      3. Finden Sie Ihr MainActivity.java und klicken Sie darauf

         

   3. Ändern MainActivity.java. Bitte fügen Sie den folgenden code hinzu

      import ee.forgr.capacitor.social.login.GoogleProvider;
      import ee.forgr.capacitor.social.login.SocialLoginPlugin;
      import ee.forgr.capacitor.social.login.ModifiedMainActivityForSocialLoginPlugin;
      import com.getcapacitor.PluginHandle;
      import com.getcapacitor.Plugin;
      import android.content.Intent;
      import android.util.Log;
      import com.getcapacitor.BridgeActivity;
      
      // ModifiedMainActivityForSocialLoginPlugin is VERY VERY important !!!!!!
      public class MainActivity extends BridgeActivity implements ModifiedMainActivityForSocialLoginPlugin {
      
            @Override
            public void onActivityResult(int requestCode, int resultCode, Intent data) {
              super.onActivityResult(requestCode, resultCode, data);
      
              if (requestCode >= GoogleProvider.REQUEST_AUTHORIZE_GOOGLE_MIN && requestCode < GoogleProvider.REQUEST_AUTHORIZE_GOOGLE_MAX) {
                PluginHandle pluginHandle = getBridge().getPlugin("SocialLogin");
                if (pluginHandle == null) {
                  Log.i("Google Activity Result", "SocialLogin login handle is null");
                  return;
                }
                Plugin plugin = pluginHandle.getInstance();
                if (!(plugin instanceof SocialLoginPlugin)) {
                  Log.i("Google Activity Result", "SocialLogin plugin instance is not SocialLoginPlugin");
                  return;
                }
                ((SocialLoginPlugin) plugin).handleGoogleLoginIntent(requestCode, data);
              }
            }
      
            // This function will never be called, leave it empty
            @Override
            public void IHaveModifiedTheMainActivityForTheUseWithSocialLoginPlugin() {}
      }

   4. Speichern Sie das Datei

4. Verwenden Sie Google-Login in Ihrer Anwendung

   1. Zuerst importieren SocialLogin

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

   2. 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',
          }
        })
      })

   3. Aufrufen SocialLogin.login. Erstellen Sie einen Button und führen Sie folgenden code auf Klick aus.

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

      Vorsicht

      Wenn Sie Google mit mode: 'offline', SocialLogin.login() returns serverAuthCode für Ihren Backend-Austauschfluss. Rufen Sie nicht SocialLogin.refresh({ provider: 'google' }) in der App in diesem Modus auf. Exchange serverAuthCode On Ihrem Backend speichern Sie den Google-Refresh-Token und aktualisieren ihn auf dem Backend.

5. Konfigurieren Sie den Emulator für die Testung

   1. Gehe in Device manager und klicke auf die Plus-Taste

      

   2. Erstelle ein virtuelles Gerät

      

   3. Wähle jedes Gerät mit einem Play Store Symbol

      

      Sie sehen, dass das pixel 8 die Play Store Dienste

   4. Klicken next

      

   5. Stellen Sie sicher, dass das Betriebssystem-Image vom Typ Google Play. ES MUSSEN sei vom Typ Google Play

      

   6. Klicken Sie auf nächsten

      

   7. Bestätigen Sie Ihr Gerät. Sie können Ihrem Emulator einen Namen geben, wie Sie möchten

      

   8. Gehe in Device Manager und starten Sie Ihren Simulator

      

   9. Geht nach dem Start des Simulators in dessen Einstellungen

      

   10. Geht in Google Play

   
   11. Klicken Sie Update und warten Sie etwa 60 Sekunden
   

6. Testen Sie Ihre Anwendung

   Wenn Sie alles richtig gemacht haben, sollten Sie das Google-Login-Flow korrekt funktionieren sehen:

   

Problembehandlung

Wenn Sie Probleme haben, zögern Sie bitte nicht, die Github Probleme.

Die Probleme mit Google-Login sind IMMER mit dem SHA1-Zertifikat verbunden.

Wenn Sie das Entwickler-SHA1-Zertifikat nicht erhalten können, versuchen Sie, ein benutzerdefiniertes Keystore zu verwenden. Hier ist ein Kommentar, der erklärt, wie Sie ein Keystore zu Ihrem Projekt hinzufügen können.

Fortsetzen Sie von Google-Login auf Android

Wenn Sie Google Login auf Android für die Planung der Authentifizierung und der Kontoflows verwenden Using @capgo/capacitor-social-login Verwenden Sie @capgo/capacitor-social-login für die native Fähigkeit in Verwenden Sie @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_KEEP_0__/__CAPGO_KEEP_1__-native-biometric, und das Zwei-Faktor-Authentifizierungsprotokoll für die Implementierungsdetails in der Zwei-Faktor-Authentifizierung.