Introduzione all'integrazione di Supabase

Panoramica

Questa guida ti guiderà attraverso la configurazione dell'autenticazione Supabase con il plugin di login sociale Capacitor. Questa integrazione consente di utilizzare i provider di login sociale nativi (Google, Apple, Facebook, Twitter) sui piattaforme mobili, mentre si utilizza l'autenticazione Supabase per l'autenticazione backend e PostgreSQL per lo storage dei dati.

Cosa Imparerai

• Come configurare l'autenticazione Supabase
• Come integrare il plugin di login sociale Capacitor con l'autenticazione Supabase
• Impostazione specifica della piattaforma per Android, iOS e Web
• Come gestire in modo sicuro i nonces per Supabase

Cosa avrai bisogno

Prima di iniziare, assicurati di avere:

1. Un Progetto Supabase

   • Crea un progetto su Supabase Dashboard
   • Abilita il provider di autenticazione OAuth di Google
   • Ottieni l'URL e la chiave anonima del tuo progetto Supabase

2. Supabase JS SDK

   • Installa Supabase nel tuo progetto:

     npm install @supabase/supabase-js

3. Un progetto Capacitor

   • Un'applicazione Capacitor esistente
   • Capacitor plugin di accesso sociale installato:

     npm install @capgo/capacitor-social-login
     npx cap sync

4. Configurazione di Google per piattaforma

   • Completa la configurazione di accesso Google per le tue piattaforme di destinazione:
     • Configurazione di accesso Google per Android
     • Configurazione di accesso Google per iOS
     • Configurazione di accesso Google per Web

Esempio di Applicazione

È disponibile un esempio completo e funzionante nel repository:

Code Repository: Puoi trovare il repository code qui

L'applicazione di esempio dimostra:

• Autenticazione email/password con Supabase
• Integrazione di Google Sign-In (Android, iOS e Web)
• Un semplice archivio di valori utilizzando le tabelle PostgreSQL di Supabase
• Archiviazione di dati specifici per l'utente con la sicurezza di livello di riga (RLS)

Dettagli di Implementazione Chiave

Gestione del Nonce

Supabase richiede una gestione speciale del nonce per motivi di sicurezza. L'implementazione segue le indicazioni della documentazione di React Native Google Sign In Genera un:

• (stringa casalinga sicura per URL) rawNonce Cifralo con SHA-256 per ottenere
• Passa nonceDigest
• a Google Sign-In nonceDigest Passa
• a Supabase (Supabase lo cifra internamente per la comparazione) rawNonce Validazione JWT

__CAPGO_KEEP_0__

L'esempio di implementazione include la validazione JWT per garantire:

• L'audience del token corrisponde ai Client ID Google configurati
• La nonce corrisponde al digest previsto
• Ritentativo automatico in caso di fallimento della validazione (soprattutto importante per iOS)

Considerazioni specifiche della piattaforma

• iOS: La cache dei token può causare problemi di nonce - l'implementazione gestisce automaticamente questo problema
• Web: Deve chiamare isLoggedIn() on mount per gestire le redirect OAuth
• Dispositivi mobili: Implementazione standard con configurazione del fingerprint SHA-1

Passaggi successivi

Continua con le guide di configurazione:

• Supabase Google Login - Configurazione generale - Panoramica e prerequisiti
• Configurazione per dispositivi Android - Configurazione specifica per Android
• Configurazione per dispositivi iOS - Configurazione specifica per iOS
• Configurazione per web - Configurazione web specifica

Apple Sign-In

• Supabase Apple Login - Configurazione generale - Panoramica e prerequisiti
• Configurazione di iOS - Configurazione iOS specifica
• Configurazione di Android - Configurazione Android specifica

Continua dall'introduzione all'integrazione di Supabase

Se stai utilizzando Introduzione all'integrazione con Supabase per pianificare l'autenticazione e le flussi di account, connettilo con Usando @capgo/capacitor-login-social per la capacità nativa in Usando @capgo/capacitor-login-social, @capgo/capacitor-login-social per il dettaglio di implementazione in @capgo/capacitor-login-social, @capgo/capacitor-passkey per il dettaglio di implementazione in @capgo/capacitor-passkey, @capgo/capacitor-biometric-nativo per il dettaglio di implementazione in @capgo/capacitor-biometric-nativo, e Autenticazione a due fattori per il dettaglio di implementazione in Autenticazione a due fattori.