Zum Inhalt springen

Google-Anmelden auf Android

GitHub

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

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

  1. Klicken Sie auf die Suchleiste

    1. Klicken Sie auf die Suchleiste

      Google Konsole Suchfeld
    2. Suchen Sie nach credentials und klicken Sie auf das APIs and Services das eine (Nummer 2 auf dem Screenshot)

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

      Erstellen Sie Anmeldeinformationen-Button in Google Konsole
    4. Wählen Sie OAuth client ID

      OAuth-Kundenkonto-Option in der Anmeldeinformationen-Erstellungsmenü
    5. Wählen Sie die Android Anwendungstyp

      Anwendungstypauswahl mit Android-Option hervorgehoben
    6. Open Android Studio

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

      Sektion "Gradle Scripts" im Android Studio-Projekt-Navigator
    8. Finden build.gradle für das Modul app

      build.gradle (Modul: app) -Datei in der Sektion "Gradle Scripts"
    9. Kopieren Sie die android.defaultConfig.applicationIdDies wird Ihre package name im Google-Konsolen

      Build.gradle-Datei mit der Anwendungskonfiguration für applicationId
    10. Now, öffnen Sie die Terminal-Anwendung. Stellen Sie sicher, dass Sie sich im android Ordner Ihres Apps befinden und das Kommando ausführen ./gradlew signInReport

    Terminal zeigt gradlew signInReport-Befehl an
    1. Scrollen Sie zur Anfangszeile dieses Befehls. Sie sollten Folgendes sehen. Kopieren Sie SHA1.
    Terminalausgabe mit SHA1-Zertifikatsfingerprint
    1. Gehe nun zurück zur Google-Konsole. Geben Sie Ihren applicationId als Package Name und Ihren SHA1 in das Zertifikatsfeld ein und klicken Sie create
    Android-Client-Erstellungsformular mit Paketnamen- und SHA1-Feldern ausgefüllt
  2. Erstelle einen Web-Client (dies ist erforderlich für Android)

    1. Gehe zur Create credentials Seite in der Google-Konsole

    2. Setze Anwendungstyp auf Web

      Anwendungstypen mit Web-Option hervorgehoben
    3. Klicken Sie Create

      Webclient-Erstellungsformular mit Schaltfläche 'Erstellen' am unteren Ende
    4. Die Client-ID kopieren, Sie verwenden diese als webClientId in Ihrem JS/TS code

      Details zur Client-ID, die Webclient-ID zum Kopieren anzuzeigen
  3. Anpassen Sie Ihr MainActivity

    1. Bitte öffnen Sie Ihr App-Projekt in Android Studio. Sie können es cap open android

    2. Finden MainActivity.java

      1. Öffnen Sie das app Ordner

        App-Ordner im Android Studio-Projekt-Navigator
      2. Finden java

        Java-Ordner im Projektstruktur von Android Studio
      3. Finden Sie Ihren MainActivity.java und klicken Sie darauf

        MainActivity.java-Datei in der Paketstruktur
    3. Ändern Sie 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 die Datei

  4. Verwenden Sie Google-Login in Ihrer Anwendung

    1. Zuerst importieren Sie 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. Erstelle einen Button und führe folgenden code bei Klick aus.

      const res = await SocialLogin.login({
      provider: 'google',
      options: {}
      })
      // handle the response
      console.log(JSON.stringify(res))
  5. Konfigurieren Sie den Emulator für die Testung

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

      Gerätemanager in Android Studio mit Plus-Taste hervorgehoben
    2. Erstelle einen virtuellen Gerät

      Schaltfläche "Erstellen virtuelles Gerät" in der virtuellen Gerätekonfiguration
    3. Wähle jedes Gerät mit einem Play Store Icon

      Hardwareauswahl zeigt Geräte mit Play Store-Unterstützung an

      Wie du siehst, unterstützt das pixel 8 die Play Store Dienste

    4. Klicke next

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

      System-Image-Auswahl mit Google Play-Typ-Images
    6. Klicken Sie auf Weiter

      Weiter
    7. Bestätigen Sie Ihr Gerät. Sie können Ihrem Emulator einen Namen geben, wie Sie ihn bevorzugen

      Überprüfung der Gerätekonfiguration mit Beenden-Button
    8. Gehe in Device Manager und starte Ihr Simulator

      Gerätemanager mit virtuellem Gerät aufgelistet und Spiel-Button
    9. Nachdem sich der Simulator gestartet hat, gehen Sie in seine Einstellungen

      Android-Emulator mit Einstellungen-App
    10. Gehen Sie in Google Play

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

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

    Demo des Google-Login-Flows auf Android, der sich anmeldet und eine erfolgreiche Authentifizierung durchführt

If Sie Probleme haben, vergleichen Sie zunächst Ihre App-Konfiguration mit den Werten im Google Cloud Console. Android Google Sign-In-Fehler werden in der Regel durch einen Paketnamen, SHA-1 oder Client-ID-Missmatch verursacht.

Bei Android verwendet dieses Plugin den Google-Zugriffsmanager (androidx.credentials und Anmelden mit Google), nicht das veraltete GoogleSignInClient API. Logcat-Fehler wie GetCredentialCustomException: [28444] Developer console is not set up correctly kommen von diesem Stapel.

Filtern Sie Logcat mit GoogleProvider oder CapgoSocialLogin nach einem fehlgeschlagenen Login. Das Plugin loggt Ihren Paketnamen, Ihre Signierungs-SHA-1 und eine maskierte webClientId damit Sie sie gegen die Werte im Google Cloud Console vergleichen können.

Sie benötigen zwei Arten von OAuth 2.0-Kundenidentitäten in demselben Google Cloud-Projekt:

Client-TypWird verwendetWo es hingeht
WebanwendungServer / Zielgruppe für ID-TokenwebClientId in SocialLogin.initialize()
Bei Android, eine pro SignierungskeyBeweist, dass Ihr APK berechtigt ist, Google zu rufenNur in der Google Cloud Console. Passen Sie diesen ID nicht an webClientId

Ein häufiger Fehler ist die Verwendung des Android-Kundenidentitäts als webClientIdDer Credential Manager erfordert den Webclient-Id dort.

Erstellen Sie einen Android OAuth-Kunden für jede Zertifikat, das Builds testet:

  • 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-Zertifikat für App-Signing. Dies ist erforderlich für Play Store-Builds, selbst wenn der Upload-SHA-1 bereits registriert ist.

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

Wenn die OAuth-Zustimmungsanzeige in der Testmodus ist, fügen Sie jeden Google-Konto hinzu, das Sie testen, unter Zielgruppe > Testnutzer. Die Veröffentlichung der App in die Produktion ist nicht erforderlich für email und profile scopes. Digitale Asset Links (assetlinks.json) sind nicht erforderlich für das Anmelden mit Google über den Credential Manager.

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

Fehler 28444: Entwickler-Konsol ist nicht korrekt eingerichtet

Abschnitt mit dem Titel “Fehler 28444: Entwickler-Konsol ist nicht korrekt eingerichtet”

Das bedeutet in der Regel, dass Google die Combination des installierten APK-Signierungszertifikats, des Paketnamens und webClientIdArbeiten Sie durch diese Liste ab:

  1. Bestätigen webClientId ist die Webanwendungsklienten-ID und endet mit .apps.googleusercontent.com.
  2. Führen Sie das App, reproduzieren Sie das Versagen und lesen Sie Logcat für GoogleProvider, signingSha1=, und package=.
  3. In Google Cloud Console > Zertifikate, öffnen Sie Ihren Android-OAuth-Klienten und überprüfen Sie die genaue Paketname 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 die App über den Play Store verteilt wird, registrieren Sie auch den Play App Signing SHA-1.
  6. Stellen Sie sicher, dass Web- und Android-Klienten sich im gleichen Google Cloud-Projekt befinden.
  7. Wenn die Einwilligungsschleife auf Testing steht, bestätigen Sie, dass die Google-Konto ein Testkonto ist.
  8. Warten und nach Änderungen im Konsole erneut versuchen.

USER_CANCELLED Nachdem Sie auf einem fehlerhaft konfigurierten Debug-Build eine Konto ausgewählt haben, kann es immer noch ein SHA-1- oder Client-ID-Mismatch geben. Beheben Sie die Konsole-Einstellungen oben zuerst.

Debug- oder lokale Builds:

Terminalfenster
cd android && ./gradlew signingReport

Signiertes Release-APK:

Terminalfenster
keytool -printcert -jarfile android/app/release/app-release.apk

Fügen Sie die SHA-1 an einem Android OAuth-Klienten mit dem entsprechenden Paketnamen hinzu, installieren Sie das gleiche signierte APK erneut und testen Sie es erneut:

Terminalfenster
adb install android/app/release/app-release.apk

Token sind unter result:

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

Für Firebase Auth erstellen Sie mit diesem die Anmeldeinformationen idToken und verwenden Sie den Web-Kunden-ID als webClientId in initialize.

Wenn Sie das Entwicklungs-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 zum Planen 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-biometric für die Implementierungsdetails in @capgo/capacitor-native-biometric, und Zwei-Faktor-Authentifizierung für die Implementierungsdetails in Zwei-Faktor-Authentifizierung.