Supabase Google Login su Web

Introduzione

Questa guida ti aiuterà ad integrare Google Sign-In con l'autenticazione Supabase su Web. Si presume che tu abbia già completato:

• il setup di Google Login Web
• il setup generale di Google Login - Supabase.

Impostazione

L'implementazione completa è disponibile nel file dell'applicazione di esempio. Questa guida spiega i concetti chiave e come utilizzarli. supabaseAuthUtils.ts Utilizzo dell'helper di autenticazione

__CAPGO_KEEP_0__

La authenticateWithGoogleSupabase funzione gestisce l’intera sequenza di autenticazione:

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

Importante: Gestione del redirect

Importante: Gestione del redirect

Quando si utilizza il login di Google sul web, DEVI chiamare qualsiasi funzione dal plugin quando avviene il redirect per inizializzare il plugin affinché possa gestire il redirect e chiudere la finestra popup. Puoi chiamare sia isLoggedIn() O initialize() - entrambi attiveranno la gestione del redirect.

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

Esempio di Implementazione

Aggiungi questo al tuo componente che gestisce l'accesso 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 SupabasePage.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, vedi la sezione Come Funziona nella guida di configurazione generale.

Per la documentazione completa di code, vedere la Documentazione completa di Code sezione nella guida di configurazione generale.

Anche vedere:

• SupabasePage.tsx - Esempio di componente con gestione del redirect
• SupabaseCreateAccountPage.tsx - Esempio di pagina di registrazione

Nota importante

Gestione del redirect

Quando si utilizza il login di Google sul web, si Deve chiamare qualsiasi funzione del plugin quando accade il redirect per inizializzare il plugin in modo che possa gestire il redirect e chiudere la finestra popup. Può chiamare sia O isLoggedIn() - entrambi attiveranno il trattamento del redirect. initialize() Questo è essenziale per il flusso di autenticazione popup OAuth funzionare correttamente. Senza questo, la finestra popup non si chiuderà dopo l'autenticazione.

Gestione del nonce

Sottosezione intitolata “Gestione del nonce”

Dal documento React Native Google Sign In va a Supabase’s:

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

Ritenta Automaticamente

L'implementazione include la logica di ritentativo automatico:

• Se la validazione del JWT fallisce all'atto primo, si esce e si ritenta una volta
• Questo gestisce i casi in cui i token memorizzati potrebbero avere nonci sbagliate
• Se anche il ritentativo fallisce, si restituisce un errore

Risoluzione dei Problemi

Se la autenticazione fallisce:

• La reindirizzamento non funziona: Assicurati di chiamare isLoggedIn() in fase di caricamento del componente (vedi esempio sopra)
• Audience non valida: Verifica che gli ID del client Google siano sincronizzati in entrambi Google Cloud Console e Supabase
• URL di reindirizzamento autorizzati: Verifica che gli URL di reindirizzamento autorizzati siano configurati in entrambi Google Cloud Console e Supabase
• Mancanza di nonce: Verifica i log del console - la funzione si riproverà automaticamente, ma puoi effettuare il logout manualmente se necessario
• La validazione del token fallisce: Assicurati di utilizzare mode: 'online' in l'istanza di inizializzazione per ottenere un idToken
• Rivista il l'applicazione di esempio code per riferimento

Continua da Supabase Google Login on Web

Se stai utilizzando Supabase Google Login on Web per pianificare l'autenticazione e le flussi di account, connettilo con Utilizza @capgo/capacitor-social-login per la capacità nativa in Utilizza @capgo/capacitor-social-login, @capgo/capacitor-social-login per il dettaglio di implementazione in @capgo/capacitor-social-login @capgo/capacitor-passkey per i dettagli di implementazione in @capgo/capacitor-passkey @capgo/capacitor-native-biometric per i dettagli di implementazione in @capgo/capacitor-native-biometric, e Autenticazione a due fattori per i dettagli di implementazione in Autenticazione a due fattori.