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:

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

Implementierung

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

Mit dem Authentifizierungs-Helfer

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: Redirect-Handling

Wichtig: Umleitungsverarbeitung

Wenn Sie Google-Anmeldung auf der Webanwendung 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 verarbeiten kann. Sie können entweder isLoggedIn() ODER initialize() - beide werden die Umleitungsverarbeitung 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-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 die 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, 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 für eine Anmeldeseite

Wichtige Hinweise

Umweltverhalten

Wenn Sie Google-Login auf der Webanwendung verwenden, müssen Sie __CAPGO_KEEP_0__ wirken, wenn der Umleitungsprozess stattfindet, um die Umwelt zu initialisieren und das Umweltverhalten zu handhaben. Sie können entweder isLoggedIn() __CAPGO_KEEP_1__ initialize() oder

- beide auslösen, um das Umweltverhalten auszulösen.

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

Die Implementierung von Nonce 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-gekodiert) geht zum nonce Parameter in den Google Sign-In-APIs

Automatische Wiederholung

Die Implementierung enthält eine automatische Wiederholungslogik:

• Wenn die JWT-Validierung auf der ersten Anfrage fehlschlägt, loggt es sich aus und versucht es einmal erneut
• Dies handhabt Fälle, in denen sich die in der Zwischenspeicherung befindlichen Tokens möglicherweise mit falschen Nonzen befinden
• Wenn auch der Wiederholungsversuch fehlschlägt, wird ein Fehler zurückgegeben

Fehlersuche

Wenn die Authentifizierung fehlschlägt:

• Umwleitung funktioniert nichtStellen Sie sicher, dass Sie isLoggedIn() auf dem Komponenten-Mount (siehe Beispiel oben) aufrufen
• Falsche ZielgruppeÜberprüfen Sie, ob Ihre Google-Kunden-IDs in beiden Google-Cloud-Console und Supabase übereinstimmen
• Autorisierte Umwleitung-URLs: Überprüfen Sie, ob autorisierte Redirect-URLs in beiden Google Cloud Console und Supabase konfiguriert sind
• Nonce-Mismatch: Überprüfen Sie die Konsole-Anmeldungen - die Funktion wird automatisch wiederholt, aber Sie können sich manuell abmelden, wenn erforderlich
• Token-Validierung fehlgeschlagen: Stellen Sie sicher, dass Sie mode: 'online' in der Initialisierungsruf einen idToken verwenden
• Review das Beispiel-App code zur Referenz