Supabase Google Login - Allgemeine Einstellungen

Einführung

Diese Anleitung führt Sie durch die Integration von Google Sign-In mit Supabase-Authentifizierung mithilfe des Capacitor-Social-Login-Plugins. Diese Konfiguration ermöglicht es Ihnen, native Google Sign-In auf mobilen Plattformen zu verwenden, während Sie Supabase-Auth für die Backend-Authentifizierung nutzen.

Voraussetzungen

Bevor Sie beginnen, stellen Sie sicher, dass Sie Folgendes haben:

1. Ein Supabase-Projekt erstellt haben

2. Die Anleitung zum "Google Login General Setup" gelesen haben Die Anleitung zum "Google Login General Setup" gelesen haben Die Plattform-spezifischen Anleitungen zum Einrichten der Google OAuth-Zertifikate für Ihre Zielplattform befolgt haben:

3. Android-Einrichtung

   • iOS-Einrichtung
   • Android Setup
   • Web-Einrichtung

   Hinweis

   Bevor Sie die Supabase-Anleitung beginnen, müssen Sie die Client-IDs für die Plattformen erstellen, die Sie verwenden möchten. Sie werden sie in Schritt 7 dieser Anleitung verwenden.

Aktivieren von Google OAuth-Anbieter in Supabase

1. Gehe zu deinem Supabase-Dashboard

2. Klicke auf deinen Projekt

   

3. Gehe zum Authentication Menü

   

4. Klicken Sie auf die Providers Registerkarte

   

5. Finden Sie den Google Anbieter

   

6. Aktivieren Sie den Anbieter

   

7. Fügen Sie die Client-IDs für die Plattformen hinzu, die Sie verwenden möchten

   

   Hinweis

   Dies umfasste den Web-Client-Id, den iOS-Client-Id und den Android-Client-Id. Sie können einige davon überspringen, je nachdem, welche Plattformen Sie verwenden möchten.

8. Klicken Sie auf den Save Button

   

Hinweis

Sie SOLLTEN NICHT eine Client Secret (for OAuth) oder Callback URL (for OAuth). Einige Quellen könnten auch vorschlagen, Skip nonce checks für Google auf iOS, aber mit dieser Anleitung ist dies nicht erforderlich.

Voilà, Sie haben nun Google Sign-In mit Supabase-Authentifizierung aktiviert 🎉

Wie Google Sign-In mit Supabase-Authentifizierung-Hilfsprogramm funktioniert

In diesem Abschnitt wird erklärt, wie die Google-Sign-In-Integration mit Supabase unter der Haube funktioniert. Ein Verständnis dieses Flusses hilft Ihnen dabei, die Authentifizierungsprozess zu implementieren und zu überprüfen.

Vollständige Implementierung

Die vollständige Implementierung ist im Beispiel-Apps supabaseAuthUtils.ts Datei

1. Nicht-Nonce-Generation

Die Implementierung generiert ein sicheres Zufallspaar, das den Anforderungen von Supabase entspricht. Supabase-Nonce-Anforderungen:

// Generate URL-safe random nonce
function getUrlSafeNonce(): string {
  const array = new Uint8Array(32);
  crypto.getRandomValues(array);
  return Array.from(array, (byte) => byte.toString(16).padStart(2, '0')).join('');
}

// Hash the nonce with SHA-256
async function sha256Hash(message: string): Promise<string> {
  const encoder = new TextEncoder();
  const data = encoder.encode(message);
  const hashBuffer = await crypto.subtle.digest('SHA-256', data);
  const hashArray = Array.from(new Uint8Array(hashBuffer));
  return hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');
}

// Generate nonce pair
async function getNonce(): Promise<{ rawNonce: string; nonceDigest: string }> {
  const rawNonce = getUrlSafeNonce();
  const nonceDigest = await sha256Hash(rawNonce);
  return { rawNonce, nonceDigest };
}

Fluss:

• rawNonce: URL-sichere zufällige Zeichenkette (64 hex-Ziffern)
• nonceDigest: SHA-256-Hash von rawNonce (hex-kodiert)
• nonceDigest wird an Google Sign-In übergeben → Google enthält den Zufallsdigest im ID-Token
• rawNonce wird an Supabase übergeben → Supabase hashet die Rohzufallszahl und vergleicht sie mit dem Token-Nonce

2. Google Sign-In

Die Funktion initialisiert das Plugin und meldet sich bei Google an:

await SocialLogin.initialize({
  google: {
    webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
    // iOS only:
    iOSClientId: 'YOUR_IOS_CLIENT_ID.apps.googleusercontent.com',
    mode: 'online', // Required to get idToken
  },
});

const response = await SocialLogin.login({
  provider: 'google',
  options: {
    scopes: ['email', 'profile'],
    nonce: nonceDigest, // Pass the SHA-256 hashed nonce
  },
});

3. JWT-Validierung

Bevor der Token an Supabase gesendet wird, validiert die Implementierung den JWT-Token:

function validateJWTToken(idToken: string, expectedNonceDigest: string): { valid: boolean; error?: string } {
  const decodedToken = decodeJWT(idToken);

  // Check audience matches your Google Client IDs
  const audience = decodedToken.aud;
  if (!VALID_GOOGLE_CLIENT_IDS.includes(audience)) {
    return { valid: false, error: 'Invalid audience' };
  }

  // Check nonce matches
  const tokenNonce = decodedToken.nonce;
  if (tokenNonce && tokenNonce !== expectedNonceDigest) {
    return { valid: false, error: 'Nonce mismatch' };
  }

  return { valid: true };
}

Warum vor Supabase validieren?

Die Validierung des JWT-Tokens vor dem Senden des Tokens an Supabase dient mehreren wichtigen Zwecken:

1. Ungültige Anfragen verhindern: Wenn der Token eine falsche Zielgruppe oder ein Nichtübereinstimmung von Nonce hat, wird Supabase den Token ohnehin ablehnen. Die Validierung zuerst vermeidet unnötige API Aufrufe und liefert klare Fehlermeldungen.

2. Token-Caching-Probleme: Auf einigen Plattformen (insbesondere iOS), kann Google Sign-In SDK Tokens für Leistungszwecke im Cache speichern. Wenn ein gecachter Token zurückgegeben wird, kann der gecachte Token möglicherweise mit einer anderen Nonce (oder ohne Nonce) generiert worden sein, was Supabase dazu veranlasst, den Token mit einem „Nichtübereinstimmung von Nonce“-Fehler abzulehnen. Durch die Validierung vor dem Senden an Supabase können wir dieses Problem frühzeitig erkennen und automatisch mit einem frischen Token erneut versuchen.

3. Sicherheit (iOS): Bei iOS wird die Validierung sicherstellen, dass der Token für Ihre spezifischen Google-Kunden-IDs erstellt wurde, um potenzielle Sicherheitsprobleme zu vermeiden, die durch den Einsatz von Tokens entstehen, die für andere Anwendungen bestimmt sind.

4. Bessere FehlerbehandlungDetecting issues before Supabase ermöglicht automatische Wiederholungslogik, die für die transparente Behandlung von iOS-Caching-Problemen unerlässlich ist.

Wenn die Validierung fehlschlägt, führt die Funktion automatisch:

1. Abmelden bei Google (löscht die gecacheten Tokens - kritisch bei iOS)
2. Ermöglicht einmalige Wiederholung der Authentifizierung (zwingt eine frische Token-Generierung mit korrektem Nonce)
3. Wenn auch die Wiederholung fehlschlägt, wird ein Fehler zurückgegeben

4. Supabase-Anmeldung

Schließlich wird der validierte Token an Supabase gesendet:

const { data, error } = await supabase.auth.signInWithIdToken({
  provider: 'google',
  token: googleResponse.idToken,
  nonce: rawNonce, // Pass the raw (unhashed) nonce
});

Vollständige Code-Referenz

Die vollständige Implementierung ist im Beispiel-App-Datei supabaseAuthUtils.ts verfügbar, die Folgendes enthält:

• getUrlSafeNonce() - Erzeugt eine URL-sichere zufällige Nonce
• sha256Hash() - Hashes eine Zeichenkette mit SHA-256
• getNonce() - Erzeugt eine Nonce-Paar
• decodeJWT() - Entschlüsselt JWT-Token
• validateJWTToken() - Überprüft JWT-Zielgruppe und Nonce
• authenticateWithGoogleSupabase() - Hauptauthentifizierungs-Funktion mit automatischer Wiederholung

Zusätzliche Beispiel-Dateien

• SupabasePage.tsx - Beispielkomponente mit Umleitungsverwaltung (Web)
• SupabaseCreateAccountPage.tsx - Beispiel-Anmeldeseite

Weitere Schritte

Bitte gehen Sie zur plattform-spezifischen Einrichtungsanleitung für Ihre Zielplattform:

• Android-Einrichtung
• iOS-Einrichtung
• Web-Einrichtung

Weitergehen von Supabase Google Login - Allgemeine Einrichtung

Wenn Sie Authentifizierung und Kontoflows planen Supabase Google Login - Allgemeine Einstellungen um 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.