Introduzione all'Integrazione con 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) 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 di Supabase
• Come integrare Capacitor plugin di login sociale con l'autenticazione di Supabase
• Impostazioni specifiche per 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 di Supabase

   • Crea un progetto su Pannello di controllo di Supabase
   • Abilita il provider di autenticazione OAuth di 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
   • Plugin di autenticazione Capacitor Social installato:

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

4. Configurazione di Google specifica per piattaforma

   • Completa la configurazione di Google Sign-In per le tue piattaforme di destinazione:
     • Configurazione di Google Login per Android
     • Configurazione di Google Login per iOS
     • Configurazione di Google Login per Web

Esempio di applicazione

È disponibile un esempio di applicazione funzionante nel repository:

Code Repository: Puoi trovare il repository code qui

L'applicazione di esempio dimostra:

• L'autenticazione con email/password tramite Supabase
• L'integrazione di Google Sign-In (Android, iOS e Web)
• A un semplice archivio chiave-valore utilizzando le tabelle PostgreSQL di Supabase
• Archiviazione di dati specifici dell'utente con livello di sicurezza per 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 della documentazione di React Native Google Sign In Genera un:

• (stringa casuale sicura per URL) rawNonce Hashalo con SHA-256 per ottenere
• Passa nonceDigest
• __CAPGO_KEEP_0__ nonceDigest a Google Sign-In
• Pass rawNonce a Supabase (Supabase lo hash 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: La cache dei token può causare problemi con il nonce - l'implementazione gestisce automaticamente questo problema
• Web: Deve essere chiamato 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 generale - Panoramica e prerequisiti
• Configurazione Android - Configurazione specifica per Android
• Setup iOS - Configurazione specifica per iOS
• Setup Web - Configurazione specifica per Web

Apple Sign-In

• Supabase Apple Login - Configurazione di base - Panoramica e prerequisiti
• Setup iOS - Configurazione specifica per iOS
• Setup 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, 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-biometrica nativa per i dettagli di implementazione in @capgo/capacitor-biometrica nativa, e Autenticazione a due fattori per i dettagli di implementazione in Autenticazione a due fattori.