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 der 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 Anleitung Google Login General Setup gelesen haben, um Google OAuth-Zertifikate einzurichten

3. Die jeweiligen Plattform-spezifischen Anleitungen zur Einrichtung von Google OAuth-Zertifikaten für Ihre Zielplattform gelesen haben:

   • Android-Einrichtung
   • iOS-Einrichtung
   • Web Setup

   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. Gehen Sie zu Ihrem Supabase-Dashboard

2. Klicken Sie auf Ihr Projekt

   

3. Gehen Sie zum Authentication Menü

   

4. Klicken Sie auf den 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-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 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-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-Apps- supabaseAuthUtils.ts Datei.

1. Nonce-Generation

Die Implementierung generiert ein sicheres Zufallspaar nach den Anforderungen von Supabase 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 Noncedigest im ID-Token
• rawNonce wird an Supabase übergeben → Supabase hashet die Rohnonce 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. Fehlerhafte 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 Token für Leistungszwecke cachen. 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 Fehlerbehandlung: Die Erkennung von Problemen vor der Bereitstellung durch 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. Abmeldung bei Google (Löscht die gespeicherten Tokens - kritisch bei iOS)
2. Einesmalige 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 in dem Beispiel-Apps supabaseAuthUtils.ts Datei 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 ein JWT-Token
• validateJWTToken() - Überprüft die Zielgruppe und Nonce eines JWT-Tokens
• authenticateWithGoogleSupabase() - Haupt-Authentifizierungs-Funktion mit automatischer Wiederholung

Zusätzliche Beispiel-Dateien

• SupabasePage.tsx - Beispielkomponente mit Umleitungsverarbeitung (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, verbinden Sie es mit Supabase Google Login - Allgemeine Einstellungen Using @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login Verwenden Sie @capgo/capacitor-social-login für die native Fähigkeit in Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login Verwenden Sie @capgo/capacitor-social-login für die Implementierungsdetails in @capgo/capacitor-social-login Using @capgo/capacitor-passkey Verwenden Sie @capgo/capacitor-passkey für die Implementierungsdetails in @capgo/capacitor-passkey Using @capgo/capacitor-native-biometric Verwenden Sie @capgo/capacitor-native-biometric für die Implementierungsdetails in @capgo/capacitor-native-biometric und for the implementation detail in @capgo/capacitor-native-biometric, and Zwei-Faktor-Authentifizierung für die Implementierungsdetails in der Zwei-Faktor-Authentifizierung.