Supabase Google Login su Web

Introduzione

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

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

Esecuzione

L'esecuzione completa è disponibile nell'applicazione di esempio. esempio app’s supabaseAuthUtils.ts file. Questa guida spiega i concetti chiave e come utilizzarlo.

Utilizzo dell'Assistente di Autenticazione

La authenticateWithGoogleSupabase funzione gestisce l'intero flusso 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 dei Redirect

Importante: Gestione dei Redirect

Quando si utilizza il login di Google sul web, DEVI chiamare qualsiasi funzione dal plugin quando avviene il redirect per inizializzare il plugin in modo che possa gestire il redirect e chiudere la finestra del popup. Puoi chiamare sia isLoggedIn() Ottieni l'accesso initialize() - entrambi attiveranno il trattamento della gestione del redirect.

Questa è 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, vedere la sezione Come Funziona nella guida di configurazione generale.

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

Inoltre, 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, tu DEVI chiamare qualsiasi funzione dal plugin quando avviene il redirect per inizializzare il plugin in modo che 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 autenticazione popup funzionare correttamente. Senza questo, la finestra popup non si chiuderà dopo l'autenticazione.

Gestione del nonce

L'implementazione del nonce segue il pattern dalla documentazione di React Native Google Sign In:

• rawNonce va a Supabase’s signInWithIdToken()
• Supabase genera un hash di rawNonce e lo confronta con il nonceDigest che è incluso nel token ID da Google Sign-In
• nonceDigest (hash SHA-256, codificato in esadecimale) va al 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 sbagliati
• Se anche il ritentativo fallisce, si restituisce un errore

Risolvere i problemi

Se l'autenticazione fallisce:

• La reindirizzamento non funziona: Assicurati di chiamare isLoggedIn() on component mount (vedi esempio sopra)
• Audience non valida: Verifica che gli ID Client Google corrispondano 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
• Mancato match del nonce: Verifica i log del console - la funzione riproverà automaticamente, ma puoi effettuare il logout manualmente se necessario
• Fallimento della validazione del tokenAssicurati di utilizzare mode: 'online' in l'invocazione di inizializzazione per ottenere un idToken
• Recensisci l'applicazione di esempio __CAPGO_KEEP_0__ example app code Prosegui da Supabase Google Login on Web

Sezione intitolata “Prosegui da Supabase Google Login on Web”

Supabase Google Login on Web per pianificare l'autenticazione e le flussi di account, connettilo con Usando @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login per la capacità nativa in Usando @capgo/capacitor-social-login, for the native capability in Using @capgo/capacitor-social-login, @capgo/capacitor-autenticazione-social per i dettagli di implementazione in @capgo/capacitor-autenticazione-social, @capgo/capacitor-passkey per i dettagli di implementazione in @capgo/capacitor-passkey, @capgo/capacitor-biometria-nativa per i dettagli di implementazione in @capgo/capacitor-biometria-nativa, e Autenticazione a due fattori per i dettagli di implementazione in Autenticazione a due fattori.