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'implementazione completa è disponibile nell' esempio di applicazione supabaseAuthUtils.ts file. Questa guida spiega i concetti chiave e come utilizzarlo.

Utilizzare l'helper di autenticazione

Questo 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 del redirect

Importante: Gestione del redirect

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

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

Esempio di Implementazione

Aggiungi questo al tuo componente che gestisce l'accesso con 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 con 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 l'accesso Google sul web, tu DEVI chiamare qualsiasi funzione dal plugin quando accade il rinvio per inizializzare il plugin in modo che possa gestire il rinvio e chiudere la finestra popup. Puoi chiamare sia isLoggedIn() O initialize() - entrambi attiveranno la gestione del rinvio.

Questa è 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 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 JWT fallisce all'istanza iniziale, si esce e si ritenta una volta
• Questo gestisce i casi in cui i token memorizzati potrebbero avere nonces sbagliati
• Se anche la seconda istanza fallisce, si restituisce un errore

Risolvere i problemi

Se l'autenticazione fallisce:

• La reindirizzamento non funzionaAssicurati di chiamare isLoggedIn() on il componente di caricamento (vedi esempio sopra)
• Audience non validaVerifica che gli ID del client Google siano configurati in entrambi Google Cloud Console e Supabase
• URL di reindirizzamento autorizzatiVerifica che gli URL di reindirizzamento autorizzati siano configurati in entrambi Google Cloud Console e Supabase
• Mancanza di nonceControlla i log del console - la funzione si 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 Utilizzando @capgo/capacitor-social-login per la capacità nativa in Utilizzando @capgo/capacitor-social-login, Social Login @capgo/capacitor per i dettagli di implementazione in Social Login @capgo/capacitor Social Login @capgo/capacitor-passkey per i dettagli di implementazione in Social Login @capgo/capacitor-passkey Social Login @capgo/capacitor-native-biometric per i dettagli di implementazione in Social Login @capgo/capacitor-native-biometric, e Autenticazione a due fattori per i dettagli di implementazione in Autenticazione a due fattori