Supabase Apple Login on Android

Requisiti preliminari

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

• il Supabase Apple Login - Configurazione generale.

Importante

L'integrazione di Apple Sign-In su Android richiede un server backend poiché Apple non fornisce supporto nativo per Android. Utilizzeremo una Funzione Edge Supabase come backend.

Passo 1: Distribuisci la Funzione Edge Backend

Innanzitutto, dobbiamo distribuire la Funzione Edge Supabase che gestirà il callback OAuth Apple.

1. Accedi alla directory del tuo progetto Supabase

   cd your-project/supabase

2. Crea la funzione di edge (se non esiste)

   supabase functions new apple-signin-callback

3. Copia la funzione di edge code

   La completa implementazione della funzione di edge è disponibile nell' esempio di applicazione.

   Copia i seguenti file nel tuo progetto:

   • supabase/functions/apple-signin-callback/index.ts - Funzione di edge principale code
   • supabase/functions/apple-signin-callback/deno.json - Mappa di importazione per le dipendenze (include jose libreria per la firma JWT)

4. Configura la verifica del JWT

   L'endpoint di callback OAuth di Apple deve essere pubblico (nessuna autenticazione richiesta) perché Apple lo redirigerà. Aggiorna il tuo supabase/config.toml file:

   [functions.apple-signin-callback]
   enabled = true
   verify_jwt = false  # Important: Set to false for public OAuth callback
   import_map = "./functions/apple-signin-callback/deno.json"
   entrypoint = "./functions/apple-signin-callback/index.ts"

   Importante

   Impostazione verify_jwt = false rende questo endpoint pubblico. Ciò è richiesto perché la redirect OAuth di Apple non include i token di autenticazione Supabase. L'endpoint verifica il flusso OAuth di per sé.

5. Distribuisci la funzione

   supabase functions deploy apple-signin-callback

6. Ottieni l'URL della tua funzione

   Dopo la distribuzione, otterrai un URL come:

   https://your-project-ref.supabase.co/functions/v1/apple-signin-callback

   Se non riesci a trovarlo, puoi fare le seguenti cose:

   1. Apre https://supabase.com/dashboard/project/YOUR_PROJECT_REF/functions
   2. Clicca sul apple-signin-callback URL della funzione per copiarlo.

   Salva questo URL

   Hai bisogno di questo URL nel prossimo passo per configurare il Portale dello Sviluppatore Apple.

Passo 2: Configura il Portale dello Sviluppatore Apple

Now dobbiamo configurare il portale degli sviluppatori Apple con l'URL del backend e ottenere tutti i valori richiesti.

URL della funzione

Assicurati di avere l'URL della tua funzione Supabase Edge dal Passo 1 prima di procedere. Avrai bisogno di esso per configurare l'URL di ritorno nel portale degli sviluppatori Apple.

1. Segui la Guida di configurazione per l'accesso Apple Android

   Completa il guida di configurazione dell'accesso Apple Android a:

   • Creare un ID di servizio
   • Genera una chiave privata (.p8 file)
   • Otterra il tuo ID di squadra e ID chiave
   • Configura l'URL di ritorno

2. Imposta l'URL di ritorno nel portale dello sviluppatore Apple

   Quando si configura l'URL di ritorno nel portale dello sviluppatore Apple (passaggio 6.9 della guida Apple), utilizza l'URL della tua funzione Edge Supabase:

   https://your-project-ref.supabase.co/functions/v1/apple-signin-callback

   Importante: utilizza l'URL della tua funzione Edge Supabase

   Non utilizzare l'URL di reindirizzamento dal guida di configurazione di Apple Login per Android. Questa guida utilizza un URL di server backend personalizzato. Per l'integrazione di Supabase, dovrai utilizzare invece l'URL della tua funzione Edge Supabase.

   Richiesta di corrispondenza esatta

   The Return URL deve corrispondere esattamente a quanto configurato qui. Apple è molto rigoroso sul matching degli URI di reindirizzamento. esattamente Apple è molto rigoroso sul matching degli URI di reindirizzamento.

3. Raccogli tutti i valori richiesti

   Dopo aver completato la guida di configurazione per Apple, dovresti avere:

   • APPLE_TEAM_ID: Il tuo ID di team di sviluppatore Apple
   • APPLE_KEY_ID: L'ID chiave dal portale di sviluppatore Apple
   • APPLE_PRIVATE_KEY: Il tuo file di chiave privata .p8 (che deve essere codificato in base64)
   • ANDROID_SERVICE_ID: Il tuo ID del servizio Apple (ad esempio, com.example.app.service)
   • BASE_REDIRECT_URL: L'URL di reindirizzamento profondo (ad esempio, capgo-demo-app://path)

   Deep Link URL

   Questo è BASE_REDIRECT_URL è lo schema di reindirizzamento profondo configurato nel tuo AndroidManifest.xml. Questo è dove il backend reindirizzerà dopo l'autenticazione.

   Il valore del tuo reindirizzamento profondo dipende dal android:scheme="capgo-demo-app" code. Se hai impostato android:scheme="capgo-demo-app" nel tuo AndroidManifest.xml, allora il tuo reindirizzamento profondo sarà capgo-demo-app://path.

Esegui passo 3: Imposta i segreti di Supabase

Ora abbiamo bisogno di configurare le variabili di ambiente (segreti) per la funzione Edge di Supabase.

1. Codifica la tua chiave privata

   In primo luogo, codifica la tua chiave privata Apple (.p8 file) in base64:

   base64 -i AuthKey_XXXXX.p8

   Copia l'intero output (è una stringa lunga e unica).

2. Imposta i segreti utilizzando Supabase CLI

   supabase secrets set APPLE_TEAM_ID=your_team_id
   supabase secrets set APPLE_KEY_ID=your_key_id
   supabase secrets set APPLE_PRIVATE_KEY=your_base64_encoded_key
   supabase secrets set ANDROID_SERVICE_ID=your.service.id
   supabase secrets set BASE_REDIRECT_URL=your-app://path
   supabase secrets set APPLE_REDIRECT_URI=https://your-project-ref.supabase.co/functions/v1/apple-signin-callback

   Sostituisci i valori dei placeholder

   Sostituisci tutti i valori dei placeholder con i tuoi valori effettivi dal passo 2.

3. Alternativa: Imposta segreti nel Dashboard di Supabase

   Se preferisci utilizzare il dashboard:

   1. Vai al tuo dashboard del progetto Supabase
   2. Naviga a Funzioni di Edge → Impostazioni → Segreti
   3. Aggiungi ogni variabile segreto con il suo valore

Configurazione dell'app Android

The Apple Login Android Setup guide La guida di configurazione per l'accesso Apple su Android già copre la configurazione della tua app Android:

• Aggiungere il filtro di intent per collegamento profondo a AndroidManifest.xml
• Aggiungere il onNewIntent manipolatore a MainActivity.java

Assicurati di aver completato questi passaggi prima di procedere. Lo schema di collegamento profondo che configuri lì sarà il tuo BASE_REDIRECT_URL in Passo 3.

Passo 4: Utilizza l'helper di autenticazione

Ora puoi utilizzare l'helper di autenticazione nella tua app code.

Eseguimento

La completa esecuzione è disponibile nel file dell'applicazione di esempio. supabaseAuthUtils.ts Utilizzo dell'Helper di Autenticazione

Sottosezione intitolata “Utilizzo dell'Helper 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);
}

Sottosezione intitolata “Aggiorna la Funzione dell'Helper”

funzione dell'helper, si deve authenticateWithAppleSupabase __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ Aggiorna i seguenti valori per adattarli alle tue impostazioni:

1. Aggiorna redirectUrl - Imposta questo valore con l'URL della tua Funzione Edge Supabase:

   const redirectUrl = platform === 'android'
     ? 'https://your-project-ref.supabase.co/functions/v1/apple-signin-callback'
     : undefined;

2. Aggiorna clientId - Imposta questo valore con il 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 Android
       redirectUrl: redirectUrl,
     },
   });

   Importante

   Sostituisci 'your.service.id.here' con il tuo ID Servizio Apple reale (lo stesso valore che hai utilizzato per ANDROID_SERVICE_ID in Passo 3).

Vedi l' implementazione completa per riferimento.

Passo 5: Testa l'integrazione

1. Costruisci e esegui la tua app Android

   npx cap sync android
   npx cap run android

2. Testa il flusso di autenticazione

   • Tocca il pulsante “Accedi con Apple”
   • Dovresti vedere la pagina OAuth di Apple in un browser
   • Dopo l'autenticazione, dovresti essere reindirizzato nuovamente alla tua app
   • Controlla i registri del console per eventuali errori

3. Verifica il flusso

   Il flusso completo dovrebbe essere:

   1. L'utente premere su “Accedi con Apple”
   2. L'app apre il browser con OAuth Apple
   3. L'utente si autentica con Apple
   4. Apple reindirizza a: https://your-project-ref.supabase.co/functions/v1/apple-signin-callback
   5. La funzione Edge scambia code per token
   6. La funzione Edge reindirizza a: your-app://path?id_token=...&access_token=...
   7. L'app Android riceve il link profondo e elabora il token di identità
   8. L'app si iscrive a Supabase con il token di identità

Risoluzione dei problemi

Se la autenticazione fallisce:

• URI di reindirizzamento non corrispondente: Verifica che l'URL di ritorno nel Portale dello sviluppatore Apple corrisponda esattamente con APPLE_REDIRECT_URI segreto
• Deep link non funziona: Assicurati che AndroidManifest.xml filtro di intento corrisponda a quello del tuo BASE_REDIRECT_URL
• Segreti mancanti: Verifica che tutti i segreti siano impostati correttamente utilizzando supabase secrets list
• Fallimento dell'interscambio di token: Controlla i log della funzione di edge nel Dashboard di Supabase per messaggi di errore dettagliati
• L'app non riceve callback: Assicurati onNewIntent sia implementato correttamente in MainActivity
• Revisiona l'applicazione di esempio __CAPGO_KEEP_0__ example app code Come Funziona

Sottosezione intitolata “Come Funziona”

Inizializzazione

1. : Il plugin viene inizializzato con il tuo ID Servizio e l'URL di reindirizzamento del backendFlusso OAuth
2. Flusso OAuth: Apre una finestra del browser/Chrome Custom Tab con la pagina di Apple per l'autenticazione OAuth
3. Callback del backend: Apple reindirizza alla tua Funzione Edge di Supabase con un'autorizzazione code
4. Scambio di token: La funzione edge scambia il code per token utilizzando l'endpoint di token di Apple
5. Ridirezione del link profondo: La funzione edge reindirizza nuovamente alla tua app con il token di identità
6. Autenticazione di Supabase: L'app riceve il token e si autentica a Supabase

Questa sequenza di operazioni è necessaria perché Apple non fornisce supporto nativo per Android per l'accesso con l'ID Apple.

Continua da Supabase Apple Login on Android

If you are using Supabase Apple Login su Android per pianificare l'autenticazione e le flussi di account, connettilo con Usando @capgo/capacitor-login-social per la capacità nativa in Usando @capgo/capacitor-login-social, @capgo/capacitor-login-social per il dettaglio di implementazione in @capgo/capacitor-login-social, @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 i dettagli di implementazione in due fattori di autenticazione.