Supabase Apple Login su Android

Prerequisites

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

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

Passo 1: Distribuisci la Funzione Edge Backend

Prima di tutto, dobbiamo distribuire la Funzione Edge Supabase che gestirà il callback OAuth Apple.

1. Naviga nel tuo progetto Supabase directory

   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 funzione di edge completa è disponibile nel example app.

   - Funzione principale di edge __CAPGO_KEEP_0__

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

4. Configura la verifica JWT

   L'endpoint di callback OAuth 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 questo endpoint pubblico. Ciò è richiesto perché la reindirizzamento OAuth di Apple non include i token 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, riceverai un URL come:

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

   Se non riesci a trovarlo, puoi provare le seguenti azioni:

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

   Salva questo URL

   Avrai bisogno di questo 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 l'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 per:

   • Creare un ID di servizio
   • Genera una chiave privata (.p8 file)
   • Otterrai l'ID del team e l'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 (passo 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 Apple Login Android. Questa guida utilizza un URL di backend server personalizzato. Per l'integrazione con Supabase, devi utilizzare l'URL della tua funzione Edge Supabase al posto.

   Richiesta di corrispondenza esatta

   La URL di ritorno deve corrispondere esattamente a quanto configurato 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, dovresti avere:

   • ID del Team Apple: Il tuo ID di team di sviluppatore Apple
   • ID DELLA CHIAVE APPLE: L'ID chiave dal portale di sviluppatore Apple
   • Chiave privata Apple: Il tuo file di chiave privata .p8 (deve essere codificato in base64)
   • ID del servizio ANDROID: Il tuo ID del servizio Apple (ad esempio, com.example.app.service)
   • : L'URL di reindirizzamento profonda (ad esempio,URL di reindirizzamento profonda capgo-demo-app://path)

   URL di Link Profondo

   The BASE_REDIRECT_URL . Questo è dove il backend reindirizzerà dopo l'autenticazione. AndroidManifest.xmlIl valore della tua reindirizzamento profonda dipende dal

   Il valore del tuo link profondo dipende dal android:scheme="capgo-demo-app" code. Se hai impostato android:scheme="capgo-demo-app" nella tua AndroidManifest.xml, quindi 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 (segreti) per la funzione Edge di Supabase.

1. Codifica la tua chiave privata

   Prima, codifica la tua chiave privata Apple (.p8 file) in base64:

   base64 -i AuthKey_XXXXX.p8

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

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 di 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 alla dashboard del tuo progetto Supabase
   2. Naviga a Funzioni di Edge → Impostazioni → Segreti
   3. Aggiungi ogni variabile segreto con il suo valore

Configurazione dell'app Android

La Guida di configurazione per il login Apple Android è già coperto la configurazione dell'app Android:

• Aggiungere il filtro di intento di link profondo a AndroidManifest.xml
• Aggiungere il onNewIntent gestore a MainActivity.java

Assicurati di aver completato questi passaggi prima di procedere. Lo schema del 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'aiuto di autenticazione nel tuo app code.

Esecuzione

L'implementazione completa è disponibile nel file dell'applicazione di esempio. supabaseAuthUtils.ts file.

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

Aggiorna la funzione helper

Quando si utilizza la authenticateWithAppleSupabase funzione helper, tu deve aggiornare i seguenti valori per adattarli alla vostra configurazione:

1. Aggiorna redirectUrl - Impostalo sul tuo URL della funzione Supabase Edge:

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

2. Aggiorna clientId - Impostalo sul 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,
     },
   });

   Important

   Replace 'your.service.id.here' con il tuo ID Apple effettivo (lo stesso valore che hai utilizzato per) ANDROID_SERVICE_ID Step 3).

Vedi il Esecuzione completa per riferimento.

Step 5: Testa l'Integrazione

1. Sezione intitolata “Step 5: Testa l'Integrazione”

   npx cap sync android
   npx cap run android

2. Verifica il flusso di autenticazione

   • Tocca il pulsante “Accedi con Apple”
   • Vedresti 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 clicca 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. L'edge funzione scambia code per token
   6. L'edge funzione 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à

Risolvere i problemi

Se l'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
• La deep link non funziona: Assicurati che AndroidManifest.xml il filtro di intento corrisponda al tuo BASE_REDIRECT_URL
• Segreti mancanti: Verify all secrets are set correctly using supabase secrets list
• Fallisce l'interscambio di tokenControlla i log delle funzioni edge nel Dashboard Supabase per messaggi di errore dettagliati.
• L'app non riceve la callback: Assicurati onNewIntent che sia implementato correttamente nella MainActivity
• Valuta il app esempio code Come Funziona

Come Funziona

On Android, Apple Sign-In uses an OAuth redirect flow:

1. InitializationIl plugin viene inizializzato con il tuo ID Servizio e l'URL di reindirizzamento del backend
2. OAuth Flow: Opens a browser/Chrome Custom Tab with Apple’s OAuth page
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

Questo flusso è necessario perché Apple non fornisce supporto nativo per Android per l'accesso con Apple

Continua con l'accesso Apple di Supabase su Android

Se sei in uso a Supabase Apple Login su Android per pianificare l'autenticazione e le flussi di account, connettilo con Utilizza @capgo/capacitor-login-social per la capacità nativa in Utilizza @capgo/capacitor-login-social Utilizza @capgo/capacitor-login-social per il dettaglio di implementazione in @capgo/capacitor-login-social Utilizza @capgo/capacitor-passkey per il dettaglio di implementazione in @capgo/capacitor-passkey Utilizza @capgo/capacitor-biometrica-nativa per il dettaglio di implementazione in @capgo/capacitor-biometrica-nativa Autenticazione a due fattori per il dettaglio di implementazione in Autenticazione a due fattori.