Google Login unter Android

Kopiere einen Setup-Prompt mit den Installationsschritten und dem vollständigen Markdown-Guide für dieses Plugin.

Einführung

In diesem Guide erfährst du, wie du Google Login mit Capgo Social Login für Android einrichtest. Ich setze voraus, dass du bereits den Allgemeine Setup-Anleitung.

In diesem Teil lernst du, wie du Google Login unter Android einrichtest.

Das Android SHA1-Zertifikat ist extrem mühsam – ich würde niemandem wünschen, sich damit herumschlagen zu müssen. Die folgenden Schritte gehen vom einfachsten Szenario aus: Eine App, die noch nicht im Google Play Store veröffentlicht wurde und nur auf dem lokalen Simulator oder einem Dev-Gerät läuft.

Falls du deine App bereits im Google Play Store veröffentlicht hast, musst du ZUSÄTZLICH eine weitere Android Client ID hinzufügen, die den SHA1-Fingerabdruck aus der Google Play Console für Production-Releases enthält. Den SHA1-Hash, den Google Play zum Signieren deines Release-Bundles verwendet, findest du unter Test and release > Setup > App Signing.

Wichtig zu wissen: Falls hier ein Fehler passiert, ist dieser NICHT offensichtlich. Das Debugging kann sehr schwierig sein. Wenn du Probleme bei der Einrichtung hast, schau dir bitte die Github Probleme an.

Zusätzlich kannst du den Troubleshooting-Bereich der Google Login Einrichtung für Android nutzen für weitere Informationen.

Android Client ID erstellen.
1. Klicke in die Suchleiste
2. Suche nach credentials und klicke auf APIs and Services eins (Nummer 2 im Screenshot)
3. Klicke auf die create credentials
4. Wähle OAuth client ID
5. Wähle die Android Anwendungstyp
6. Android Studio öffnen
7. Ganz unten im Navigator findest du den Gradle Scripts
8. Finde build.gradle für das Modul app
9. Kopiere den android.defaultConfig.applicationId. Das wird deine package name in der Google Console
10. Öffne nun das Terminal. Stelle sicher, dass du dich im android Ordner deiner App und führe aus ./gradlew signInReport
1. Scrolle in der Ausgabe dieses Befehls nach oben. Du solltest Folgendes sehen. Kopiere die SHA1.
1. Gehe nun zurück zur Google Console. Gib deinen applicationId als Package Name und deinen SHA1 in das Zertifikatsfeld ein und klicke auf create
Erstelle einen Web-Client (erforderlich für Android)
1. Besuchen Sie die Create credentials Seite in der Google Console
2. Anwendungstyp setzen auf Web
3. Klicken Create
4. Kopiere die Client ID; du wirst sie als webClientId in deinem JS/TS code verwenden

Ändere dein MainActivity

Bitte öffne deine App in Android Studio. Du kannst cap open android
Finde MainActivity.java
1. Öffne die app Ordner
2. Finde java
3. Suche deinen MainActivity.java und klicke darauf

Ändere MainActivity.java. Bitte füge die folgende 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

Google Login in deiner App nutzen
1. Importiere zuerst SocialLogin
```
import { SocialLogin } from '@capgo/capacitor-social-login';
```
2. Rufe initialize auf. Dies sollte nur einmal geschehen.
```
// 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. Rufe SocialLogin.login. Erstelle einen Button und führe beim Klick folgendes code aus.
```
const res = await SocialLogin.login({
  provider: 'google',
  options: {}
})
// handle the response
console.log(JSON.stringify(res))
```
  If you initialize Google with mode: 'offline', SocialLogin.login() gibt zurück serverAuthCode für deinen Backend-Exchange-Flow. Rufe nicht auf SocialLogin.refresh({ provider: 'google' }) in der App in diesem Modus. Austausch serverAuthCode auf deinem Backend aus, speichere dort den Google Refresh Token und führe das Refresh im Backend aus.
Emulator zum Testen konfigurieren
1. Gehe zu Device manager und klicke auf den Plus-Button
2. Virtuelles Gerät erstellen
3. Wähle ein beliebiges Gerät mit einem Play Store Icon
  
  Wie du siehst, unterstützt pixel 8 unterstützt Play Store Services
4. Klicken next
5. Stelle sicher, dass das OS-Image vom Typ Google Play. ES MUSS vom Typ ist Google Play
6. Weiter klicken
7. Bestätige dein Device. Du kannst den Emulator frei benennen
8. Gehe zu Device Manager und starte deinen Simulator
9. Gehe nach dem Booten des Simulators in seine Einstellungen
10. Gehe zu Google Play
1. Klicken Update und warte etwa 60 Sekunden
Teste deine App

Wenn du alles richtig gemacht hast, solltest du sehen, dass der Google-Login-Flow einwandfrei funktioniert:

Fehlerbehebung

Falls Probleme auftreten, vergleiche zuerst deine App-Konfiguration mit den Werten in der Google Cloud Console. Fehler beim Android Google Sign-In liegen meist an einer Diskrepanz bei Package Name, SHA-1 oder Client ID.

Credential Manager, SHA-1 und Firebase

Unter Android nutzt dieses Plugin den Google Credential Manager (androidx.credentials und Sign in with Google), nicht das veraltete GoogleSignInClient API. Logcat-Fehler wie GetCredentialCustomException: [28444] Developer console is not set up correctly stammen aus diesem Stack.

Logcat filtern mit GoogleProvider oder CapgoSocialLogin nach einem fehlgeschlagenen Login. Das Plugin loggt deinen Package Name, den Signing-SHA-1 und eine maskierte webClientId damit du sie mit der Google Cloud Console vergleichen kannst.

Erforderliches Google Cloud Setup

Du benötigst zwei Arten von OAuth 2.0 Client IDs im selben Google Cloud Projekt:

Client-Typ	Verwendung	Verwendung
Webanwendung	Server / ID Token Audience	`webClientId` in `SocialLogin.initialize()`
Android, jeweils eine pro Signing Key	Bestätigt, dass deine APK Google-Anfragen stellen darf	Nur Google Cloud Console. Gib diese ID niemals an `webClientId`

Ein häufiger Fehler ist die Verwendung der Android-Client-ID als webClientId. Der Credential Manager benötigt dort die Web-Client-ID. Der Android-Client benötigt lediglich den korrekten Package-Namen und die in der Console registrierte SHA-1.

Erstelle für jedes Zertifikat, mit dem du deine Test-Builds signierst, einen Android-OAuth-Client:

Debug: von ./gradlew signingReport für die Debug-Variante.
Release: von der APK oder AAB, die du tatsächlich installierst.
Play App Signing: aus der Play Console > App-Integrität > App-Signaturschlüssel-Zertifikat. Das ist für Play-Store-Builds erforderlich, selbst wenn die SHA-1 deines Upload-Keys bereits registriert ist.

Der applicationId in android/app/build.gradle muss exakt mit dem Package-Namen des Android-OAuth-Clients übereinstimmen, inklusive eventuellem .debug Suffix.

Wenn der OAuth Consent Screen im Testmodus ist, füge jedes Google-Konto, mit dem du testest, unter Audience > Test users hinzu. Die App in Production zu veröffentlichen ist nicht erforderlich für email und profile Scopes. Digital Asset Links (assetlinks.json) sind für Sign in with Google über den Credential Manager nicht erforderlich.

Änderungen in Google Cloud brauchen bis zu ein paar Stunden, bis sie wirksam werden.

Fehler 28444: Developer Console nicht korrekt eingerichtet

Das bedeutet fast immer, dass Google die Kombination aus installiertem APK-Signing-Zertifikat, Paketnamen und webClientId abgelehnt hat. Gehe diese Checkliste durch:

Bestätigen webClientId ist die Web-App-Client-ID und endet mit .apps.googleusercontent.com.
Starte die App, reproduziere den Fehler und sieh im Logcat nach GoogleProvider, signingSha1=, und package=.
Unter Google Cloud Console > Anmeldedaten, öffne deinen Android OAuth-Client und überprüfe den exakten Package-Namen sowie die SHA-1.
Falls du einen Release-Build testest, registriere die SHA-1 dieses Builds und nicht nur den Debug-Keystore.
Wird die App über den Play Store verteilt, registriere zusätzlich die Play App Signing SHA-1.
Stelle sicher, dass Web- und Android-Clients im selben Google Cloud-Projekt liegen.
Wenn der Consent Screen auf „Testing“ steht, stelle sicher, dass das Google-Konto als Testnutzer hinterlegt ist.
Wait and retry after console changes.

USER_CANCELLED nach der Kontenauswahl bei einem falsch konfigurierten Debug-Build kann es immer noch ein SHA-1- oder Client-ID-Mismatch sein. Korrigiere zuerst das Console-Setup oben.

SHA-1 aus dem installierten Build extrahieren

Debug- oder lokale Builds:

cd android && ./gradlew signingReport

Signierte Release-APK:

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

Füge diesen SHA-1 zu einem Android OAuth-Client mit dem passenden Package-Namen hinzu, installiere die signierte APK erneut und teste es noch einmal:

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

Tokens sind verschachtelt unter result:

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

Erstelle für Firebase Auth die Credentials dort idToken und verwende die Web Client ID als webClientId in initialize.

Falls du das Development SHA-1 Zertifikat nicht erhältst, versuche es mit einem Custom Keystore. Dieser Issue-Kommentar erklärt, wie du einen Keystore zu deinem Projekt hinzufügst.

Wenn du es nutzt Google Login unter Android Um Authentifizierungs- und Account-Flows zu planen, verbinde es mit @capgo/capacitor-social-login verwenden für die native Funktion bei der Verwendung von @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 zur Zwei-Faktor-Authentifizierung.

Google Login unter Android

Einführung