Google Login auf Android

GitHub

Ein Setup-Vorschlag mit den Installationsanweisungen und der vollständigen Markdown-Guideline für diesen Plugin kopieren.

Einführung

In dieser Anleitung lernen Sie, wie Sie Google-Anmeldung mit Capgo Social Login für Android einrichten können. Ich nehme an, dass Sie bereits die allgemeine Einrichtungsanleitung gelesen haben. Allgemeine Einrichtungsanleitung.

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

Erstellen Sie eine Android-Kundenidentität.
1. Klicken Sie auf die Suchleiste
2. Suchen Sie nach credentials und klicken Sie auf die APIs and Services eine (Zahl 2 auf dem Screenshot)
3. Klicken Sie auf die create credentials
4. Wählen Sie OAuth client ID
5. Wählen Sie das Android Anwendungs-Typ
6. Öffnen Sie Android Studio
7. Am unteren Ende des Navigators finden Sie die Gradle Scripts
8. Finden Sie build.gradle für das Modul app
9. Kopieren Sie android.defaultConfig.applicationId. Dies wird Ihr package name in der Google-Konsole
10. Öffnen Sie nun die Terminal-Anwendung. Stellen Sie sicher, dass Sie sich im android Ordner Ihrer App befinden und den Befehl ./gradlew signInReport
1. Scrollen Sie nach oben in diesem Befehl. Sie sollten die folgende Anzeige sehen. Kopieren Sie den SHA1.
1. Gehen Sie nun zurück zur Google-Konsole. Geben Sie Ihren applicationId als das Package Name und Ihre SHA1 in das Zertifikatsfeld ein und klicken Sie create
Erstellen Sie einen Webclient (dies ist erforderlich für Android)
1. Gehe zur Create credentials Seite in Google Console
2. Setze die Anwendungstyp auf Web
3. Klicke Create
4. Kopiere die Client ID, du wirst dies als webClientId in deinem JS/TS code

Ändere deine MainActivity

Öffne bitte deine App in Android Studio. Du kannst sie mit cap open android
Finde 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 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() {}
}

Speichern Sie das Datei

Verwenden Sie Google Login in Ihrer Anwendung
1. Zuerst importieren Sie SocialLogin
```
import { SocialLogin } from '@capgo/capacitor-social-login';
```
2. Call 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. Call 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))
```
  Wenn Sie Google mit mode: 'offline', SocialLogin.login() returns serverAuthCode für Ihren Backend-Wechselstromfluss. Rufen Sie nicht an SocialLogin.refresh({ provider: 'google' }) in der App in diesem Modus. Wechseln Sie serverAuthCode speichern Sie den Google-Refresh-Token auf Ihrem Backend und aktualisieren Sie ihn auf dem Backend
Konfigurieren Sie den Emulator für die Testung
1. Gehen Sie in Device manager und klicken Sie auf die Plus-Taste
2. Erstellen Sie ein virtuelles Gerät
3. Wählen Sie jedes Gerät mit einem Play Store Symbol
  
  Wie Sie sehen können, das pixel 8 unterstützt die Play Store Dienste
4. Klicken next
5. Stellen Sie sicher, dass das Betriebssystem-Image vom Typ Google Play. ES MUSSEN von Typ Google Play
6. Klicken Sie auf nächsten
7. Bestätigen Sie Ihr Gerät. Sie können Ihrem Emulator einen Namen geben, wie Sie möchten
8. Gehe in Device Manager und starte dein Simulator
9. Nachdem der Simulator gestartet ist, gehe in seine Einstellungen
10. Gehe in Google Play
1. Klicke Update und warte etwa 60 Sekunden
Teste deine Anwendung

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

Fehlersuche

Wenn Sie Probleme haben, vergleichen Sie zunächst Ihre App-Konfiguration mit den Werten im Google Cloud Console. Android-Fehler bei der Google-Anmeldung werden in der Regel durch einen Paketnamen, eine SHA-1- oder Client-ID-Mismatch verursacht.

Zertifikatsmanager, SHA-1 und Firebase

Bei Android verwendet dieses Plugin den Google-Zertifikatsmanager (androidx.credentials und Anmelden mit Google), nicht den veralteten 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.

Erforderliche Google Cloud-Einrichtung

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

Kundenart	Verwendungszweck	Wo es hingeht
Webanwendung	Server / ID-Token-Zielgruppe	`webClientId` in `SocialLogin.initialize()`
Android, eine pro Signierungskey	Bestätigt, dass Ihr APK berechtigt ist, Google zu rufen	Google Cloud Console nur. Passen Sie diese ID nicht weiter `webClientId`

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

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

Debug: von ./gradlew signingReport zur 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-Key-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 alle Google-Konten hinzu, die Sie mit der Zielgruppe > Testnutzer testen. email Die Veröffentlichung der App in die Produktion ist nicht erforderlich für profile undassetlinks.jsonScopes. 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 dauern, um sich zu verbreiten.

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

überprüfen: webClientId ist die Client-ID der Webanwendung und endet mit .apps.googleusercontent.com.
Führen Sie die App aus, reproduzieren Sie das Problem und lesen Sie Logcat für GoogleProvider, signingSha1=, und package=.
In Google Cloud Console > Credentials, ö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-Clients 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 nachdem Sie auf einem fehlerhaft konfigurierten Debug-Build ein Konto ausgewählt haben, kann es immer noch ein SHA-1- oder Client-ID-Mismatch geben. Beheben Sie die Konsole-Einstellungen oben zuerst.

Aus dem installierten Build den SHA-1-Hash extrahieren

Debug- oder lokale Builds:

cd android && ./gradlew signingReport

Signierter Release-APK:

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

Fügen Sie den SHA-1-Hash zu einem Android OAuth-Klienten mit dem entsprechenden Paketnamen hinzu, installieren Sie denselben signierten APK erneut und testen Sie 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 Web-Kunden-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-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.