Google Login auf Android

GitHub

Eine Einrichtungsvorlage mit den Installationsanweisungen und der vollständigen Markdown-Anleitung für diesen Plugin kopieren.

Einführung

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.

Die Android-SHA1-Zertifikatskonfiguration ist sehr umständlich und ich möchte niemandem diese Aufgabe wünschen. 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, müssen Sie MUSSEN eine zusätzliche Android-Klient-ID hinzufügen, die den SHA1-Wert aus dem Google Play Console für Produktionsversionen enthält. Sie finden den SHA1-Hash, den Google Play für Ihre Release-Paket verwendet, unter Test and release > Setup > App Signing.

Es ist wichtig zu beachten, dass, wenn Sie Fehler machen, der Fehler nicht offensichtlich ist. Es kann sehr schwierig sein, ihn zu debuggen. Wenn Sie Schwierigkeiten bei der Einrichtung haben, schauen Sie bitte in den Github Problemen.

Zusätzlich können Sie sich die Fehlerbehebungsanleitung des Google-Anmeldeseitens für Android für weitere Informationen.

Erstellen Sie eine Android-Kunden-ID.
1. Klicken Sie auf die Suchleiste
2. Suchen Sie nach credentials und klicken Sie auf die APIs and Services eine (Nummer 2 auf dem Screenshot)
3. Klicken Sie auf die create credentials
4. Wählen Sie OAuth client ID
5. Wählen Sie die Android Anwendungstyp
6. Öffnen Sie Android Studio
7. Am unteren Ende des Navigators finden Sie die Gradle Scripts
8. Finden Sie build.gradle zur Modul app
9. Kopieren Sie den android.defaultConfig.applicationIdDies wird Ihre package name im Google-Konsolen
10. Öffnen Sie nun das Terminal. Stellen Sie sicher, dass Sie sich im Verzeichnis Ihres Apps befinden und führen Sie android Terminal, das gradlew signInReport-Befehl zeigt ./gradlew signInReport
1. Terminal-Ausgabe, die die SHA1-Zertifikatsfingerprint zeigt SHA1.
1. als applicationId und Ihre SHA1 in das Zertifikatsfeld ein und klicken Sie Package Name __CAPGO_KEEP_0__ create
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 im Ihren JS/TS code

Passen Sie Ihren MainActivity

Öffnen Sie bitte Ihre App in Android Studio. Sie können es ausführen cap open android
Finden Sie MainActivity.java
1. Öffnen Sie das app Ordner
2. Finden Sie java
3. Finden Sie Ihr MainActivity.java und klicken Sie darauf

Ändern Sie MainActivity.javaBitte 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() {}
}

Datei speichern

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.loginBereich: Appflow-Vergleich / Migration-Werbung. Rolle: Website-Textzeile. Gesehen in: Seite ionic-appflow.astro. Erhalten Sie Google-Login in Ihrer Anwendung. 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))
```
  If Sie Google initialisieren mit mode: 'offline', SocialLogin.login() returns serverAuthCode für Ihren Backend-Austausch-Flow. Rufen Sie in der App in diesem Modus nicht auf. Austauschen Sie SocialLogin.refresh({ provider: 'google' }) auf Ihrem Backend, speichern Sie den Google-Refresh-Token dort und aktualisieren Sie ihn auf dem Backend. serverAuthCode Konfigurieren Sie den Emulator für die Testung
Gehe in
1. und klicke auf die Plus-Taste Device manager Gerätemanager in Android Studio mit Plus-Taste hervorgehoben
2. Schaltfläche Erstellen virtuelles Gerät in der Konfiguration des virtuellen Geräts
3. Select any device with a Play Store icon
  
  As Sie sehen, der pixel 8 unterstützt die Play Store Dienste
4. Klicken Sie next
5. Stellen Sie sicher, dass das Betriebssystem-Image vom Typ Google Play. ES MUSSEN muss vom Typ Google Play
6. Klicken Sie auf Next
7. Bestätigen Sie Ihr Gerät. Sie können Ihrem Emulator einen Namen geben, wie Sie ihn bevorzugen
8. Gehe in Device Manager und starte Ihr Simulator
9. Nachdem der Simulator gestartet ist, gehe in seine Einstellungen
10. Gehe in Google Play
1. Klicken Update und warten Sie etwa 60 Sekunden
Testen Sie Ihre Anwendung

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

Problembehandlung

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-Mismatch verursacht.

Zertifikatsmanager, SHA-1 und Firebase

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	oder
oder	Server / Zielgruppe für ID-Token	`webClientId` in `SocialLogin.initialize()`
für Android, eine pro Signierungskey	Stellt sicher, dass Ihr APK berechtigt ist, Google zu aufrufen	Nur im Google Cloud Console. Geben Sie diesen ID nicht weiter. `webClientId`

Eine häufige Fehlhandlung ist die Verwendung des Android-Client-IDs webClientId. Der Credential Manager erfordert dort den Web-Client-IDs. 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: von dem APK oder AAB, das Sie tatsächlich installieren.
Play App Signing: von der Play Console > App-Integrität > App-Zertifikat für Signierung. Dies ist erforderlich für Play Store Builds, auch wenn Ihr Upload-Zertifikat-SHA-1 bereits registriert ist.

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

Wenn die OAuth-Konsent-Schaltfläche im 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 Berechtigungen. 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

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

Bestätigen webClientId ist die Client-ID der Webanwendung und endet mit .apps.googleusercontent.com.
Lassen Sie das App, reproduzieren Sie die Fehler, und lesen Sie Logcat für GoogleProvider, signingSha1=, und package=.
In Google Cloud Console > Zertifikate, öffnen Sie Ihren Android OAuth-Kunden und überprüfen Sie den genauen Paketnamen und SHA-1.
Wenn Sie ein Release-Build testen, registrieren Sie den SHA-1 aus diesem Build, nicht nur den Debug-Keystore.
Wenn die App über den Play Store verteilt wird, registrieren Sie auch den Play App Signing SHA-1.
Stellen Sie sicher, dass Web- und Android-Kunden in demselben Google Cloud-Projekt leben.
Wenn sich die Einwilligungsschleife in Testing befindet, bestätigen Sie, dass die Google-Konto ein Testkonto ist.
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.

SHA-1 aus dem installierten Build extrahieren

Debug- oder lokale Builds:

cd android && ./gradlew signingReport

Signierter Release-APK:

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

Füge das SHA-1 einem Android OAuth-Kunden mit dem entsprechenden Paketnamen hinzu, installiere das gleiche signierte APK erneut und teste es erneut:

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 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 für die native Fähigkeit in Verwenden Sie @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 Zweifaktor-Authentifizierung für die Implementierungsdetails in Zweifaktor-Authentifizierung.

Google Login auf Android

Einführung