Supabase Google-Login auf Web

Einführung

Diese Anleitung hilft Ihnen dabei, Google Sign-In mit Supabase Authentication 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 Beispiel-App’s supabaseAuthUtils.ts Datei verfügbar. Diese Anleitung erklärt die wichtigsten Konzepte und zeigt Ihnen, wie Sie es verwenden können.

Mit der Authentifizierungs-Hilfsfunktion

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

Wichtig: Umleitungshandling

Wichtig: Umleitungshandling

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 und das Schließen des Popup-Fensters handhaben kann. Sie können entweder isLoggedIn() ODER initialize() - werden beide die Umleitungsverarbeitung auslösen.

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

Implementierungsbeispiel

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

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 zur vollständigen Beispielausführung.

Wie es funktioniert

Für eine detaillierte Erklärung der Funktionsweise der Authentifizierungsfluss, einschließlich der Nonce-Generierung, JWT-Validierung und 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

When Sie Google-Login auf der Web-Seite verwenden, müssen Sie MUSSEN jede Funktion vom Plugin aufrufen, wenn der Umleitungsprozess stattfindet, um das Plugin zu initialisieren, damit es den Umleitungsprozess und das Schließen des Popup-Fensters handhaben kann. Sie können entweder isLoggedIn() ODER initialize() - beide Werte auslösen, um den Umleitungsprozess zu handhaben.

Dies ist für die OAuth-Popup-Fluss 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:

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

Automatische Wiederholung

Die Implementierung enthält eine automatische Wiederholung:

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

Problembehandlung

If die Authentifizierung fehlschlägt:

• Keine Umleitung funktioniert: Stellen Sie sicher, dass Sie isLoggedIn() auf Komponenten-Mount (siehe Beispiel oben) aufrufen
• Ungültige Zielgruppe: Überprüfen Sie, ob Ihre Google-Kunden-IDs in beiden Google-Cloud-Console und Supabase übereinstimmen
• Genehmigte Umleitungs-URLs: Überprüfen Sie, ob genehmigte Umleitungs-URLs in beiden Google-Cloud-Console und Supabase konfiguriert sind
• Nonce-Mismatch: Überprüfen Sie die Konsole-Logs - 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 einen idToken zu erhalten
• Überprüfen Sie das Beispiel-App code zur Referenz

Fortsetzen Sie von Supabase Google Login auf Web

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