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 Web di Google
• il Impostazione di accesso Google di Supabase - Configurazione generale.

Implementazione

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

Sezione intitolata “Utilizzo dell'aiuto 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);
}

Eseguibile: Gestione dei Redirect

Eseguibile: Gestione dei Redirect

Quando si utilizza il login di Google sul web, dovete DEVE 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. Potete chiamare 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 il login 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 SupabasePage.tsx per un esempio completo.

Come Funziona

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

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

Vedi anche:

• 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 di Google sul web, tu DEVI chiamare qualsiasi funzione dal plugin quando accade il redirect per inizializzare il plugin in modo che possa gestire il redirect e chiudere la finestra del popup. Puoi chiamare sia isLoggedIn() O initialize() - sia entrambi attiveranno la gestione del redirect.

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

Gestione del nonce

L'implementazione del nonce segue il pattern dal documento di riferimento 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 in API di Google Sign-In nonce Ripresa Automatica

Ripresa automatica

L'implementazione include la logica di ritentativo automatico:

• Se la validazione JWT fallisce nell'istanza iniziale, si esce e si riprova una volta
• Questo gestisce i casi in cui i token memorizzati potrebbero avere nonci sbagliati
• Se anche il ritentativo fallisce, viene restituito un errore

Risoluzione dei Problemi

Se la autenticazione fallisce:

• Non funziona la reindirizzamento: Assicurati di chiamare isLoggedIn() all'attacco del componente (vedi esempio sopra)
• Audienza non valida: Verifica che gli ID Client Google siano sincronizzati in entrambi il Cloud Console di Google e Supabase
• URL di reindirizzamento autorizzati: Assicurati che gli URL di reindirizzamento autorizzati siano configurati in entrambi il Cloud Console di Google e Supabase
• Errore di nonce: Controlla 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
• Rivedi l'applicazione di esempio __CAPGO_KEEP_0__ example app code Continua da Supabase Google Login on Web

Authorized redirect URLs

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 il dettaglio di implementazione in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric per il dettaglio di implementazione in @capgo/capacitor-native-biometric, e Autenticazione a due fattori per la dettaglio di implementazione in Autenticazione a due fattori.