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

Verwendung des Authentifizierungs-Helfers

Der authenticateWithGoogleSupabase Funktion handelt der gesamte 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: Umleitungshandling

Kritisch: 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 lösen die Umleitungshandling aus.

Dies ist für den korrekten Betrieb des OAuth-Popup-Flusses unerlässlich.

Implementierungsbeispiel

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 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"

Redirect-Handling

Wenn Sie Google-Login auf Web verwenden, müssen Sie ESSENZIELL 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:

• Wenn die JWT-Validierung auf der ersten Versuch fehlschlägt, wird abgemeldet und einmal wiederholt
• Dies handhabt Fälle, in denen gespeicherte 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:

• Keine Umleitung funktioniertStellen 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
• Gerechte Umleitungs-URLsÜberprüfen Sie, ob die autorisierten Umleitungs-URLs in beiden Google Cloud Console und Supabase konfiguriert sind
• Nonce-MismatchÜberprüfen Sie die Konsole-Anzeigen - 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 ein 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, verbinden Sie es mit Mit @capgo/capacitor-social-login zur nativen Fähigkeit in Mit @capgo/capacitor-social-login, @capgo/capacitor-social-login for the implementation detail in @capgo/capacitor-social-login, @capgo/capacitor-passkey for the implementation detail in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric for the implementation detail in @capgo/capacitor-native-biometric, and Zwei-Faktor-Authentifizierung für die Implementierungsdetails in Zwei-Faktor-Authentifizierung.