Supabase Google Login auf Web

Einleitung

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

Wichtig: Umleitungshandling

Wichtig: Umleitungshandling

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

Dies ist für den OAuth-Popup-Flow unerlässlich, damit er korrekt funktioniert.

Implementierungsbeispiel

Fügen Sie dies Ihrem Komponenten hinzu, die Google-Sign-In 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 den SupabasePage.tsx für ein vollständiges Beispiel.

Wie es funktioniert

Für eine detaillierte Erklärung der Funktionsweise der Authentifizierungsablauf, 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 für eine Registrierungsseite

Wichtige Hinweise

Redirect-Handling

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

Dies ist für den OAuth-Popup-Flow erforderlich, damit dieser korrekt funktioniert. 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 beinhaltet eine automatische Wiederholungslogik:

• Wenn die JWT-Validierung auf der ersten Anfrage fehlschlägt, 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

Fehlersuche

Wenn die Authentifizierung fehlschlägt:

• Keine Umleitung funktioniert: Stellen Sie sicher, dass Sie isLoggedIn() auf dem Komponenten-Mount aufrufen (siehe Beispiel oben)
• Ungültiger Zuhörer: Überprüfen Sie, ob Ihre Google-Kunden-IDs in beiden Google Cloud Console und Supabase übereinstimmen
• Autorisierte Umleitungs-URLs: Überprüfen Sie, ob autorisierte 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 Initialisierungsruf zum Abrufen eines idToken
• Beispiel-App __CAPGO_KEEP_0__ example app code Bleiben Sie bei Supabase Google Login on Web weiter

Beispiel-App __CAPGO_KEEP_0__

Wenn Sie "Supabase Google Login auf Web" verwenden, um die Authentifizierung und die Kontenflüsse zu planen, verbinden Sie es mit Mit @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login Für die native Fähigkeit in Mit @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-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 @capgo/capacitor-native-biometric Mit @capgo/capacitor-social-login Zweifaktor-Authentifizierung für die Implementierungsdetails in Zweifaktor-Authentifizierung.