Supabase Apple Login on Web

Requisiti preliminari

Questa guida ti aiuterà a integrare Apple Sign-In con l'autenticazione Supabase su Web. Si presume che tu abbia già completato:

• il setup di Apple Login Web
• il setup generale di Apple Login di Supabase.

Impostazione

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

Utilizzo dell'helper di autenticazione

La authenticateWithAppleSupabase funzione gestisce l’intero flusso di autenticazione:

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

Sezione intitolata “Come funziona”

1. Sul Web, Apple Sign-In utilizza un flusso di autenticazione OAuth popup:Inizializzazione
2. : La plugin viene inizializzata con il tuo ID di servizio e l'URL della pagina corrente come URL di reindirizzamentoPopup OAuth
3. : Apre una finestra di popup con la pagina OAuth di Apple: L'utente si autentica con Apple nel 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 helper rileva automaticamente la piattaforma web e configura tutto in modo appropriato.

Note importanti

Configurazione ID Servizio

• Richiede l'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 consentite nel Portale dello Sviluppatore Apple

URL di reindirizzamento

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

ID del Client Supabase

In Supabase, configura il tuo provider Apple con:

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

Se stai utilizzando anche iOS, dovrai fornire sia l'ID App che l'ID Servizio in Supabase nel campo ID Client (separati da virgole).

Aggiorna la Funzione di Aiuto

Quando si utilizza la authenticateWithAppleSupabase funzione di aiuto, tu dovrai aggiornare il clientId per corrispondere all'ID Servizio Apple:

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,
  },
});

Importante

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

Risolvere i Problemi

ID di Servizio non corrispondente

• : Verifica che l'ID di Servizio corrisponda in entrambi il Portale dello Sviluppatore Apple e il tuo : Verify your Service ID matches in both Apple Developer Portal and your code
• : Assicurati che l'URL della tua pagina corrente (con e senza slash finale) sia configurato nel Portale dello Sviluppatore ApplePopup bloccato
• : Controlla le impostazioni del browser - alcuni browser bloccano i popup per impostazione predefinitaDominio non consentito
• : Verifica che il tuo dominio sia aggiunto alle domini consentiti nel Portale dello Sviluppatore AppleRisolvere i Problemi
• Configurazione di Supabase: Verifica che il tuo ID di servizio sia configurato correttamente nei impostazioni del provider Apple di Supabase
• Recensisci il esempio di applicazione 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 Utilizza @capgo/capacitor-social-login per la capacità nativa in Utilizza @capgo/capacitor-social-login, @capgo/capacitor-login per i dettagli di implementazione in @capgo/capacitor-login @capgo/capacitor-passkey per i dettagli di implementazione in @capgo/capacitor-passkey @capgo/capacitor-autenticazione-biometrica-nativa per i dettagli di implementazione in @capgo/capacitor-autenticazione-biometrica-nativa, e Autenticazione a due fattori per i dettagli di implementazione in Autenticazione a due fattori.