Accedi a Supabase con Apple su Web

Requisiti

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.

Implementazione

La completa implementazione è disponibile nel file dell'applicazione di esempio. Questa guida spiega i concetti chiave e come utilizzarla. supabaseAuthUtils.ts Utilizzando l'Helper di Autenticazione

Sezione intitolata “Utilizzando l'Helper di Autenticazione”

funzione gestisce l'intero flusso di autenticazione: authenticateWithAppleSupabase Copia nel portapenne

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”

Inizializzazione

1. Utilizzando l'helper di autenticazione per il flusso di autenticazione: Il plugin viene inizializzato con il tuo ID Servizio e l'URL della pagina corrente come URL di reindirizzamento
2. OAuth Popup: Apre una finestra di popup con la pagina di autenticazione 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 helper rileva automaticamente il web platform e configura tutto in modo appropriato.

Note Importanti

Configurazione dell'ID del Servizio

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

URL di reindirizzamento

• Su web, l'URL di reindirizzamento viene impostato automaticamente su window.location.href (URL della pagina corrente)
• Ciò deve corrispondere a una delle URL di ritorno configurate 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, 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, dovrai fornire sia l'ID dell'app che l'ID del servizio in campo ID del client di Supabase (separati da virgole).

Aggiorna la Funzione di Aiuto

Quando si utilizza la authenticateWithAppleSupabase funzione di aiuto, dovrai aggiornare il clientId per adattarlo al tuo ID del 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 Servizio Apple reale (lo stesso valore che hai configurato nel Portale dello Sviluppatore Apple).

Risoluzione dei problemi

Mancanza di corrispondenza dell'ID Servizio

• : Verifica che l'ID Servizio corrisponda in entrambi il Portale dello Sviluppatore Apple e il tuo __CAPGO_KEEP_0__: 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 AppleService ID mismatch
• Blocco popup: 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 degli sviluppatori Apple
• Configurazione Supabase: Verifica che il tuo ID Servizio sia configurato correttamente nei impostazioni del provider Apple di Supabase
• Recensisci il esempio di app code per riferimento