Accesso Apple a Supabase su Web

Prerequisites

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 Supabase.

Il contenuto

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

Sottosezione intitolata “Utilizzo dell'aiuto di autenticazione”

The authenticateWithAppleSupabase la 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

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

1. Inizializzazione: La plugin viene inizializzata con il tuo ID di servizio e l'URL della pagina corrente come URL di reindirizzamento
2. Popup OAuth: Si apre una finestra di popup con la pagina OAuth di Apple
3. Autenticazione dell'utente: L'utente si autentica con Apple nella finestra di 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 la piattaforma web e configura tutto in modo appropriato.

Nota importante

Sezione intitolata “Configurazione ID Servizio”

• Richiede il tuo ID di servizio Apple (lo stesso di Android)
• Assicurati di aver aggiunto il tuo dominio alle domini consentiti nel Portale dello Sviluppatore Apple
• Assicurati di aver aggiunto il tuo dominio alle domande 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
• Assicurarsi che sia configurato 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 di Servizio Apple (ad esempio, com.example.app.service)

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

Aggiorna la Funzione di Aiuto

Quando si utilizza la authenticateWithAppleSupabase funzione di aiuto, tu devi aggiornare il clientId per corrispondere al tuo 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,
  },
});

Important

Importante 'your.service.id.here' con il tuo ID Apple effettivo (lo stesso valore che hai configurato nel portale dello sviluppatore Apple).

Risolvere i problemi

Se l'autenticazione fallisce:

• Disallineamento ID del servizioVerifica 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 degli sviluppatori Apple
• Popup bloccato: Check browser settings - some browsers block popups by default
• Domino non consentito: Verifica che il tuo dominio sia aggiunto alle domini consentiti nel Portale degli sviluppatori Apple
• Configurazione SupabaseVerifica che il tuo ID Servizio sia configurato correttamente nei impostazioni del provider Apple di Supabase
• Rivedi il esempio di applicazione code per riferimento

Continua con Supabase Apple Login on Web

Se stai utilizzando Accesso al Login Apple su Supabase 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 sociale per i dettagli di implementazione in @capgo/capacitor-social-login, @capgo/capacitor-chiave di pass Note: I've kept the placeholders as they are, as per the instructions. per i dettagli di implementazione in @capgo/capacitor-passkey, @capgo/capacitor-autenticazione-biometrica 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.