Supabase Google Login - Allgemeine Einstellungen

Einführung

Diese Anleitung führt Sie durch die Integration von Google Sign-In mit Supabase Authentication 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-Textfragment aus einer längeren Capgo-UI-Zeichenfolge (Elternschlüssel `read_the_style_guide`). Seite/Bereich: Capgo-Marketingwebsite. Rolle: Website-Textzeile. Gesehen in: Seite contributing.astro. Nachrichtenschlüssel `read_the_style_guide` (Lesen Sie die Style Guide).

3. Google-Login-Allgemeine-Einstellungen

   • 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 verwenden sie in Schritt 7 dieser Anleitung.

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üsymbol

   

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 context HTML text fragment from a longer Capgo UI string (parent key `you_definition`). Page/area: Capgo marketing website. Role: Long marketing or legal paragraph. Seen in: page disclaimer.astro, page return.astro. Message key `you_definition` (You Definition). 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 im

Beispiel-App- Datei verfügbar. supabaseAuthUtils.ts Abschnitt mit dem Titel 'Vollständige Implementierung'

1. Zufällige Zahlenerzeugung

Die Implementierung generiert ein sicheres Zufallszahlspaarmit entsprechender Einhaltung der Supabase-Zufallszahlanforderungen:

// 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 };
}

Ablauf:

• rawNonce: URL-sichere zufällige Zeichenfolge (64 hexadezimale Zeichen)
• nonceDigest: SHA-256-Hash von rawNonce (hexadezimale Kodierung)
• nonceDigest wird an Google Sign-In weitergeleitet → Google enthält den Zufallszahlendigest im ID-Token
• rawNonce wird an Supabase weitergeleitet → Supabase hashet die Rohzufallszahl und vergleicht sie mit dem Token’s 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 };
}

Wozu die Validierung vor Supabase?

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, lehnt Supabase den Token ohnehin ab. Die Validierung zuerst vermeidet unnötige API-Aufrufe und liefert klare Fehlermeldungen.

2. Token-Caching-ProblemeOn einigen Plattformen (insbesondere iOS), Google Sign-In SDK kann Tokens für Leistung zwischenspeichern. 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 dem Senden 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, was potenzielle Sicherheitsprobleme von der Verwendung von Tokens für andere Anwendungen verhindert.

4. Bessere Fehlerbehandlung: Durch die Erkennung von Problemen vor Supabase ist eine automatische Wiederholungslogik erforderlich, 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. Wiederholte Authentifizierung einmal (Zwingt eine frische Token-Generierung mit korrektem Nonce)
3. Wenn auch der Wiederholungsversuch fehlschlägt, wird ein Fehler zurückgegeben

4. Supabase-Anmeldung

Zum Schluss 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’s supabaseAuthUtils.ts Datei, 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-Zielgruppe und Nonce
• authenticateWithGoogleSupabase() - Hauptauthentifizierungs-Funktion mit automatischer Wiederholung

Zusätzliche Beispieldateien

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

Zukünftige Schritte

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

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

Fortfahren von Supabase Google Login - Allgemeine Einstellungen

Wenn Sie Supabase Google Login - Allgemeine Einstellungen 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.