Introduzione all'Integrazione Supabase

Panoramica

Questa guida ti 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 fa affidamento all'autenticazione Supabase per l'autenticazione backend e al PostgreSQL per lo storage dei dati.

Questo è 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

Questo è ciò di cui avrai bisogno

Prima di iniziare, assicurati di avere:

1. Un progetto Supabase

   • Creare un progetto su GitHub Dashboard di Supabase
   • 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
   • Il plugin di autenticazione Capacitor Social Login è installato:

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

4. Configurazione Specifica per Piattaforma 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

Esempio di applicazione completo disponibile nel repository:

Repository di Code: Trovi il repository code qui

L'applicazione di esempio dimostra:

• L'autenticazione tramite email e 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 dell'utente con la sicurezza di livello di riga (RLS)

Dettagli di implementazione chiave

Gestione del nonce

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

• Genera un rawNonce (stringa casuale sicura per URL)
• Cifralo con SHA-256 per ottenere nonceDigest
• Passa nonceDigest Accedi con Google Sign-In
• Passa rawNonce a Supabase (Supabase lo crittografa internamente per confronto)

Validazione JWT

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: Il caching dei token può causare problemi di 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

Supabase Google Login - Configurazione generale

• - Panoramica e prerequisiti - Overview and prerequisites
• Configurazione Android - Configurazione specifica per Android
• Configurazione iOS - Configurazione specifica per iOS
• Configurazione Web - Configurazione specifica per Web

Apple Sign-In

• Supabase Apple Login - Configurazione di base - Panoramica e prerequisiti
• Configurazione iOS - Configurazione specifica per iOS
• Impostazione 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-social per la capacità nativa in Utilizza @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-native-biometric per il dettaglio di implementazione in @capgo/capacitor-native-biometric, e Autenticazione a due fattori per il dettaglio di implementazione in Autenticazione a due fattori.