Zum Inhalt springen

Google Login auf Android

GitHub

In dieser Anleitung 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.

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

  1. Erstellen Sie eine Android-Kunden-ID.

    1. Klicken Sie auf die Suchleiste

      Google-Konsolen-Suchleiste
    2. Suchen Sie nach credentials und klicken Sie auf die APIs and Services eine (Nummer 2 auf dem Screenshot)

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

      Zugriffsanmeldeberechtigung erstellen
    4. Wählen Sie OAuth client ID

      OAuth-Kundenidentifikationsnummer in der Anmeldeberechtigungs-Menüauswahl
    5. Wählen Sie die Android Anwendungstyp

      Anwendungstypauswahl mit Android-Option hervorgehoben
    6. Öffnen Sie Android Studio

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

      Gradle-Scripts-Sektion in der Android-Studio-Projekt-Navigationsleiste
    8. Finden Sie build.gradle zur Modul app

      build.gradle (Modul: app) Datei in der Gradle-Scripts-Sektion
    9. Kopieren Sie den android.defaultConfig.applicationId. Dies wird Ihr package name im Google-Konsolen

      Build.gradle-Datei, die die Anwendungs-ID-Konfiguration zeigt
    10. Jetzt öffnen Sie das Terminal. Stellen Sie sicher, dass Sie sich im android Ordner Ihres Apps befinden und das Kommando ./gradlew signInReport

    Terminal zeigt, das gradlew signInReport-Kommando
    1. Scrollen Sie nach oben in diesem Kommando. Sie sollten die folgende Zeile sehen. Kopieren Sie den SHA1.
    Terminal-Ausgabe, die die SHA1-Zertifikatsfingerprint zeigt
    1. Jetzt gehen Sie zurück zum Google-Konsolen. Geben Sie Ihren applicationId als Package Name und Ihre SHA1 in das Zertifikatsfeld ein und klicken Sie create
    Erstellung einer Android-Klientenform mit Paketnamen und SHA1-Feldern ausgefüllt
  2. Erstellen Sie einen Webclient (dies ist erforderlich für Android)

    1. Gehe zur Create credentials Seite in Google Console

    2. Legen Sie die Anwendungsart auf Web

      Anwendungsartenauswahl mit Web-Option hervorgehoben
    3. Klicken Sie auf Create

      Webclient-Erstellungsfenster mit Schaltfläche 'Erstellen' am unteren Ende
    4. Kopieren Sie die Client-ID, Sie verwenden diese als webClientId im Ihren JS/TS code

      Details zur Client-ID mit Webclient-ID zum Kopieren
  3. Passen Sie Ihren MainActivity

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

    2. Suchen MainActivity.java

      1. Öffnen Sie das app Ordner

        App-Ordner in Android Studio-Projekt-Navigator
      2. Suchen java

        Java-Ordner in Android Studio-Projekt-Struktur
      3. Finden Sie Ihren MainActivity.java und klicken Sie darauf

        MainActivity.java-Datei in Paketstruktur
    3. Ändern MainActivity.java. Bitte fügen Sie 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. Das Datei speichern

  4. Verwenden Sie Google-Login in Ihrer Anwendung

    1. Zuerst importieren Sie SocialLogin

      import { SocialLogin } from '@capgo/capacitor-social-login';
    2. Initialisieren aufrufen. 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.loginSchritt 2: Eine Schaltfläche erstellen und auf Klick folgenden code ausführen.

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

    1. und klicke auf die Plus-Taste Device manager Gerätemanager in Android Studio mit Plus-Taste hervorgehoben

      Erstelle ein virtuelles Gerät
    2. Schaltfläche zum Erstellen eines virtuellen Geräts in der Virtual Device-Konfiguration

      Wähle jedes Gerät mit einem
    3. __CAPGO_KEEP_0__ = Google Play Store icon

      Hardwareauswahl, die Geräte mit Play Store Unterstützung anzeigt

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

    4. Klicken Sie next

      Nächster Schritt in der Geräteeinstellung
    5. Stellen Sie sicher, dass das Betriebssystem-Image vom Typ Google Play. MUSSEN von Typ Google Play

      Systemimageauswahl, die Google Play-Typ-Images anzeigt
    6. Klicken Sie auf Nächster Schritt

      Nächster Button in Systembildauswahlbildschirm
    7. Bestätigen Sie Ihr Gerät. Sie können Ihrem Emulator einen Namen geben, wie Sie ihn bevorzugen

      Bildschirm zur Verifizierung der Gerätekonfiguration mit Beenden-Button
    8. Gehe in Device Manager und starte Ihren Simulator

      Geräemanager mit virtuellem Gerät aufgelistet und Spiel-Button
    9. Nachdem der Simulator gestartet ist, gehe in seine Einstellungen

      Android-Emulator mit Einstellungen-App
    10. Gehe in Google Play

    Einstellungenbildschirm mit Google Play-Option
    1. Klicken Update und warten Sie etwa 60 Sekunden
    Google Play Aktualisierungsbildschirm mit Aktualisieren-Button
  6. Testen Sie Ihre Anwendung

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

    Demo des Google-Login-Flows auf Android, der sich beim Anmeldenprozess und der erfolgreichen Authentifizierung befindet

Wenn Sie Probleme haben, vergleichen Sie zunächst Ihre Anwendungskonfiguration mit den Werten im Google Cloud Console. Android-Feuerwehrsign-in-Fehler werden normalerweise durch einen Paketnamen, eine SHA-1- oder ein Client-ID-Missmatch verursacht.

Bei Android wird dieser Plugin Google-Zertifikatsmanager (androidx.credentials und Anmelden mit Google) verwendet, nicht das legacy GoogleSignInClient API. Logcat-Fehler wie GetCredentialCustomException: [28444] Developer console is not set up correctly kommen von dieser Stacks.

Filtern Sie Logcat mit GoogleProvider oder CapgoSocialLogin oder webClientId oder

oder

oder

oder

oderoderoder
oderServer / Zielgruppe für ID-TokenwebClientId in SocialLogin.initialize()
für Android, eine pro SignierungskeyStellt sicher, dass Ihr APK berechtigt ist, Google zu kontaktierenNur im Google Cloud Console. Passen Sie diesen ID nicht an die webClientId

Eine häufige Fehlinterpretation ist die Verwendung des Android-Client-IDs webClientId. Der Credential Manager erfordert dort den Web-Client-IDs. Der Android-Client benötigt nur die richtige Paketname und SHA-1 im Console registriert.

Erstellen Sie einen Android OAuth-Client für jede Zertifikat, die Ihre Builds signieren:

  • Debug: von ./gradlew signingReport für die Debug-Variante.
  • Release: von dem APK oder AAB, das Sie tatsächlich installieren.
  • Play App Signing: von Play Console > App-Integrität > App-Signierungs-Zertifikat. Dies ist erforderlich für Play Store Builds, auch wenn Ihr Upload-Key-SHA-1 bereits registriert ist.

Die applicationId in android/app/build.gradle muss genau dem Android OAuth-Kundenpaketnamen entsprechen, einschließlich jeder .debug Suffix.

Wenn die OAuth-Konsensschirm in Testmodus ist, fügen Sie alle Google-Konten hinzu, die Sie unter Benutzergruppe > Testnutzer testen. email und profile Berechtigungen. Digitale Asset Links (assetlinks.json) sind für die Anmeldung mit Google über den Credential Manager nicht erforderlich.

Google Cloud-Änderungen können bis zu ein paar Stunden dauern, um sich zu verbreiten.

Fehler 28444: Entwicklerkonsol ist nicht korrekt eingerichtet

Abschnitt mit dem Titel 'Fehler 28444: Entwicklerkonsol ist nicht korrekt eingerichtet'

Das bedeutet in der Regel, dass Google die Combination von installiertem APK-Signierungszertifikat, Paketname und webClientId. Arbeiten Sie durch diese Liste:

  1. Bestätigen webClientId ist die Client-ID der Webanwendung und endet mit .apps.googleusercontent.com.
  2. Führen Sie das Programm aus, reproduzieren Sie das Problem und lesen Sie Logcat für GoogleProvider, signingSha1=, und package=.
  3. In Google Cloud Console > Zertifikate, öffnen Sie Ihren Android OAuth-Kunden und überprüfen Sie den genauen Paketnamen und SHA-1.
  4. Wenn Sie ein Release-Build testen, registrieren Sie den SHA-1 von diesem Build, nicht nur den Debug-Keystore.
  5. Wenn das Programm über den Play Store verteilt wird, registrieren Sie auch den Play App Signing SHA-1.
  6. Stellen Sie sicher, dass Web- und Android-Kunden sich in demselben Google Cloud-Projekt befinden.
  7. Wenn die Einwilligungsschleife in Testing ist, bestätigen Sie, dass das Google-Konto ein Testkonto ist.
  8. Warte und versuche es erneut nach Änderungen im Konsole.

USER_CANCELLED Nachdem du auf einem fehlerhaft konfigurierten Debug-Build ein Konto ausgewählt hast, kann es immer noch zu einem SHA-1- oder Client-ID-Mismatch kommen. Behebe die Konsole-Einstellungen oben zuerst.

Debug- oder lokale Builds:

Terminal-Fenster
cd android && ./gradlew signingReport

Signierter Release-APK:

Terminal-Fenster
keytool -printcert -jarfile android/app/release/app-release.apk

Füge das SHA-1 zu einem Android OAuth-Klienten mit dem entsprechenden Paketnamen hinzu, installiere dieselbe signierte APK erneut und testen Sie es erneut:

Terminal-Fenster
adb install android/app/release/app-release.apk

Token sind untergeordnet unter result:

const login = await SocialLogin.login({ provider: 'google' });
const idToken = login.result?.idToken;

Für Firebase Auth, erstellen Sie mit diesen die Anmeldeinformationen idToken und verwenden Sie den Webclient-Id als webClientId in initialize.

Wenn Sie das Entwickler-SHA-1-Zertifikat nicht erhalten können, versuchen Sie einen benutzerdefinierten Keystore. Dieser Issue-Kommentar erklärt, wie Sie einen Keystore zu Ihrem Projekt hinzufügen können.

Wenn Sie Google Login auf Android verwenden Google Login auf Android um die Authentifizierung und die Kontenflüsse zu planen, verbinden Sie es mit Verwenden Sie @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 Verwenden Sie @capgo/capacitor-social-login für die Implementierungsdetail in @capgo/capacitor-social-login @capgo/capacitor-passkey Verwenden Sie @capgo/capacitor-passkey für die Implementierungsdetail in @capgo/capacitor-passkey @capgo/capacitor-native-biometric Verwenden Sie @capgo/capacitor-native-biometric für die Implementierungsdetail in @capgo/capacitor-native-biometric Zweifaktor-Authentifizierung für die Implementierungsdetails in Zweifaktor-Authentifizierung.