Google-Anmelden auf Android

Einführung

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

Google-Login auf Android verwenden

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

Vorsicht

Das Android-SHA1-Zertifikat ist sehr frustrierend und ich möchte es niemandem zumuten, es aufzusetzen. 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 ein zusätzliches Android-Kunden-ID hinzufügen, das den SHA1 aus dem Google Play Console für Produktionsausgaben enthält. Sie können die SHA1-HASH finden, die Google Play verwendet, um Ihre Release-Bundle zu signieren, unter Test and release > Setup > App Signing.

Schließlich ist es wichtig zu erwähnen, dass, wenn Sie Fehler machen, der Fehler NICHT offensichtlich sein wird. Es kann sehr schwierig sein, ihn zu debuggen. Wenn Sie Schwierigkeiten beim Einrichten haben, schauen Sie bitte auf die Github Probleme.

Zusätzlich können Sie die Troubleshooting-Sektion der Google-Login-Einrichtung für Android","für weitere Informationen.

Hinweis

Sie können mehrere Android-Kundenidentitäten erstellen. Dies ist erforderlich, wenn Sie mehrere SHA1-Zertifikate haben.

1. Erstellen Sie eine Android-Kundenidentität.

   1. Klicken Sie auf die Suchleiste

      

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

      

   3. Klicken Sie auf die create credentials

      

   4. Wählen Sie OAuth client ID

      

   5. Wählen Sie den Android Anwendungs-Typ

      

   6. Öffnen Sie Android Studio

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

      

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

      

   9. Kopieren Sie die android.defaultConfig.applicationId. Dies wird Ihre package name im Google-Konsolen

      

   10. Öffnen Sie nun die Terminal-Anwendung. Stellen Sie sicher, dass Sie sich im android Ordner Ihrer App befinden und ./gradlew signInReport

   
   11. Rollen Sie nach oben zu diesem Befehl. Sie sollten Folgendes sehen. Kopieren Sie den SHA1.
   
   12. Gehen Sie nun zurück zum Google-Konsolen. Geben Sie Ihren applicationId als das Package Name und Ihren SHA1 in das Zertifikatsfeld ein und klicken Sie create
   

2. Erstellen Sie einen Webclient (dies ist erforderlich für Android)

   1. Gehe zur Create credentials Seite in Google Console

   2. Setze die Anwendungsart auf Web

      

   3. Klicke Create

      

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

      

3. Ändern Sie Ihre MainActivity

   1. Öffnen Sie bitte Ihre App in Android Studio. Sie können mit F5 ausführen cap open android

   2. Find MainActivity.java

      1. Öffne das app Ordner

         

      2. Find java

         

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

         

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

      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. Call initialize. 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 __CAPGO_KEEP_0__ initialisieren mode: 'offline', SocialLogin.login() returns serverAuthCode für Ihren Backend-Austauschfluss. Rufen Sie SocialLogin.refresh({ provider: 'google' }) in der App in diesem Modus nicht auf. Austauschen serverAuthCode auf Ihrem Backend, speichern Sie den Google-Refresh-Token dort und aktualisieren Sie 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 Ikonen

      

      Wie Sie sehen können, der pixel 8 unterstützt die Play Store Dienste

   4. Klicken next

      

   5. Stellen Sie sicher, dass das Betriebssystem-Image vom Typ Google Play. __CAPGO_KEEP_0__ muss vom Typ Google Play

      

   6. Klicken Sie auf Weiter

      

   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 starte Ihr Simulator

      

   9. Nachdem der Simulator gestartet ist, gehe in seine Einstellungen

      

   10. Gehe in Google Play

   
   11. Klicken 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:

   

Fehlerbehebung

Wenn Sie Probleme haben, schauen Sie sich bitte die Github Fehler an.

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

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

Weitermachen von Google Login auf Android

Wenn Sie Google Login auf Android 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-biometrische für die Implementierungsdetails in @capgo/capacitor-native-biometrische, und Zwei-Faktor-Authentifizierung für die Implementierungsdetails in Zwei-Faktor-Authentifizierung.