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

Verwendung des Authentifizierungshelfers

Der 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 Web verwenden, müssen Sie MUSSEN jede Funktion vom Plugin aufrufen, wenn die Umleitung auftritt, um das Plugin zu initialisieren, damit es die Umleitung handhaben und das Popup-Fenster schließen kann. Sie können entweder isLoggedIn() ODR initialize() - beide lösen das Umleiten der Aktion aus.

Dies ist für den korrekten Betrieb der OAuth-Popup-Fluss erforderlich.

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

Wenn Sie Google-Login auf der Webseite 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() - beide werden die Umleitungshandhabung auslösen.

Dies ist für die korrekte Funktion des OAuth-Popup-Flusses unerlässlich. Ohne dies schließt sich das Popup-Fenster nicht nach der Authentifizierung.

Umwleitungshandling

Die Umleitung von Nichtwiederholbarkeit (Nonce) 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 ihn mit dem nonceDigest der im Google Sign-In-Token enthalten ist
• nonceDigest (SHA-256-Hash, hex-kodiert) wird an den nonce Parameter in den Google Sign-In-APIs übergeben

Automatische Wiederholung

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 cached Tokens möglicherweise falsche Nonces enthalten
• Wenn auch die Wiederholung fehlschlägt, wird ein Fehler zurückgegeben

Problembehandlung

Wenn die Authentifizierung fehlschlägt:

• Umleitung funktioniert nichtStellen Sie sicher, dass Sie isLoggedIn() auf dem 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
• 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-Protokolle - die Funktion wird automatisch wiederholt, aber Sie können sich manuell abmelden, wenn erforderlich
• Token-Validierung fehlschlägt: Stellen Sie sicher, dass Sie __CAPGO_KEEP_0__ verwenden mode: 'online' in der Initialisierungsrufe, um ein idToken zu erhalten
• Überprüfen Sie das Beispiel-App code zur Referenz

Fortsetzen Sie von Supabase Google Login on Web

Wenn Sie Supabase Google Login on Web zur Planung der Authentifizierung und der Kontenflüsse verwenden Verbinden Sie es mit Mit @capgo/capacitor-social-login zur nativen 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.