Accesso al login Google su Supabase

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 di accesso Google Web
• il Impostazione di base per l'accesso Google a Supabase.

Implementazione

L'implementazione completa è disponibile nel applicazione di esempio supabaseAuthUtils.ts file. Questa guida spiega i concetti chiave e come utilizzarla.

Sottosezione intitolata “Utilizzo dell'helper di autenticazione”

The authenticateWithGoogleSupabase La 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);
}

Cruciale: Gestione della reindirizzamento

Cruciale: Gestione della reindirizzamento

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

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 del nonce, la validazione del JWT e l'accesso a Supabase, vedere Sezione di Funzionamento nella guida di Configurazione Generale.

Per la documentazione completa code, vedere la Per la documentazione completa del Code, vedi la.

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 con Google sul web, DEVI chiamare qualsiasi funzione del 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 il trattamento della reindirizzamento.

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

Gestione del Nonce

La implementazione del nonce segue il modello dal Documentazione di rete nativa React per l'accesso Google:

• rawNonce Supabase crea un hash di signInWithIdToken()
• e lo confronta con il rawNonce e lo confronta con il nonceDigest (hash SHA-256, codificato in esadecimale) va al
• nonceDigest parametro nelle API di Google Sign-In nonce parametro nelle API di Google Sign-In

Ritentativo Automatico

L'implementazione include la logica di ritentativo automatico:

• Se la validazione JWT fallisce all'istanza iniziale, si esce e si tenta nuovamente una volta
• Gestisce casi in cui i token memorizzati potrebbero avere nonci non corretti.
• Se anche il ritentativo fallisce, si restituisce un errore

Troubleshooting

Se la autenticazione fallisce:

• Redirect non funzionaAssicurati di chiamare isLoggedIn() on component mount (vedi esempio sopra)
• Audienza non validaVerifica che gli ID Client Google corrispondano in entrambi il Console di Google Cloud e Supabase.
• URL di reindirizzamento autorizzatoVerifica che gli URL di reindirizzamento autorizzati siano configurati sia nel Cloud Console di Google che in Supabase
• Mancanza di nonce: Controlla i registri 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' inizializzare la chiamata per ottenere un idToken
• Valuta il app esempio code Recensisci l'esempio di applicazione __CAPGO_KEEP_0__

Continua da Supabase Google Login su Web

Se stai utilizzando Supabase Google Login su Web per pianificare l'autenticazione e le flussi di account, connettilo con Utilizzando @capgo/capacitor-login-social per la capacità nativa in Utilizzando @capgo/capacitor-login-social @capgo/capacitor-login-social per il dettaglio di implementazione in @capgo/capacitor-login-social @capgo/capacitor-chiave di accesso per il dettaglio di implementazione in @capgo/capacitor-passkey @capgo/capacitor-biometria-nativa 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.