Impostazione di accesso Apple Supabase - Configurazione generale

Panoramica

Questa guida ti aiuterà a integrare Apple Sign-In con l'autenticazione Supabase. Apple Sign-In fornisce un metodo di autenticazione sicuro e focalizzato sulla privacy che funziona su piattaforme iOS, Android e Web.

Requisiti preliminari

Prima di iniziare, assicurati di avere:

1. Creato un progetto Supabase

2. Letto il context:HTML testo frammento da una stringa di Capgo UI più lunga (chiave padre `read_the_style_guide`). Pagina/area: Sito web di marketing di Capgo. Ruolo: frase di copertina del sito web. Visibile in: pagina contributing.astro. Chiave messaggio `read_the_style_guide` (Leggi La Guida allo Stile). Guida per la configurazione delle credenziali OAuth Apple

3. Seguite le guide specifiche per piattaforma per configurare le credenziali OAuth Apple per la vostra piattaforma di destinazione:

   • Configurazione per Android
   • Configurazione per iOS
   • Configurazione per Web

   Nota

   Prima di iniziare il tutorial di Supabase, è necessario generare gli ID client per le piattaforme che pianificate di utilizzare.

   Per iOS, l'ID client è lo stesso del vostro ID applicazione. Per Android e Web, l'ID client è lo stesso del vostro ID servizio. Li utilizzerete nel passo 7 di questa guida.

Abilitazione del provider OAuth Apple in Supabase

1. Vai al tuo Pannello di controllo di Supabase

2. Clicca sul tuo progetto

   

3. Vai al Authentication menu

   

4. Clicca sulla Providers tabella

   

5. Trova il Apple provider

   

6. Abilita il Apple provider

   

7. Riempi la configurazione del codice client:

   Nota

   Se stai utilizzando Apple Login per iOS, il codice client è lo stesso del tuo ID applicazione. Se stai utilizzando Apple Login per Android o Web, il codice client è lo stesso del tuo ID servizio. Se stai utilizzando sia iOS che Android o Web, devi fornire sia l'ID applicazione che l'ID servizio.

   

8. Clicca sul Save tasto

   

   Nota

   Voi NON DOVETE configurare Secret key (for OAuth). Noi eseguiremo un'implementazione backend personalizzata per gestire l'accesso Apple.

Ecco, avete ora abilitato l'accesso Apple con l'autenticazione Supabase 🎉

Utilizzando l'Assistente di Autenticazione

L'implementazione completa include una funzione helper authenticateWithAppleSupabase() che gestisce l'intero flusso di accesso Apple con Supabase. Questa funzione:

• Inizializza l'accesso Apple con la configurazione specifica della piattaforma
• Gestisce il flusso di autenticazione (nativo su iOS, redirect OAuth su Android/Web)
• Estrae il token di identità da Apple
• Si accede a Supabase con il token di identità

Implementazione completa

L'implementazione completa è disponibile nel file dell'applicazione di esempio file dell'applicazione di esempio supabaseAuthUtils.ts Utilizzo base

Sezione intitolata “Utilizzo base”

import { authenticateWithAppleSupabase } from './supabaseAuthUtils';

const result = await authenticateWithAppleSupabase();
if (result.success) {
  console.log('Signed in:', result.user);
  // Navigate to your authenticated area
} else {
  console.error('Error:', result.error);
}

Come funziona

La funzione di aiuto gestisce automaticamente le differenze specifiche della piattaforma:

• iOS: Utilizza l'accesso nativo Apple Sign-In (nessuna URL di reindirizzamento necessaria, utilizza automaticamente l'ID del pacchetto)
• Android: Utilizza il flusso di reindirizzamento OAuth con funzione di bordo (richiede ID Servizio)
• Web: Utilizza il flusso di popup OAuth (richiede ID Servizio e URL della pagina corrente come reindirizzamento)

La funzione restituisce un token di identità da Apple, che viene poi utilizzato per autenticarsi con Supabase utilizzando supabase.auth.signInWithIdToken().

Continua da Supabase Apple Login - Configurazione Generale

Se stai utilizzando Supabase Apple Login - Configurazione Generale per pianificare l'autenticazione e le flussi di account, connettilo con Utilizzare @capgo/capacitor-login sociale per la capacità nativa in Utilizzare @capgo/capacitor-login sociale @capgo/capacitor-login sociale per il dettaglio di implementazione in @capgo/capacitor-login sociale @capgo/capacitor-passkey per il dettaglio di implementazione in @capgo/capacitor-passkey @capgo/capacitor-biometria nativa per il dettaglio di implementazione in @capgo/capacitor-biometria nativa, e Autenticazione a due fattori per il dettaglio di implementazione in Autenticazione a due fattori