Supabase Apple Login on Web

Requisiti preliminari

Questa guida ti aiuterà ad integrare l'accesso con Apple con l'autenticazione di Supabase su Web. Si assume che tu abbia già completato:

• il Configurazione di Apple Login Web
• il Configurazione generale di Apple Login - Supabase.

Esecuzione

L'implementazione completa è disponibile nel file dell'applicazione di esempio. Questa guida spiega i concetti chiave e come utilizzarlo. supabaseAuthUtils.ts Utilizzo dell'helper di autenticazione

Sottosezione intitolata “Utilizzo dell'helper di autenticazione”

funzione gestisce l'intero flusso di autenticazione: authenticateWithAppleSupabase __CAPGO_KEEP_0__

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

Sul Web, Apple Sign-In utilizza un flusso di popup OAuth:

1. Inizializzazione: Il plugin viene inizializzato con il tuo ID Servizio e l'URL della pagina corrente come URL di reindirizzamento
2. Popup OAuth: Apre una finestra popup con la pagina OAuth di Apple
3. Autenticazione Utente: L'utente si autentica con Apple nella popup
4. Token di Identità: Apple restituisce un token di identità (JWT) contenente informazioni sull'utente
5. Autenticazione Supabase: Il token di identità viene inviato a Supabase utilizzando signInWithIdToken()

La funzione di aiuto rileva automaticamente il web platform e configura tutto in modo appropriato.

Note importanti

Configurazione ID Servizio

• Web richiede il tuo ID Servizio Apple (lo stesso di Android)
• L'ID Servizio deve essere configurato nel Portale dello Sviluppatore Apple con le URL di ritorno corrette
• Assicurati di aver aggiunto il tuo dominio alle domini consentiti nel Portale dello Sviluppatore Apple

URL di reindirizzamento

• Sul web, l'URL di reindirizzamento viene impostata automaticamente su window.location.href (URL della pagina corrente)
• Questo deve corrispondere a uno dei Return URLs configurati nel Portale dello Sviluppatore Apple
• Assicurarsi di configurare sia l'URL con che senza slash finale nel Portale dello Sviluppatore Apple

ID del Client Supabase

In Supabase, configurare il tuo provider Apple con:

• ID del Client: Il tuo ID del Servizio Apple (ad esempio, com.example.app.service)

Se stai utilizzando anche iOS, avrai bisogno di fornire sia l'ID dell'app che l'ID del Servizio in campo ID del Client di Supabase (separati da virgola).

Aggiorna la Funzione di Aiuto

Quando si utilizza la authenticateWithAppleSupabase funzione di aiuto, è necessario aggiornare la per farla corrispondere al tuo ID Servizio Apple: clientId Copia nel portapenne

await SocialLogin.initialize({
  apple: {
    clientId: isIOS
      ? undefined // iOS uses bundle ID automatically
      : 'your.service.id.here', // Your Apple Service ID for Web and Android
    redirectUrl: redirectUrl,
  },
});

Sostituisci

con il tuo ID Servizio Apple reale (lo stesso valore che hai configurato nel Portale dello Sviluppatore Apple). 'your.service.id.here' Risoluzione dei problemi

Sezione intitolata “Risoluzione dei problemi”

Se la autenticazione fallisce:

• Mancanza di identificativo del servizio: Verifica che l'ID del servizio corrisponda in entrambi il Portale dello Sviluppatore Apple e il tuo code
• URL di ritorno non configurato: Assicurati che l'URL della tua pagina corrente (con e senza slash finale) sia configurato nel Portale dello Sviluppatore Apple
• Popup bloccato: Controlla le impostazioni del browser - alcuni browser bloccano i popup per impostazione predefinita
• Dominio non consentito: Verifica che il tuo dominio sia aggiunto alle domini consentiti nel Portale dello Sviluppatore Apple
• Configurazione di Supabase: Verifica che l'ID del servizio sia configurato correttamente nei impostazioni del provider Apple di Supabase
• Rivista il Esempio di app code Per riferimento

Continua da Supabase Apple Login on Web

Se stai utilizzando Supabase Apple Login on Web per pianificare l'autenticazione e le flussi di account, connettilo con Utilizzando @capgo/capacitor-social-login per la capacità nativa in Utilizzando @capgo/capacitor-social-login, @capgo/capacitor-social-login per il dettaglio di implementazione in @capgo/capacitor-social-login, @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.