Introduzione all'Integrazione di 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 il 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 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 accesso Social Capacitor installato:

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

4. Configurazione di Google per piattaforma

   • 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 e funzionante disponibile nel repository:

Repository di Code: Potete trovare il repository code qui

L'applicazione di esempio dimostra:

• L'autenticazione email/password con Supabase
• L'integrazione di Sign-In Google (Android, iOS e Web)
• Un semplice archivio di valori utilizzando le tabelle PostgreSQL di Supabase
• Dati di archiviazione specifici dell'utente con livello di sicurezza dei dati (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 Google Sign In per React Native Genera un:

• (stringa casuale sicura per URL) rawNonce Cifralo con SHA-256 per ottenere
• Pass nonceDigest
• per Google Sign-In nonceDigest __CAPGO_KEEP_0__
• Passa a Supabase (Supabase lo hash internamente per confronto) rawNonce JWT Validation

Sottosezione intitolata “Validazione JWT”

La destinazione 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

Sottosezione intitolata “Considerazioni specifiche della piattaforma”

• : La cache dei token può causare problemi di nonce - l'implementazione gestisce automaticamente questo problemaLa cache dei token può causare problemi di nonce - l'implementazione gestisce automaticamente questo problema
• WebDeve chiamare isLoggedIn() on mount per gestire le redirect OAuth
• AndroidImplementazione standard con configurazione del fingerprint SHA-1

Next Steps

Continua con le guide di configurazione:

• Supabase Google Login - Configurazione generale - Panoramica e prerequisiti
• Android Setup - Configurazione specifica per Android
• Impostazione iOS - Configurazione specifica per iOS
• Impostazione Web - Configurazione specifica per Web

Accesso Apple

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

Continua da Integrazione di Supabase Introduzione

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-social-login, @capgo/capacitor-social-login per il dettaglio di implementazione in @capgo/capacitor-social-login, @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.