Supabase Google-Login - Allgemeine Einstellungen

GitHub

Einen Setup-Vorschlag mit den Installationsanweisungen und der vollständigen Markdown-Anleitung für diesen Plugin kopieren.

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

Stellen Sie sicher, dass Sie folgende haben:

Einen Supabase-Projekt erstellt haben
Lesen Sie die Google-Login-Allgemeine-Einstellungen guide to setup Google OAuth credentials
Die jeweils plattform-spezifischen Anleitungen zum Einrichten von Google OAuth-Zugriffsberechtigungen für Ihre Zielplattform befolgt haben:
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 benötigen.

Google OAuth-Anbieter in Supabase aktivieren

Gehe zu Ihrem Supabase-Dashboard
Klicken Sie auf Ihr Projekt
Gehe zu dem Authentication Menü
Klicken Sie auf die Providers tab
Finden Sie das Google Anbieter
Anbieter aktivieren
Fügen Sie die Client-IDs für die Plattformen hinzu, die Sie verwenden möchten

Dies umfasst den Web-Client-IDs, die iOS-Client-IDs und die Android-Client-IDs. Sie können einige davon überspringen, je nach den von Ihnen verwendeten Plattformen.
Klicken Sie auf Save Knopf

Hier haben Sie nun Google Sign-In mit Supabase-Auth aktiviert 🎉

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

Abschnitt mit dem Titel „1. Nonce-Generation“

Die Implementierung generiert ein sicheres Zufallspaar, das den Anforderungen folgt Supabase Nichtzufallszahlanforderungen:

// 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 Digest in der Token-ID
rawNonce wird an Supabase übergeben → Supabase hashet die Rohnonce und vergleicht sie mit der Token-Nonce

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, überprüft 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 };
}

Weshalb überprüfen Sie vor Supabase?

Die Überprüfung des JWT-Tokens vor dem Senden an Supabase dient mehreren wichtigen Zwecken:

Prävention von ungültigen Anfragen: Wenn der Token eine falsche Zielgruppe oder ein falsches Nonce hat, wird Supabase den Token ohnehin ablehnen. Durch die Überprüfung zuerst werden unnötige API-Aufrufe vermieden und klare Fehlermeldungen bereitgestellt.
Token-Caching-Probleme: Auf einigen Plattformen (insbesondere iOS) kann Google Sign-In SDK Tokens für Leistungszwecke im Cache speichern. Wenn ein gecachter Token zurückgegeben wird, kann der gecachte Token möglicherweise mit einem anderen Nonce (oder ohne Nonce) generiert worden sein, wodurch Supabase den Token mit einem „Nonce-Mismatch“-Fehler ablehnt. 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.
Sicherheit Kontext: Seite/Bereich: Enterprise-Produkt/Preisliste-Seite. Rolle: UI-Label. Gesehen in: Seite enterprise.astro. Nachrichtenschlüssel `enterprise_hero_security_label` (Enterprise-Hero-Sicherheitsbezeichnung).
Bessere FehlerbehandlungBevor Supabase Probleme erkennt, ermöglicht dies eine automatische Wiederholung, die für die transparente Behandlung von iOS-Caching-Problemen unerlässlich ist.

Wenn die Validierung fehlschlägt, führt die Funktion automatisch:

Abmelden von Google (Löscht die gespeicherten Tokens - kritisch auf iOS)
Authentifizierung einmal erneut (Zwingt eine frische Token-Generierung mit korrektem Nonce)
If retry also fails, returns an error

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-Code supabaseAuthUtils.ts Datei, die Folgendes enthält:

getUrlSafeNonce() - Generiert eine URL-sichere zufällige Nonziffer
sha256Hash() - Hashes eine Zeichenkette mit SHA-256
getNonce() - Generiert eine Nonziffer-Paar
decodeJWT() - Decodiert ein JWT-Token
validateJWTToken() - Validiert das JWT-Zielgruppe und Nonziffer
authenticateWithGoogleSupabase() - Hauptauthentifizierungs-Funktion mit automatischer Wiederholung

Zusätzliche Beispiel-Dateien

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

Nächste Schritte

Bitte gehen Sie zur Produktübersicht für Ihr Zielgerät:

Wenn Sie Live Update verwenden Supabase Google Login - Allgemeine Einrichtung um die Authentifizierung und die Kontenflüsse zu planen, verbinden Sie es mit Mit @capgo/capacitor-Social-Login für die native Fähigkeit in Mit @capgo/capacitor-Social-Login Mit @capgo/capacitor-Social-Login für die Implementierungsdetail in @capgo/capacitor-Social-Login Mit @capgo/capacitor-Passkey für die Implementierungsdetail in @capgo/capacitor-Passkey Mit @capgo/capacitor-Native-Biometrik für die Implementierungsdetail in @capgo/capacitor-Native-Biometrik, und Zwei-Faktor-Authentifizierung für die Implementierungsdetail in Zwei-Faktor-Authentifizierung.