Supabase Apple Login - Configurazione Generale

Panoramica

Questa guida ti aiuterà ad 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 di base

Prima di iniziare, assicurati di avere:

1. Creato un progetto Supabase

2. Letto il Setup generale di Apple Login guida per configurare le credenziali OAuth di Apple

3. Seguito le guide specifiche per piattaforma per configurare le credenziali OAuth di Apple per la tua piattaforma di destinazione:

   • Setup Android
   • Impostazione iOS
   • Impostazione Web

   Nota

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

   Per iOS, l'ID client è lo stesso del tuo ID applicazione. Per Android e Web, l'ID client è lo stesso del tuo ID servizio. Li utilizzerai nel passaggio 7 di questa guida.

Abilitazione del provider OAuth Apple in Supabase

1. Vai al tuo Pannello di controllo Supabase

2. Clicca sul tuo progetto

   

3. Vai al menu Authentication menu

   

4. Clicca sul Providers tab

   

5. Trova il Apple provider

   

6. Abilita il Apple provider

   

7. Compilare la configurazione dell'ID del client:

   Nota

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

   

8. Clicca sul Save bottone

   

   Nota

   Tu NON DEVONO ESSERE PRESENTI setup Secret key (for OAuth)Eseguiamo un'implementazione backend personalizzata per gestire l'accesso Apple.

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

Utilizzo dell'helper 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 una configurazione specifica per la piattaforma
• Gestisce il flusso di autenticazione (nativo su iOS, redirect OAuth su Android/Web)
• Estrae il token di identità da Apple
• Accedi a Supabase con il token di identità

Implementazione Completa

L'implementazione completa è disponibile nel 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);
}

Sezione intitolata “Come Funziona”

iOS

• : Utilizza l'accesso utente Apple nativo (nessuna URL di reindirizzamento necessaria, utilizza automaticamente l'ID bundle) __CAPGO_KEEP_0__
• Android: Utilizza il flusso di reindirizzamento OAuth con funzione di edge backend (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().