Supabase Google Login auf Web

Einführung

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

• den Google Login Web-Einrichtung
• die Supabase Google Login - Allgemeine Einrichtung.

Implementierung

Die vollständige Implementierung ist im Beispiel-Apps supabaseAuthUtils.ts Datei verfügbar. Diese Anleitung erklärt die wichtigsten Konzepte und wie man sie verwendet.

Mit der Authentifizierungshilfe

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

Wichtige: Umleitungsverarbeitung

Wichtige: Umleitungsverarbeitung

Wenn Sie bei der Verwendung von Google-Anmelden im Web vorgehen, müssen Sie __CAPGO_KEEP_0__ aufrufen, um die Funktion aus dem Plugin aufzurufen, wenn die Umleitung erfolgt, um die Plugin-Initialisierung durchzuführen, damit es die Umleitung und das Schließen des Popup-Fensters verarbeiten kann. Sie können entweder isLoggedIn() oder initialize() - beide werden die Umleitungsverarbeitung auslösen.

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

Implementierungsbeispiel

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

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 SupabasePage.tsx Ein vollständiges Beispiel finden Sie unter

Wie es funktioniert

Für eine detaillierte Erklärung der Funktionsweise der Authentifizierungsablauf, einschließlich der Nonce-Generierung, der JWT-Validierung und der Anmeldung bei Supabase, 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 Umleitungsverarbeitung
• SupabaseCreateAccountPage.tsx - Beispiel zur Erstellung einer Benutzerkonto-Seite

Wichtige Hinweise

Umleitungsverarbeitung

Wenn Sie Google-Login auf der Webanwendung verwenden, müssen Sie MUSSEN jede Funktion vom Plugin aufrufen, wenn die Umleitung erfolgt, um das Plugin zu initialisieren, damit es die Umleitung und das Schließen des Popup-Fensters verarbeiten kann. Sie können entweder isLoggedIn() ODER initialize() - beide Funktionen aufrufen, was die Umleitungsverarbeitung auslöst.

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

Nonce-Handling

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

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

__CAPGO_KEEP_0__

Die Implementierung enthält eine automatische Wiederholungslogik:

• Wenn die JWT-Validierung auf der ersten Anfrage fehlschlägt, wird abgemeldet und einmal wiederholt
• Dies handhabt Fälle, in denen die gecachte Tokens möglicherweise falsche Nonces haben
• Wenn auch die Wiederholungsversuch fehlschlägt, wird ein Fehler zurückgegeben

Fehlersuche

Wenn die Authentifizierung fehlschlägt:

• Keine Umleitung funktioniert: Stellen Sie sicher, dass Sie isLoggedIn() auf dem Komponenten-Mount (siehe Beispiel oben) aufrufen
• Ungültiger Zuhörer: Überprüfen Sie, ob Ihre Google-Kunden-IDs in beiden Google Cloud Console und Supabase übereinstimmen
• Genehmigte Umleitungs-URLs: Überprüfen Sie, ob die genehmigten 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' den in der Initialisierung aufgerufenen Aufruf verwenden
• um einen idToken zu erhalten example app code Beispielanwendung __CAPGO_KEEP_0__

zur Referenz nutzen Sie bitte und weitermachen Sie mit Supabase Google Login on Web

Wenn Sie Supabase Google Login auf Web für die Planung der Authentifizierung und der Kontoflows verwenden, verbinden Sie es mit Mit @capgo/capacitor-social-login für 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-biometric für die Implementierungsdetails in @capgo/capacitor-native-biometric und Zwei-Faktor-Authentifizierung für die Implementierungsdetails in Zwei-Faktor-Authentifizierung.