Introduzione dell'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 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 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

Cosa Hai Bisogno

Prima di iniziare, assicurati di avere:

1. Un Progetto Supabase

   • Crea un progetto presso 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 Specifica della Piattaforma Google

   • Completa la configurazione di accesso Google per le tue piattaforme target:
     • 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: Trova il repository di code qui

L'applicazione di esempio dimostra:

• L'autenticazione email/parola con Supabase
• Integrazione di Google Sign-In (Android, iOS e Web)
• Un semplice archivio di chiavi-valori utilizzando le tabelle PostgreSQL di Supabase
• Memorizzazione dei dati specifici dell'utente con Sicurezza a Livello di Riga (RLS)

Dettagli di implementazione chiave

Gestione del nonce

Supabase richiede un trattamento nonce speciale per motivi di sicurezza. La sua implementazione segue il Documentazione di rete nativa di React per l'accesso Google:

• Genera un rawNonce Cifrala con SHA-256 per ottenere
• Hasha con SHA-256 per ottenere nonceDigest
• Passa nonceDigest accedi a Google Sign-In
• Passa rawNonce accedi a Supabase (Supabase lo cifra internamente per confrontarlo)

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
• Ritenta automaticamente 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 direzioni di OAuth
• Android: Implementazione standard con configurazione del fingerprint SHA-1

Next Steps

Continua con le guide di configurazione:

• Continua con le guide di configurazione: - Panoramica e prerequisiti
• Impostazione Android - Configurazione specifica per Android
• Impostazione iOS - Configurazione specifica per iOS
• Impostazione Web - Configurazione specifica per Web

Apple Sign-In

• Login Apple Supabase - Impostazione Generale - Panoramica e prerequisiti
• Impostazione iOS - Configurazione specifica per iOS
• Configurazione Android - Configurazione specifica per Android

Continua da Introduzione all'integrazione con Supabase

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