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 in der Beispielanwendung supabaseAuthUtils.ts Datei. Diese Anleitung erklärt die wichtigsten Konzepte und wie man sie verwendet.

Verwendung des Authentifizierungs-Helfers

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

Kritisch: Umleitungshandhabung

Kritisch: Umleitungshandhabung

Wenn Sie Google-Login auf Web verwenden, müssen Sie MUSSEN jede Funktion vom Plugin aufrufen, wenn die Umleitung erfolgt, um das Plugin zu initialisieren, damit es die Umleitung handhaben und das Popup-Fenster schließen kann. Sie können entweder isLoggedIn() ODER initialize() - beide lösen die Umleitungshandhabung aus.

Dies ist für die korrekte Funktion des OAuth-Popup-Flusses unerlässlich.

Implementierungsbeispiel

Fügen Sie dies Ihrem Komponenten hinzu, die Google-Anmeldung handhabt:

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 Anmeldung bei Supabase, siehe den Abschnitt "Wie es funktioniert" im General Setup-Leitfaden.

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

Siehe auch:

• SupabasePage.tsx - Beispielkomponente mit Redirect-Handling
• - Beispiel-Anmeldeseite Wichtige Hinweise

Abschnitt mit dem Titel "Wichtige Hinweise"

Also see:

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 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 Supabase’s 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 Fehlschlag der JWT-Validierung bei der ersten Anfrage wird abgemeldet und einmal wiederholt
• Dies handhabt Fälle, bei denen in der Zwischenspeicherung Tokens möglicherweise falsche Nonces haben
• Bei Fehlschlag der Wiederholung wird ein Fehler zurückgegeben

Hilfe bei Problemen

Wenn die Authentifizierung fehlschlägt:

• Richtlinie funktioniert nichtStellen Sie sicher, dass Sie isLoggedIn() auf dem Komponenten-Mount aufrufen (siehe Beispiel oben)
• Ungültige Zielgruppe: Ü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, um ein idToken zu erhalten
• Überprüfen Sie die Beispielanwendung code als Referenz

Fortsetzen Sie von Supabase Google Login on Web

Wenn Sie Supabase Google Login on Web zum Planen der Authentifizierung und der Kontenflüsse verwenden Using @capgo/capacitor-social-login 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.