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) 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 accesso sociale con Supabase Auth
• Impostazioni specifiche 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 di Supabase

   • Crea un progetto su Pannello di controllo di Supabase
   • Abilita il provider di autenticazione OAuth di Google
   • Ottenere 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 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 tramite email/password con Supabase
• L'integrazione di Google Sign-In (Android, iOS e Web)
• A un semplice archivio chiave-valore utilizzando le tabelle PostgreSQL di Supabase
• Archiviazione dati specifici dell'utente con livello di sicurezza per riga (RLS)

Dettagli di implementazione chiave

Gestione nonce

Supabase richiede una gestione nonce speciale 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 Hasha con SHA-256 per ottenere
• Passa nonceDigest
• __CAPGO_KEEP_0__ nonceDigest per 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
• Ripresa automatica 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 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

Accesso Apple

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