Introduzione all'integrazione di Supabase

Panoramica

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

Ciò che imparerai

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

Ciò di cui avrai bisogno

Prima di iniziare, assicurati di avere:

1. Un progetto Supabase

   • Crea un progetto a Pannello di controllo di Supabase
   • Abilita il provider di autenticazione Google
   • Ottieni l'URL del tuo progetto Supabase e la chiave anonima

2. Supabase JS SDK

   • Installa Supabase nel tuo progetto:

     npm install @supabase/supabase-js

3. Un progetto Capacitor

   • Un'applicazione Capacitor esistente
   • Il plugin di autenticazione sociale Capacitor installato:

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

4. Configurazione piattaforma-specifica di Google

   • 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 di applicazione completo nel repository:

Code Repository: Puoi trovare il repository code qui

L'applicazione di esempio dimostra:

• Autenticazione via email/parola con Supabase
• Integrazione di Google Sign-In (Android, iOS e Web)
• Un semplice archivio di chiavi 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 istruzioni della documentazione di Google Sign In per React Native Genera un:

• stringa casuale sicura per URL rawNonce stringa casuale sicura per URL
• Hasha con SHA-256 per ottenere nonceDigest
• Passa nonceDigest a Google Sign-In
• Passa rawNonce a Supabase (Supabase lo hasha internamente per la comparazione)

Validazione JWT

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

• La destinazione del token corrisponde ai Client ID Google configurati
• La nonce corrisponde al digest previsto
• Ritenta automaticamente in caso di fallimento della validazione (soprattutto importante per iOS)

Considerazioni specifiche per piattaforma

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

Passaggi successivi

Continua con le guide di configurazione:

• Supabase Google Login - Configurazione di base - Panoramica e prerequisiti
• Configurazione per Android - Configurazione specifica per Android
• Configurazione per iOS - Configurazione specifica per iOS
• Configurazione per Web - Configurazione specifica per Web

Accesso con Apple Sign-In

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

Continua dall'Introduzione all'integrazione di Supabase

Se stai utilizzando Introduzione all'integrazione di Supabase per pianificare l'autenticazione e le flussi di account, connettilo con Utilizza @capgo/capacitor-login sociale per la capacità nativa in Utilizza @capgo/capacitor-login sociale @capgo/capacitor-login sociale per il dettaglio di implementazione in @capgo/capacitor-login sociale @capgo/capacitor-passkey per i dettagli di implementazione in @capgo/capacitor-passkey @capgo/capacitor-native-biometric 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.