Configurazione di accesso Apple di Supabase - Impostazioni generali

Copia un prompt di configurazione con le istruzioni di installazione e la guida markdown completa per questo plugin.

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.

Prerequisiti

Prima di iniziare, assicurati di avere:

Creato un progetto Supabase
Letto il context:HTML testo frammento da una stringa di Capgo UI più lunga (chiave di pagina `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 di messaggio `read_the_style_guide` (Leggi La Guida allo Stile). Guida alla configurazione dei credenziali OAuth Apple
Seguire le guide specifiche per piattaforma per configurare le credenziali OAuth Apple per la tua piattaforma di destinazione:
Prima di iniziare il tutorial di Supabase, è necessario generare gli ID client per le piattaforme che intendi 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 passo 7 di questa guida.

Abilitazione del provider OAuth Apple in Supabase

Vai al tuo Pannello di controllo di Supabase
__CAPGO_KEEP_0__
Seleziona il tuo progetto di Supabase Authentication __CAPGO_KEEP_0__
__CAPGO_KEEP_0__ Providers Seleziona il pulsante
Tabella dei provider di Supabase Apple Trova il provider
Abilita il Apple provider
Riempi la configurazione del ID del client:

Se stai utilizzando Apple Login per iOS, l'ID del client è lo stesso del tuo ID dell'app. Se stai utilizzando Apple Login per Android o Web, l'ID del client è lo stesso del tuo ID del servizio. Se stai utilizzando sia iOS che Android o Web, devi fornire sia l'ID dell'app che l'ID del servizio.
Clicca sul Save tasto

Voi NON AVETE LA NECESSITÀ di 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à

Sezione intitolata “Uso 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”

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 bundle)
Android: Utilizza il flusso di OAuth di reindirizzamento 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 autenticare con Supabase utilizzando supabase.auth.signInWithIdToken().

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.