Google-Login auf Android
Einen Setup-Vorschlag mit den Installationsanweisungen und der vollständigen Markdown-Guideline für diesen Plugin kopieren.
Einführung
Abschnitt mit dem Titel „Einführung“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.
Mit Google-Login auf Android
Abschnitt mit dem Titel „Mit Google-Login auf Android“In diesem Abschnitt lernen Sie, wie Sie Google-Anmelden in Android einrichten.
-
Erstellen Sie eine Android-Kundenidentität.
-
Klicken Sie auf die Suchleiste
-
Suchen Sie nach
credentialsund klicken Sie auf dieAPIs and Serviceseine (Nummer 2 auf dem Screenshot)
-
Klicken Sie auf die
create credentials
-
Auswählen
OAuth client ID
-
Wählen Sie die
AndroidAnwendungstyp
-
Öffnen Sie Android Studio
-
Am unteren Ende des Navigators finden Sie die
Gradle Scripts
-
Finden Sie
build.gradlefür das Modulapp
-
Kopieren Sie die
android.defaultConfig.applicationId. Dies wird Ihrpackage namein der Google-Konsole
-
Öffnen Sie nun das Terminal. Stellen Sie sicher, dass Sie sich im
androidTerminal-Anzeige mit dem Befehl gradlew signInReport./gradlew signInReport
- Scroll zu der Oberseite dieser Anweisung. Sie sollten folgendes sehen. Kopieren Sie das
SHA1.
- Gehe zurück zur Google-Konsole. Gib deinen
applicationIdals dasPackage Nameund Ihre SHA1 im Zertifikatsfeld eintragen und klickencreate
-
-
Erstellen Sie einen Webclient (dies ist erforderlich für Android)
-
Gehe zur
Create credentialsSeite im Google-Konsolen -
Setze die Anwendungsart auf
Web
-
Click
Create
-
Kopieren Sie die Client-ID, Sie verwenden diese als
webClientIdin Ihrem JS/TS code
-
-
Ändern Sie Ihre
MainActivity-
Öffnen Sie bitte Ihre App in Android Studio. Sie können sie
cap open android -
Finde
MainActivity.java-
Öffne das
appOrdner
-
Finde
java
-
Finde dein
MainActivity.javaund klicke darauf
-
-
Ändere
MainActivity.javaBitte füge folgenden code hinzuimport 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 {@Overridepublic 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@Overridepublic void IHaveModifiedTheMainActivityForTheUseWithSocialLoginPlugin() {}} -
Speichern Sie das Datei
-
-
Verwenden Sie Google Login in Ihrer Anwendung
-
Zuerst importieren Sie
SocialLoginimport { SocialLogin } from '@capgo/capacitor-social-login'; -
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',}})}) -
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 responseconsole.log(JSON.stringify(res))
-
-
Konfigurieren Sie den Emulator für die Testung
-
Gehen Sie in
Device managerund klicken Sie auf die Plus-Taste
-
Erstellen Sie ein virtuelles Gerät
-
Wählen Sie jedes Gerät mit einem
Play StoreSymbol
As Sie sehen, der
pixel 8unterstützt diePlay StoreDienste -
Klicken Sie
next
-
Stellen Sie sicher, dass das Betriebssystem-Image vom Typ
Google Play. IT ES MUSSENGoogle Play
-
Click next
-
Bestätigen Sie Ihr Gerät. Sie können Ihrem Emulator einen Namen geben, wie Sie möchten
-
Gehen Sie in
Device Managerund starten Sie Ihr Simulator
-
Nachdem der Simulator gestartet ist, gehen Sie in seine Einstellungen
-
Gehen Sie in
Google Play
- Klicken Sie
Updateund warten Sie etwa 60 Sekunden
-
-
Ihre Anwendung testen
Wenn Sie alles korrekt gemacht haben, sollten Sie das Google-Login-Flow ordnungsgemäß funktionieren sehen:
Fehlersuche
Abschnitt mit dem Titel „Fehlersuche“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.
Zertifikatsmanager, SHA-1 und Firebase
Abschnitt mit dem Titel „Zertifikatsmanager, SHA-1 und Firebase“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-EinstellungenSie benötigen zwei Arten von OAuth 2.0 Client-IDs in demselben Google Cloud-Projekt:
| Kundenidentitätstyp | Zweck | Wo es hingeht |
|---|---|---|
| Webanwendung | Server / Zielgruppe für ID-Token | webClientId in SocialLogin.initialize() |
| für Android, eine pro Signierungskey | Beweist, dass Ihr APK berechtigt ist, Google zu aufrufen | Nur 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 signingReportfü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:
- Bestätigen
webClientIdist die Client-ID der Webanwendung und endet mit.apps.googleusercontent.com. - Laufen Sie die App, reproduzieren Sie das Problem und lesen Sie Logcat für
GoogleProvider,signingSha1=, undpackage=. - 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 von 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 im gleichen Google Cloud-Projekt leben.
- Wenn sich die Einwilligungsschleife im Testmodus befindet, bestätigen Sie, dass die Google-Konto ein Testkonto ist.
- 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:
cd android && ./gradlew signingReportSignierter Release-APK:
keytool -printcert -jarfile android/app/release/app-release.apkFü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:
adb install android/app/release/app-release.apkLes Ergebnisse der Anmeldung lesen
Sektion mit dem Titel „Les Ergebnisse der Anmeldung lesen“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.
Fortsetzen Sie von Google Login auf Android
Sektion mit dem Titel „Fortsetzen Sie von Google Login auf Android“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.