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 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 context HTML text fragment from a longer Capgo UI string (parent key `read_the_style_guide`). Page/area: Capgo marketing website. Role: Website copy sentence. Seen in: page contributing.astro. Message key `read_the_style_guide` (Read The Style Guide).

3. Google Login Allgemeine Einstellungen

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

   Hinweis

   Bevor Sie das Supabase-Tutorial 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 benötigen.

Google OAuth-Anbieter in Supabase aktivieren

1. Gehe zu Ihrem Supabase-Dashboard

2. Klicken Sie auf Ihr Projekt

   

3. Gehe zu dem Authentication Menü

   

4. Klicke auf das Providers Menü

   

5. Finde den Google Anbieter

   

6. Aktiviere den Anbieter

   

7. Füge die Client-IDs für die Plattformen ein, die du verwenden möchtest

   

   Hinweis

   Dies umfasst den Webclient-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 Schaltfläche

   

Hinweis

Sie NICHT konfigurieren Client Secret (for OAuth) oder Callback URL (for OAuth)oder einige Quellen empfehlen auch, dies für Google auf iOS zu tun, aber mit dieser Anleitung ist dies nicht erforderlich. Skip nonce checks Voilà, Sie haben nun Google Sign-In mit Supabase-Authentifizierung aktiviert 🎉

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

Abschnitt mit dem Titel 'Wie Google Sign-In mit Supabase-Authentifizierung-Helfer funktioniert'

Vollständige Implementierung

Die vollständige Implementierung ist in dem

Beispiel-Apps- Datei. supabaseAuthUtils.ts Complete Implementation is available in the example app’s file.

1. Zufallszahlenerzeugung

Die Implementierung erzeugt ein sicheres Zufallszahlspaar, das den Anforderungen von Supabase entspricht Supabase-Zufallszahleneinstellungen:

// 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 Zeichenfolge (64 hexadezimale Zeichen)
• nonceDigest: SHA-256-Hash von rawNonce (hexadezimale Kodierung)
• nonceDigest wird an Google Sign-In übergeben → Google enthält den Zufallszahlendigest im ID-Token
• rawNonce wird an Supabase übergeben → Supabase hashet die Rohzufallszahl und vergleicht sie mit dem Token-Zufallszahl

2. Google-Anmeldung

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. Prävention von ungültigen Anfragen: 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-ProblemeOn einigen Plattformen (besonders iOS), kann Google Sign-In SDK Tokens für Leistungszwecke speichern. Wenn ein gecachter Token zurückgegeben wird, kann der gecachte Token möglicherweise mit einem anderen oder keinem Nonce generiert worden sein, wodurch Supabase den Token mit einem 'Nonce-Mismatch'-Fehler ablehnt. Durch die Validierung 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 der 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: Durch die Erkennung von Problemen vor der Übermittlung an Supabase ermöglicht sich eine 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 von Google (Löschen der gecachten Tokens - kritisch auf iOS)
2. Wiederholung der Authentifizierung einmal (Zwingt eine frische Token-Generierung mit korrektem Nonce)
3. Wenn die Wiederholung auch 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
});

Complete 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() - Decodiert ein JWT-Token
• validateJWTToken() - Überprüft das JWT-Ziel und die Nonce
• authenticateWithGoogleSupabase() - Hauptauthentifizierungs-Funktion mit automatischer Wiederholung

Zusätzliche Beispieldateien

• SupabasePage.tsx - Beispielkomponente mit Redirect-Handling (Web)
• SupabaseCreateAccountPage.tsx - Beispiel-Anmelde-Seite

Nächste Schritte

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

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

Fortsetzen von Supabase Google Login - Allgemeine Einstellungen

Wenn Sie Supabase Google Login - Allgemeine Einstellungen zur Planung der Authentifizierung und der Kontoflows verwenden, verbinden Sie es mit Verwenden Sie @capgo/capacitor-social-login für die native Fähigkeit in Verwenden Sie @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-biometrisch und Zweifaktor-Authentifizierung für die Implementierungsdetails in Zweifaktor-Authentifizierung.