Zum Inhalt springen

Google-Login auf Android

GitHub

In diesem Leitfaden lernen Sie, wie Sie Google Login mit Capgo Social Login für Android einrichten. Ich nehme an, dass Sie bereits das allgemeine Einrichtungshandbuch gelesen haben. Allgemeine Einrichtung.

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

  1. Erstellen Sie eine Android-Kundenidentität.

    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 Anmeldedaten mit APIs und Diensten hervorheben
    3. Klicken Sie auf die create credentials

      Schaltfläche "Erstellen Sie Anmeldedaten" in Google-Konsolen
    4. Auswählen OAuth client ID

      OAuth-Kunden-ID-Option in der Erstellungsmenü der Anmeldedaten
    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

      Abschnitt der Gradle-Skripte im 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 die android.defaultConfig.applicationId. Dies wird Ihr package name in der Google-Konsole

      Ihr Build.gradle-Datei mit der Anwendungskonfiguration
    10. Öffnen Sie nun das Terminal. Stellen Sie sicher, dass Sie sich im android Terminal-Anzeige mit dem Befehl gradlew signInReport ./gradlew signInReport

    Terminal zeigt Befehl gradlew signInReport an.
    1. Scroll zu der Oberseite dieser Anweisung. Sie sollten folgendes sehen. Kopieren Sie das SHA1.
    Gehen Sie nun zurück zur Google-Konsole. Geben Sie Ihren
    1. Gehe zurück zur Google-Konsole. Gib deinen applicationId als das Package Name und Ihre SHA1 im Zertifikatsfeld eintragen und klicken create
    Android-Klient-Erstellung-Formular mit Paketnamen- und SHA1-Feldern ausgefüllt
  2. Erstellen Sie einen Webclient (dies ist erforderlich für Android)

    1. Gehe zur Create credentials Seite im Google-Konsolen

    2. Setze die Anwendungsart auf Web

      Anwendungsartenauswahl mit Web-Option hervorgehoben
    3. Click Create

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

      Details zur Client-ID mit Webclient-ID zum Kopieren
  3. Ändern Sie Ihre MainActivity

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

    2. Finde MainActivity.java

      1. Öffne das app Ordner

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

        Java-Ordner im Android Studio-Projekt-Layout
      3. Finde dein MainActivity.java und klicke darauf

        MainActivity.java-Datei im Paket-Layout
    3. Ändere MainActivity.javaBitte füge 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 Sie SocialLogin

      import { SocialLogin } from '@capgo/capacitor-social-login';
    2. Aufrufen 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. Aufrufen 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

      Erstellen Sie virtuelles Gerät-Button in Virtual Device-Konfiguration
    3. Wählen Sie jedes Gerät mit einem Play Store Symbol

      Hardwareauswahl zeigt Geräte mit Play Store Unterstützung

      As Sie sehen, der pixel 8 unterstützt die Play Store Dienste

    4. Klicken Sie next

      Next button in device creation wizard
    5. Stellen Sie sicher, dass das Betriebssystem-Image vom Typ Google Play. IT ES MUSSEN Google Play

      Bildauswahl für das Systembild mit Google Play-Typen
    6. Click next

      Next button in system image selection screen
    7. Bestätigen Sie Ihr Gerät. Sie können Ihrem Emulator einen Namen geben, wie Sie möchten

      Gerätekonfigurationsüberprüfungsseite mit "Abschließen"-Schaltfläche
    8. Gehen Sie in Device Manager und starten Sie Ihr Simulator

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

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

    Einstellungsseite mit Google Play-Option
    1. Klicken Sie Update und warten Sie etwa 60 Sekunden
    Google Play-Update-Seite mit Aktualisieren-Button
  6. Ihre Anwendung testen

    Wenn Sie alles korrekt gemacht haben, sollten Sie das Google-Login-Flow ordnungsgemäß 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 App-Konfiguration mit den Werten im Google Cloud Console. Android-Feuerzeichen für Google-Sign-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 Google-Anmeldung) verwendet, nicht das legacy- GoogleSignInClient API. Logcat-Fehler wie z.B. GetCredentialCustomException: [28444] Developer console is not set up correctly Logcat-Fehler wie

Filter Logcat mit GoogleProvider oder CapgoSocialLogin nach einem fehlgeschlagenen Login. Der Plugin loggt Ihren Paketnamen, den Signierungs-HASH (SHA-1) und einen maskierten webClientId um sie gegen die Google Cloud Console vergleichen zu können.

Benötigte Google Cloud-Einstellungen

Sektion: Benötigte Google Cloud-Einstellungen

Sie benötigen zwei Arten von OAuth 2.0 Client-IDs in demselben Google Cloud-Projekt:

KundenidentitätstypZweckWo es hingeht
WebanwendungServer / Zielgruppe für ID-TokenwebClientId in SocialLogin.initialize()
für Android, eine pro SignierungskeyBeweist, dass Ihr APK berechtigt ist, Google zu aufrufenNur im Google Cloud Console. Geben Sie diese ID nicht an webClientId

Ein häufiger Fehler ist die Verwendung des Android-Client-IDs als webClientIdDer Credential Manager erfordert den Webclient-Id dort. Der Android-Client benötigt nur die richtige Paketname und die SHA-1 im Konsole registriert.

Erstellen Sie einen Android OAuth-Klienten für jede Zertifizierung, die Ihre Builds signiert:

  • 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 Signierungskey. Dies ist erforderlich für Play Store Builds, auch wenn Ihr Upload-Key-SHA-1 bereits registriert ist.

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

Wenn die OAuth-Konsent-Schaltfläche in der Testmodus ist, fügen Sie alle Google-Konten, die Sie mit dem Testen unter Benutzergruppe > Testnutzer ein. Die Veröffentlichung der App in der Produktion ist nicht erforderlich für email und profile Zugriffsrechte. Digitale Asset Links (assetlinks.json) sind für das Anmelden 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

Sektion mit dem Titel “Fehler 28444: Entwicklerkonsol ist nicht korrekt eingerichtet”

Dies tritt fast immer auf, wenn 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. Laufen Sie die App, 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 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-Kunden im gleichen Google Cloud-Projekt leben.
  7. Wenn sich die Einwilligungsschleife im Testmodus befindet, bestätigen Sie, dass die Google-Konto ein Testkonto ist.
  8. Warten und nach Änderungen im Konsole erneut versuchen.

USER_CANCELLED after picking an account on a misconfigured debug build can still be a SHA-1 or client ID mismatch. Fix the console setup above first.

Entsperren Sie den SHA-1-Wert aus der installierten Build

Abschnitt mit dem Titel "Entsperren Sie den SHA-1-Wert aus der installierten Build"

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ügen Sie den SHA-1-Wert zu einem Android OAuth-Kunden hinzu, der dem entsprechenden Paketnamen entspricht, installieren Sie denselben signierten APK erneut und testen Sie erneut:

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

Token werden untergeordnet result:

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

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

If you cannot get the development SHA-1 certificate, try a custom keystore. Dieser Issue-Kommentar erklärt, wie Sie einen Keystore zu Ihrem Projekt hinzufügen können.

Wenn Sie Android verwenden Google Login auf Android um Authentifizierung und Account-Flüsse zu planen, verbinden Sie es mit Verwenden Sie @capgo/capacitor-social-login für die native Fähigkeit in Verwenden Sie @capgo/capacitor-social-login Verwenden Sie @capgo/capacitor-social-login für die Implementierungsdetails in @capgo/capacitor-social-login Verwenden Sie @capgo/capacitor-passkey für die Implementierungsdetails in @capgo/capacitor-passkey Verwenden Sie @capgo/capacitor-native-biometric für die Implementierungsdetails in @capgo/capacitor-native-biometric, und Zwei-Faktor-Authentifizierung für die Implementierungsdetails in der Zwei-Faktor-Authentifizierung.