Login con Supabase Google su Web

Introduzione

Questa guida ti aiuterà a integrare l'accesso con Google con l'autenticazione di Supabase sul Web. Si presume che tu abbia già completato:

• il setup di accesso Google Web
• il setup generale di accesso Google di Supabase.

Esecuzione

La completa esecuzione è disponibile nel file dell'applicazione di esempio. Questa guida spiega i concetti chiave e come utilizzarla. supabaseAuthUtils.ts Utilizzo dell'Helper di Autenticazione

Sezione intitolata “Utilizzo dell'Helper di Autenticazione”

funzione gestisce l'intero flusso di autenticazione: authenticateWithGoogleSupabase Copia nel portapenne

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

Sezione intitolata “Critico: Gestione dei Redirect”

Critico: Gestione dei redirect

Quando si utilizza il login di Google sul web, si SI DEVE chiamare qualsiasi funzione dal plugin quando si verifica il redirect per inizializzare il plugin in modo che possa gestire il redirect e chiudere la finestra popup. Si può chiamare sia isLoggedIn() O initialize() - entrambi attiveranno la gestione dei redirect.

Questo è essenziale per il flusso di autenticazione OAuth funzionare correttamente.

Esempio di Implementazione

Aggiungi questo al tuo componente che gestisce l'accesso di Google:

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
}

Vedi il Pagina Supabase.tsx per un esempio completo.

Come Funziona

Per una spiegazione dettagliata di come funziona il flusso di autenticazione, compresa la generazione di nonce, la validazione di JWT e l'accesso a Supabase, vedere il sezione “Come Funziona” nella guida di configurazione generale.

Per la documentazione completa code, vedere la Sezione di riferimento completo Code nella guida di configurazione generale.

Vedi anche:

• Pagina Supabase.tsx - Componente di esempio con gestione del redirect
• Pagina SupabaseCreateAccount.tsx - Pagina di esempio per la creazione di un account

Nota importante

Gestione delle redirect

Quando si utilizza il login di Google sul web, È necessario chiamare qualsiasi funzione dal plugin quando si verifica la redirect per inizializzare il plugin in modo che possa gestire la redirect e chiudere la finestra popup. Si può chiamare isLoggedIn() O initialize() - sia entrambi attiveranno la gestione delle redirect.

Questo è essenziale per il flusso di autenticazione popup funzioni correttamente. Senza questo, la finestra popup non si chiuderà dopo l'autenticazione.

Gestione del nonce

L'implementazione del nonce segue il modello dal documento di React Native Google Sign In va a Supabase's:

• rawNonce Supabase crea un hash di signInWithIdToken()
• e lo confronta con il rawNonce che è incluso nel token ID da Google Sign-In nonceDigest (hash SHA-256, codificato in esadecimale) va al
• nonceDigest parametro nelle API di Google Sign-In nonce Ripresa Automatica

Sezione intitolata “Ripresa Automatica”

Ripresa Automatica

• Se la validazione del JWT fallisce all'atto primo, si esce e si riprova una volta
• Questo gestisce casi in cui i token memorizzati potrebbero avere nonci sbagliati
• Se anche la riprova fallisce, viene restituito un errore

Risoluzione dei problemi

Se la autenticazione fallisce:

• Redirect non funziona: Assicurati di chiamare isLoggedIn() al caricamento del componente (vedi esempio sopra)
• Audience non autorizzato: Verifica che i tuoi ID Client Google corrispondano in entrambi Google Cloud Console e Supabase
• URL di reindirizzamento autorizzati: Verifica che gli URL di reindirizzamento autorizzati siano configurati sia nel Cloud Console di Google che in Supabase
• Mancanza di nonce: Verifica i log del console - la funzione si riproverà automaticamente, ma puoi effettuare il logout manualmente se necessario
• Fallimento della validazione del token: Assicurati di utilizzare mode: 'online' nel chiamata di inizializzazione per ottenere un idToken
• Recensisci l'applicazione di esempio __CAPGO_KEEP_0__ example app code Pagina di modifica