Continua dall'introduzione all'integrazione Supabase

Panoramica

Questa guida ti guiderà attraverso la configurazione dell'autenticazione Supabase con il plugin di login sociale Capacitor. Questa integrazione consente di utilizzare i provider di login 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 login 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 hai 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 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 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

Esempio di applicazione completo disponibile nel repository:

Repository Code: Trova 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-valori 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 __CAPGO_KEEP_0__
• Hasha con SHA-256 per ottenere nonceDigest
• Passa nonceDigest a Google Sign-In
• Passa rawNonce a Supabase (Supabase lo hasha internamente per confrontarlo)

Validazione JWT

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

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

Passaggi successivi

Supabase Google Login - Configurazione di base

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

Apple Sign-In

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

Continua dall'Introduzione all'integrazione con Supabase

Se stai utilizzando Introduzione all'integrazione con 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 Utilizza @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