Supabase Google Login - Allgemeine Einrichtung

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 die Verwendung von native Google Sign-In auf mobilen Plattformen, während Supabase Auth für die Backend-Authentifizierung genutzt wird.

Voraussetzungen

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

1. Ein Supabase-Projekt erstellt haben

2. Die Google Login Allgemeine Einrichtung Anleitung zur Einrichtung von Google OAuth-Zugriffsberechtigungen gelesen haben

3. Die jeweiligen plattform-spezifischen Anleitungen zur Einrichtung von Google OAuth-Zugriffsberechtigungen für Ihre Zielplattform befolgt haben:

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

   Hinweis

   Bevor Sie mit der 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.

Google OAuth-Anbieter in Supabase aktivieren

1. Gehe zu deinem Supabase-Dashboard

2. Klicke auf deinen Projekt

   

3. Gehe zum Authentication Menü

   

4. Klicke auf die Providers Registerkarte

   

5. Find the Google Anbieter

   

6. Der Anbieter aktivieren

   

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

   

   Hinweis

   Dies umfasst den Web-Client-IDs, den iOS-Client-IDs und den Android-Client-IDs. Sie können einige davon überspringen, je nach den Plattformen, die Sie verwenden möchten.

8. Klicken Sie auf den Save Schaltfläche

   

Hinweis

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

Voilà, du hast nun Google-Anmelden mit Supabase-Authentifizierung aktiviert 🎉

Wie Google-Anmelden mit Supabase-Authentifizierung-Helfer funktioniert

Diese Abschnitt erklärt, wie die Google-Anmeldung mit Supabase unter der Haube funktioniert. Durch das Verständnis dieses Flusses können Sie die Authentifizierungsprozess implementieren und Fehler beheben.

Vollständige Implementierung

Die vollständige Implementierung ist im Beispiel-App’s supabaseAuthUtils.ts Datei

1. Nonce-Generation

Die Implementierung generiert ein sicheres Nonce-Paar, das den Anforderungen von Supabase entspricht Zu Clipboard kopieren:

// 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: __CAPGO_KEEP_0__

• rawNonce: URL-sichere zufällige Zeichenkette (64 hex Zeichen)
• nonceDigest: SHA-256-Hash von __CAPGO_KEEP_0__ rawNonce (hex-kodiert)
• nonceDigest wird an Google Sign-In übergeben → Google enthält den Digest des Nonces im ID-Token
• rawNonce wird an Supabase übergeben → Supabase hashet die Roh-Nonce 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?

Das Validieren des JWT-Tokens vor der Übermittlung des Tokens an Supabase dient mehreren wichtigen Zwecken:

1. Verhindern Sie ungültige Anforderungen: Wenn das Token eine falsche Zielgruppe oder eine Nichtübereinstimmung der Nonce hat, wird Supabase das Token ohnehin ablehnen. Das Validieren vorher vermeidet unnötige API-Aufrufe und liefert klare Fehlermeldungen.

2. Token-Caching-Probleme: Auf einigen Plattformen (insbesondere iOS) kann Google Sign-In SDK Tokens zum Zweck der Leistungsoptimierung im Cache speichern. Wenn ein im Cache gespeichertes Token zurückgegeben wird, kann das im Cache gespeicherte Token möglicherweise mit einer anderen Nonce (oder ohne Nonce) generiert worden sein, wodurch Supabase das Token mit einem "Nichtübereinstimmung der Nonce"-Fehler ablehnt. Durch das Validieren vor der Übermittlung an Supabase können wir dieses Problem frühzeitig erkennen und automatisch mit einem frischen Token erneut versuchen.

3. Sicherheit (iOS): Auf iOS stellt die Validierung sicher, dass das Token für Ihre spezifischen Google-Kunden-IDs ausgestellt wurde, wodurch potenzielle Sicherheitsprobleme von der Verwendung von Tokens für andere Anwendungen verhindert werden.

4. Bessere Fehlerbehandlung: Die Erkennung von Problemen vor 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. Ausloggen von Google (löscht gespeicherte Tokens - kritisch auf iOS)
2. Authentifizierung einmal wiederholt (zwangsvolliger Token-Neuerzeugung mit korrektem Nonce)
3. Wenn auch der Wiederholungsversuch 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
});

Komplette Code-Referenz

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

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

Zusätzliche Beispieldateien

• SupabasePage.tsx - Beispielkomponente mit Redirect-Handling (Web)
• SupabaseCreateAccountPage.tsx - Beispiel-Anmeldeseite für Erstellung eines Kontos

Weiterführende Schritte

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

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

Weitermachen von Supabase Google Login - Allgemeine Einrichtung

Wenn Sie " Supabase Google Login - Allgemeine Einrichtung " verwenden, um die Authentifizierung und die Kontoflows zu planen, verbinden Sie es mit Mit @capgo/capacitor-social-login für die native Fähigkeit in @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.