Zum Inhalt springen

Google Login 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 gelesen haben. Allgemeine Einrichtungsanleitung.

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

  1. Android-Kundenidentität erstellen.

    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 Option für Anmeldeinformationen mit APIs und Diensten hervorheben
    3. Klicken Sie auf die create credentials

      Erstellen Sie die Anmeldeinformationen-Button in Google-Konsolen
    4. Auswählen OAuth client ID

      OAuth Client-ID-Option in der Einstellungsmenü für Anmeldeinformationen
    5. Wählen Sie das Android Anwendungs-Typ

      Anwendungs-Typ-Wahl mit Android-Option hervorgehoben
    6. Öffnen Sie Android Studio

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

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

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

      Build.gradle-Datei mit Anzeige der Anwendungskonfiguration
    10. Öffnen Sie nun das Terminal. Stellen Sie sicher, dass Sie sich im android Ordner Ihrer App befinden und ./gradlew signInReport

    Terminal mit gradlew signInReport-Befehl
    1. Rollen Sie nach oben zu diesem Befehl. Sie sollten folgendes sehen. Kopieren Sie SHA1.
    Terminal-Ausgabe mit SHA1-Zertifikatsfingerprint
    1. Gehen Sie nun zurück zur Google-Konsole. Geben Sie Ihren applicationId als Package Name und Ihren SHA1 in das Zertifikatsfeld ein und klicken Sie create
    Formulare für die Erstellung eines Android-Clients mit Paketnamen und SHA1-Feldern
  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

      Anwendungsartenauswahl mit Web-Option hervorgehoben
    3. Klicke Create

      Web-Client-Erstellungsformular mit Schaltfläche 'Erstellen' am unteren Ende
    4. Kopiere die Client-ID, du wirst sie als webClientId in deinem JS/TS code

      Client-ID-Details mit Web-Client-ID zum Kopieren
  3. Passen Sie Ihre MainActivity

    1. Öffnen Sie bitte Ihre App in Android Studio. Sie können sie cap open android

    2. Finde MainActivity.java

      1. Öffnen Sie das app Ordner

        App-Ordner in der Android Studio-Projekt-Navigator
      2. Finden java

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

        MainActivity.java-Datei in der Paketstruktur
    3. Ändern MainActivity.java. Fügen Sie bitte den 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 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. 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. Rufen Sie SocialLogin.loginErstellen 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))
  5. Konfigurieren Sie den Emulator für die Testung

    1. Gehen Sie in Device manager und klicken Sie auf die Plus-Taste

      Gerätemanager in Android Studio mit Plus-Taste hervorgehoben
    2. Erstellen Sie ein virtuelles Gerät

      Schaltfläche zum Erstellen eines virtuellen Geräts in der virtuellen Gerätekonfiguration
    3. Wählen Sie jedes Gerät mit einer Play Store Symbolleiste mit Geräten mit Play Store-Unterstützung

      Hardwareauswahl mit Geräten mit Play Store-Unterstützung

      As du sehen kannst, der pixel 8 die Play Store Dienste

    4. Klicken Sie next

      Next-Button in Geräteerstellungsbildschirm
    5. Stellen Sie sicher, dass das Betriebssystem-Image vom Typ Google Play. ES MUSSEN sein Google Play

      Bildschirm zur Auswahl des Betriebssystems, das Google Play-Images zeigt
    6. Klicken Sie auf Next

      Next-Button in Bildschirm zur Auswahl des Betriebssystems
    7. Bestätigen Sie Ihr Gerät. Sie können Ihrem Emulator einen Namen geben, wie Sie möchten

      Gerätekonfigurationsüberprüfungsseite mit Beenden-Button
    8. Gehe in Device Manager und starte dein Simulator

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

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

    Einstellungen-Bildschirm mit Google Play-Option
    1. Klicke Update und warte etwa 60 Sekunden
    Google Play-Update-Bildschirm mit Aktualisieren-Button
  6. Teste deine Anwendung

    If Sie alles korrekt gemacht haben, sollten Sie das Google-Login-Flow ordnungsgemäß funktionieren sehen:

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

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

Bei Android verwendet dieses Plugin den Google-Zertifikatsmanager (androidx.credentials und Anmelden mit Google), nicht die 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, Signatur SHA-1 und einen maskierten webClientId damit Sie sie gegen die Google Cloud Console vergleichen können.

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

KundenartZweckWo es hingehen muss
WebanwendungServer / ID-Token-ZielgruppewebClientId in SocialLogin.initialize()
Android, eine pro SignierungskeyBestätigt, dass Ihr APK Google aufrufen darfGoogle Cloud Console nur. Passen Sie diesen ID nicht weiter webClientId

Eine häufige Fehlhandlung ist die Verwendung der Android Client ID als webClientId. Der Credential Manager erfordert dort die Web Client ID. Der Android Client benötigt nur den korrekten Paketnamen und die SHA-1 im Console registriert.

Erstellen Sie einen Android OAuth Client für jeden Zertifikat, das Ihre Builds testet:

  • Debug: von ./gradlew signingReport für die Debug-Variante.
  • Release: vom 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, selbst wenn Ihr Upload-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-Zustimmungsanzeige in Testmodus ist, fügen Sie jeden Google-Konto hinzu, das Sie mit der Zielgruppe > Testnutzer testen. email Die Veröffentlichung der App in die Produktion ist nicht erforderlich für profile undassetlinks.jsonZugriffsrechte. Digitale Asset Links (

) sind für die Anmeldung mit Google über den Credential Manager nicht erforderlich.

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

Fehler 28444: Entwicklerkonsol ist nicht korrekt eingerichtet

Abschnitt mit dem Titel “Fehler 28444: Entwicklerkonsol ist nicht korrekt eingerichtet” webClientIdDas bedeutet in der Regel, dass Google die Combination der installierten APK-Signierungszertifikat, Paketname und

  1. überprüfen: webClientId ist die Client-ID der Webanwendung und endet mit .apps.googleusercontent.com.
  2. Laufen Sie die App, reproduzieren Sie das Problem und lesen Sie Logcat für GoogleProvider, signingSha1=, und package=.
  3. In Google Cloud Console > Credentials, öffnen Sie Ihren Android OAuth-Kunden und überprüfen Sie den genauen Paketnamen und SHA-1.
  4. Wenn Sie ein Releasebuild 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-Client im gleichen Google Cloud-Projekt leben.
  7. Wenn das Einwilligungsschreiben in Testing ist, bestätigen Sie, dass die Google-Konto ein Testkonto ist.
  8. Warten und nach Konsolenänderungen erneut versuchen.

USER_CANCELLED nachdem Sie auf einem fehlerhaft konfigurierten Debugbuild ein Konto ausgewählt haben, kann es immer noch ein SHA-1- oder Client-ID-Mismatch geben. Beheben Sie die Konsolenkonfiguration oben zuerst.

SHA-1 aus dem installierten Build extrahieren

Abschnitt: SHA-1 aus dem installierten Build extrahieren

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 diese SHA-1 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

Tokens sind untergeordnet unter result:

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

Für Firebase Auth erstellen Sie mit diesem Zertifikat die Anmeldeinformationen und verwenden Sie den Webclient-Id als idToken in webClientId Wenn Sie das Entwickler-Zertifikat SHA-1 nicht erhalten können, versuchen Sie einen benutzerdefinierten Keystore. initialize.

Dieser Issue-Kommentar erklärt, wie Sie einen Keystore zu Ihrem Projekt hinzufügen können. Weitermachen von Google Login auf Android

Abschnitt mit dem Titel “Weitermachen von Google Login auf Android”

Wenn Sie

Wenn Sie Google-Anmeldung auf Android um die Authentifizierung und die Kontenflüsse zu planen, 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.