Assistente di Autenticazione Supabase Google su Web

Introduzione

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

• il Configurazione dell'accesso Google Web
• la Configurazione generale dell'accesso Google Supabase.

Impostazione

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

Utilizzo dell'aiuto di autenticazione

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

Critico: Gestione del redirect

Critico: Gestione del redirect

Quando si utilizza il login di Google su web, SI DEVE chiamare qualsiasi funzione dal plugin quando avviene il redirect per inizializzare il plugin affinché possa gestire il redirect e chiudere la finestra popup. Si può chiamare sia isLoggedIn() O initialize() - entrambi attiveranno il trattamento della reindirizzamento.

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

For a detailed explanation of how the authentication flow works, including nonce generation, JWT validation, e la registrazione su Supabase, vedere il How It Works sezione nella guida di configurazione generale.

For the complete code reference, see the Complete Code Reference sezione nella guida di configurazione generale.

Anche vedere:

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

Note importanti

Gestione del redirect

Quando si utilizza il login Google sul web, tu DEVI chiamare qualsiasi funzione del plugin quando si verifica l'istanza di redirect per inizializzare il plugin in modo che possa gestire l'istanza di redirect e chiudere la finestra popup. Puoi chiamare sia isLoggedIn() O initialize() - entrambi attiveranno la gestione delle istanze di redirect.

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

Gestione delle Nonce

L'implementazione delle nonce segue il modello dal documento 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 la seconda tentativa 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: Controlla che gli URL di reindirizzamento autorizzati siano configurati in entrambi Google Cloud Console e Supabase
• Mancanza di nonce: Controlla 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'istanza di inizializzazione per ottenere un idToken
• Recensisci il esempio di applicazione 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-login-social per i dettagli di implementazione in @capgo/capacitor-login-social @capgo/capacitor-passkey per i dettagli di implementazione in @capgo/capacitor-passkey @capgo/capacitor-autenticazione-biometrica-nativa per i dettagli di implementazione in @capgo/capacitor-autenticazione-biometrica-nativa, e Autenticazione a due fattori per i dettagli di implementazione in Autenticazione a due fattori.