Supabase Google Login auf Web

Einführung

Diese Anleitung hilft Ihnen, Google Sign-In mit Supabase-Authentifizierung auf Web zu integrieren. Es wird davon ausgegangen, dass Sie bereits folgende Schritte abgeschlossen haben:

• der Google Login Web-Einrichtung
• der Supabase Google Login - Allgemeine Einrichtung.

Implementierung

Die vollständige Implementierung ist im Beispiel-App- supabaseAuthUtils.ts Datei. Diese Anleitung erklärt die Schlüsselkonzepte und wie Sie sie verwenden können.

Verwendung des Authentifizierungshelfers

Der authenticateWithGoogleSupabase Funktion handhabt den gesamten Authentifizierungsfluss:

import { authenticateWithGoogleSupabase } from './supabaseAuthUtils';

const result = await authenticateWithGoogleSupabase();
if (result.success) {
  console.log('Signed in:', result.user);
  // Navigate to your authenticated area
} else {
  console.error('Error:', result.error);
}

Wichtig: Umleitungshandling

Wichtig: Umleitungshandling

Wenn Sie Google-Login auf Web verwenden, müssen Sie MUSSEN jede Funktion aus dem Plugin aufrufen, wenn die Umleitung erfolgt, um das Plugin zu initialisieren, damit es die Umleitung und das Schließen des Popup-Fensters handhaben kann. Sie können entweder isLoggedIn() ODER initialize() - beide werden die Umleitungshandling auslösen.

Dies ist für den korrekten Betrieb der OAuth-Popup-Fluss unerlässlich.

Beispiel für die Implementierung

Fügen Sie dies Ihrem Komponenten hinzu, die Google-Sign-In-Handling übernimmt:

import { useEffect } from 'react';
import { SocialLogin } from '@capgo/capacitor-social-login';

function SupabasePage() {
  // Check Google login status on mount to invoke redirect handling
  // This doesn't serve any functional purpose in the UI but ensures
  // that any pending OAuth redirects are properly processed
  useEffect(() => {
    const checkGoogleLoginStatus = async () => {
      try {
        await SocialLogin.isLoggedIn({ provider: 'google' });
        // We don't use the result, this is just to trigger redirect handling
      } catch (error) {
        // Ignore errors - this is just for redirect handling
        console.log('Google login status check completed (redirect handling)');
      }
    };

    checkGoogleLoginStatus();
  }, []);

  // ... rest of your component
}

Siehe das SupabasePage.tsx für ein vollständiges Beispiel.

Wie es funktioniert

Für eine detaillierte Erklärung, wie die Authentifizierungsablauf funktioniert, einschließlich der Nonce-Generierung, der JWT-Validierung und der Supabase-Anmeldung, siehe den Wie es funktioniert Abschnitt im General Setup-Leitfaden.

Für die vollständige code-Referenz, siehe den Vollständige Code-Referenz Abschnitt im General Setup-Leitfaden.

Siehe auch:

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

Wichtige Hinweise

Redirect-Handling

Wenn Sie Google-Login auf Web verwenden, müssen Sie MUSS Jede Funktion aus dem Plugin aufrufen, wenn die Umleitung erfolgt, um das Plugin zu initialisieren, damit es die Umleitung und das Schließen des Popup-Fensters handhaben kann. Sie können entweder isLoggedIn() ODER initialize() - beide Funktionen aufrufen, was die Umleitungshandhabung auslöst.

Dies ist für den OAuth-Popup-Flow unerlässlich. Ohne dies schließt sich das Popup-Fenster nicht nach der Authentifizierung.

Nonce-Handhabung

Die Nonce-Implementierung folgt dem Muster aus der React Native Google Sign In-Dokumentation:

• rawNonce geht zu Supabases signInWithIdToken()
• Supabase erstellt einen Hash von rawNonce und vergleicht ihn mit dem nonceDigest der im ID-Token von Google Sign-In enthalten ist
• nonceDigest (SHA-256-Hash, hex-kodiert) geht in das nonce Parameter in den Google Sign-In-APIs

Automatische Wiederholung

Die Implementierung enthält eine automatische Wiederholungslogik:

• Bei einem ersten Fehlschlag bei der JWT-Validierung wird abgemeldet und einmal wiederholt
• Dies handhabt Fälle, in denen cached Tokens möglicherweise falsche Nonces haben
• Wenn auch die Wiederholung fehlschlägt, wird ein Fehler zurückgegeben

Hilfe bei der Fehlerbehebung

Wenn die Authentifizierung fehlschlägt:

• Richtlinie funktioniert nichtStellen Sie sicher, dass Sie isLoggedIn() auf dem Komponenten-Mount aufrufen (siehe Beispiel oben)
• Ungültiger Empfänger: Überprüfen Sie, ob Ihre Google-Kunden-IDs in beiden Google Cloud Console und Supabase übereinstimmen
• Autorisierte Richtlinien-URLs: Überprüfen Sie, ob autorisierte Richtlinien-URLs in beiden Google Cloud Console und Supabase konfiguriert sind
• Nonce-Mismatch: Überprüfen Sie die Konsole-Protokolle - die Funktion wird automatisch wiederholt, aber Sie können sich manuell abmelden, wenn erforderlich
• Token-Validierung fehlschlägt: Stellen Sie sicher, dass Sie mode: 'online' in der Initialisierungsrufe erhalten Sie einen idToken
• Überprüfen Sie die Beispielanwendung code zur Referenz

Fortsetzen Sie von Supabase Google Login on Web

Wenn Sie Supabase Google Login on Web zum Planen der Authentifizierung und der Kontoflows verwenden Using @capgo/capacitor-social-login Mit @capgo/capacitor-social-login verwenden Sie die native Fähigkeit in Mit @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-Biometrie Für die Implementierungsdetails in @capgo/capacitor-Native-Biometrie und Zwei-Faktor-Authentifizierung Für die Implementierungsdetails in Zwei-Faktor-Authentifizierung.