Supabase Google-Anmeldung - 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 Einstellungen Anleitung zur Einrichtung von Google OAuth-Zugriffsberechtigungen

3. Folgen Sie den jeweils plattform-spezifischen Anleitungen, um die Google OAuth-Zugriffsberechtigungen für Ihre Zielplattform einzurichten:

   • Android-Einstellungen
   • iOS-Einstellungen
   • Web-Einstellungen

   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.

Aktivieren von Google OAuth-Anbieter in Supabase

1. Gehe zu Ihrem Supabase Dashboard

2. Klicken Sie auf Ihr Projekt

   

3. Geht es nicht 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 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

Sie SOLLTEN NICHT einrichten Client Secret (for OAuth) oder Callback URL (for OAuth) Einige Quellen empfehlen auch, Skip nonce checks für Google auf iOS einzurichten, 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-Helfer 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-App’s supabaseAuthUtils.ts Datei verfügbar.

1. Nonzengenerierung

Die Implementierung generiert ein sicheres Nonce-Paar, das den Supabase-Nonce-Anforderungen entspricht:

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

• rawNonceURL-sichere zufällige Zeichenfolge (64 hexadezimale Zeichen)
• nonceDigestSHA-256-Hash von rawNonce (hexadezimale Kodierung)
• nonceDigest wird an Google Sign-In weitergeleitet → Google enthält den Digest des Nonces im ID-Token
• rawNonce wird an Supabase weitergeleitet → Supabase hashet den Roh-Nonce und vergleicht ihn mit dem Nonce des Tokens

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. Verhindere ungültige Anfragen: Wenn der Token eine falsche Zielgruppe oder ein Nichtübereinstimmung von Nichtzahlen hat, wird Supabase den Token ohnehin ablehnen. Die Überprüfung zuerst vermeidet unnötige API Aufrufe und liefert klare Fehlermeldungen.

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

3. Sicherheit (iOS): Die Überprüfung stellt sicher, dass der Token für Ihre spezifischen Google Client IDs ausgestellt wurde, was potenzielle Sicherheitsprobleme von der Verwendung von Tokens für andere Anwendungen verhindert.

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 Überprüfung fehlschlägt, führt die Funktion automatisch:

1. Abmeldung von Google (Löschen der gecachten Tokens - kritisch auf iOS)
2. Wiederholte Authentifizierung einmal (Zwingt eine frische Token-Generierung mit korrekter Nichtzahl)
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 folgende Funktionen enthält:

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

Zusätzliche Beispieldateien

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

Weitere Schritte

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

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