Supabase Apple Login su Android

Requisiti

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

• il Supabase Apple Login - Configurazione generale.

Importante

L'accesso con Apple su Android richiede un server backend perché Apple non fornisce supporto nativo per Android. Utilizzeremo una funzione di Edge di Supabase come backend.

Passo 1: Distribuisci la Funzione di Edge Backend

In primo luogo, dobbiamo distribuire la Funzione di Edge Supabase che gestirà il callback OAuth Apple.

1. Naviga nella 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

   L'implementazione completa della funzione di edge è disponibile nel esempio app.

   Copia i seguenti file nel tuo progetto:

   • supabase/functions/apple-signin-callback/index.ts - Funzione principale di edge 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 JWT

   L'endpoint di callback OAuth di Apple deve essere pubblico (nessuna autenticazione richiesta) perché Apple lo reindirizzerà. 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 pubblico questo endpoint. Ciò è richiesto perché la redirect OAuth di Apple non include i capi di autenticazione Supabase. L'endpoint verifica il flusso OAuth stesso.

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. Apri https://supabase.com/dashboard/project/YOUR_PROJECT_REF/functions
   2. Clicca su apple-signin-callback l'URL della funzione per copiarlo.

   Salva questa URL

   Avrai bisogno di questa URL nel passaggio successivo per configurare il Portale dello Sviluppatore Apple.

Passo 2: Configura il Portale dello Sviluppatore Apple

Ora abbiamo bisogno di configurare il Portale dello Sviluppatore Apple con l'URL del backend e ottenere tutti i valori richiesti.

URL della funzione

Assicurati di avere il tuo URL della funzione Supabase Edge dal Passo 1 prima di procedere. Avrai bisogno di esso per configurare l'URL di ritorno nel Portale dello Sviluppatore Apple.

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

   Completa il guida di configurazione per l'accesso Apple Android a:

   • Crea un ID del Servizio
   • Genera una chiave privata (file .p8)
   • Ottieni il tuo ID della Squadra e ID della 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 Funzione Edge di Supabase:

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

   Importante: utilizza l'URL della Funzione Edge di Supabase

   Non fare non utilizzare l'URL di reindirizzamento dal guida di configurazione Apple Login per Android. Questa guida utilizza un URL del server backend personalizzato. Per l'integrazione con Supabase, dovete utilizzare il vostro URL della funzione di edge di Supabase invece.

   Richiesta di corrispondenza esatta

   L'URL di ritorno deve corrispondere esattamente a quanto configurate qui. Apple è molto rigoroso sulle corrispondenze degli URI di reindirizzamento.

3. Raccogli tutti i valori richiesti

   Dopo aver completato la guida di configurazione di Apple, dovreste avere:

   • APPLE_TEAM_ID: Il vostro ID di squadra di sviluppatore Apple
   • APPLE_KEY_ID: Il codice chiave dal portale dello sviluppatore Apple
   • APPLE_PRIVATE_KEY: Il tuo file di chiave privata .p8 (che richiede codifica base64)
   • ANDROID_SERVICE_ID: Il tuo ID di servizio Apple (ad esempio, com.example.app.service)
   • BASE_REDIRECT_URL: La tua URL di reindirizzamento profonda (ad esempio, capgo-demo-app://path)

   URL di reindirizzamento profondo

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

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

Passo 3: Imposta i segreti di Supabase

Ora abbiamo bisogno di configurare le variabili di ambiente (secrets) 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'intera uscita (è una singola lunga stringa).

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 placeholder

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

3. Alternativa: Imposta i 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 segreta con il suo valore

Configurazione dell'app Android

Il Guida di configurazione dell'accesso Apple per Android La

• guida di configurazione dell'accesso Apple per Android AndroidManifest.xml
• già copre la configurazione dell'app Android: onNewIntent Aggiungere il filtro di intent dell'URL profondo a MainActivity.java

Aggiungere il manuale di gestione degli intent dell'URL profondo a BASE_REDIRECT_URL in Passo 3.

Passo 4: Utilizza l'helper di autenticazione

Ora puoi utilizzare l'helper di autenticazione nel tuo app code.

Implementazione

La completa implementazione è disponibile nell' esempio app's supabaseAuthUtils.ts file.

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

Aggiorna la Funzione di Aiuto

Quando si utilizza la authenticateWithAppleSupabase funzione di aiuto, è necessario aggiornare i seguenti valori per farli corrispondere alla tua configurazione: Aggiorna

1. - Imposta questo su URL della Funzione Edge di Supabase: redirectUrl Copia nel portapenne

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

2. - Imposta questo sul 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 Android
       redirectUrl: redirectUrl,
     },
   });

   Importante

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

per riferimento. Passo 5: Testa l'Integrazione Sezione intitolata “Passo 5: Testa l'Integrazione”

Costruisci e esegui il tuo app Android

1. Sostituisci con il tuo ID di Servizio Apple reale (lo stesso valore che hai utilizzato per

   npx cap sync android
   npx cap run android

2. Testa il flusso di autenticazione

   • Tocca il pulsante “Accedi con Apple”
   • Dovresti vedere la pagina di autenticazione 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 tocca “Accedi con Apple”
   2. L'app apre un browser con Apple OAuth
   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 con 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 connette a Supabase con il token di identità

Risoluzione dei problemi

Se la connessione non riesce:

• URI di reindirizzamento non corrispondente: Verifica che l'URL di ritorno nel Portale dello Sviluppatore Apple corrisponda esattamente con APPLE_REDIRECT_URI segreto
• Link profondo non funziona: Verifica che AndroidManifest.xml il filtro di intento corrisponde al tuo BASE_REDIRECT_URL
• Segreti mancanti: Verifica che tutti i segreti siano impostati correttamente utilizzando supabase secrets list
• Fallisce l'interscambio di token: Controlla i log dell'edge function nel Dashboard di Supabase per messaggi di errore dettagliati
• L'app non riceve la callback: Assicurati che onNewIntent sia implementato correttamente nella MainActivity
• Rivista l'applicazione di esempio __CAPGO_KEEP_0__ example app code Come Funziona

How It Works

Su Android, Apple Sign-In utilizza un flusso di reindirizzamento OAuth:

1. Inizializzazione: Il plugin viene inizializzato con il tuo ID Servizio e l'URL di reindirizzamento del backend
2. Flusso OAuth: Si apre una finestra del browser/Tab personalizzato di Chrome con la pagina OAuth di Apple
3. Callback del Backend: Apple reindirizza al tuo Funzione di Edge Supabase con un'autorizzazione code
4. Scambio di Token: La funzione di edge scambia il code per token utilizzando l'endpoint di token di Apple
5. Reindirizzamento del Link Profondo: La funzione di edge reindirizza nuovamente al tuo app con il token di identità
6. Autenticazione Supabase: L'app riceve il token e si iscrive a Supabase

Questa procedura è necessaria perché Apple non fornisce supporto nativo per Android per il Sign in with Apple.