Supabase Google Login auf Web

Einführung

Diese Anleitung hilft Ihnen, Google Sign-In mit Supabase-Authentifizierung 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 im Beispiel-App-Datei supabaseAuthUtils.ts verfügbar. Diese Anleitung erklärt die wichtigsten Konzepte und wie man sie verwendet.

Verwendung des Authentifizierungs-Helfers

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

Wichtig: Umleitungsverwaltung

When using Google login on web, you 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 handhaben kann. Sie können entweder isLoggedIn() ODER initialize() - beider werden die Umleitungshandling auslösen.

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

Beispiel für die Implementierung

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 den SupabasePage.tsx zur vollständigen Beispielsammlung.

Wie es funktioniert

Für eine detaillierte Erklärung, wie die Authentifizierungsablauf funktioniert, einschließlich der Nonce-Generierung, JWT-Validierung und Supabase-Anmeldung, siehe Wie es funktioniert Abschnitt im Allgemeinen Setup-Leitfaden.

Für die vollständige code-Dokumentation, siehe die Für die vollständige Code Referenz, siehe den.

Siehe auch:

• Supabase-Seite.tsx - Beispiel-Komponente mit Umleitungs-Handling
• Supabase-Konto-Erstellung-Seite.tsx - Beispiel-Seite für Konto-Erstellung

Wichtige Hinweise

Umleitungs-Handling

Wenn Sie Google-Login auf Web 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 handhaben kann. Sie können entweder isLoggedIn() ODER initialize() - werden beide die Umleitungshandling auslösen.

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

Nonce-Handling

Die Nonce-Implementierung folgt dem Muster aus der Dokumentation für Google-Anmeldung in React Native:

• rawNonce Supabase erstellt einen Hash von signInWithIdToken()
• und vergleicht ihn mit dem rawNonce und vergleicht es mit dem nonceDigest welches im ID-Token von Google Sign-In enthalten ist
• nonceDigest (SHA-256-Hash, hex-kodiert) geht zur nonce React Native Google Sign In Dokumentation

Automatische Wiederholung

Die Implementierung beinhaltet eine automatische Wiederholungslogik:

• Wenn die JWT-Validierung auf der ersten Anfrage fehlschlägt, wird abgemeldet und einmal wiederholt
• Falls in Cache gespeicherte Tokens möglicherweise falsche Nonces enthalten
• If the retry also fails, an error is returned

Problembehandlung

Wenn die Authentifizierung fehlschlägt:

• Richtlinie für die Umleitung nicht funktioniertStellen Sie sicher, dass Sie isLoggedIn() auf dem Komponenten-Mount aufrufen (siehe Beispiel oben)
• 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 fehlt: Stellen Sie sicher, dass Sie mode: 'online' in der Initialisierungsrufe erhalten Sie einen idToken
• Überprüfen Sie Beispiel-App code zur Referenz

Weitermachen mit Supabase Google Login auf Web

Wenn Sie Live Update verwenden Supabase Google Login auf Web zur Planung der Authentifizierung und der Kontoflows verwenden, verbinden Sie es mit Verwenden Sie @capgo/capacitor-social-login für die native Fähigkeit in Verwenden Sie @capgo/capacitor-social-login Verwenden Sie @capgo/capacitor-social-login für die Implementierungsdetails in @capgo/capacitor-social-login Verwenden Sie @capgo/capacitor-passkey für die Implementierungsdetails in @capgo/capacitor-passkey Verwenden Sie @capgo/capacitor-native-biometric für die Implementierungsdetails in @capgo/capacitor-native-biometric und Zweifaktor-Authentifizierung für die Implementierungsdetails in Zweifaktor-Authentifizierung.