Supabase Apple Login su Android

Requisiti

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

• il Login Apple Supabase - Configurazione di base.

Importante

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

Passo 1: Distribuisci la Funzione Edge Backend

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

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

   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 - Biblioteca per la firma JWT)

4. - Configura la verifica JWT

   - L'endpoint di callback OAuth Apple deve essere pubblico (non richiede autenticazione) 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 - Imposta questa endpoint pubblico. Ciò è richiesto perché la reindirizzamento 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, riceverai un URL del tipo:

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

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

   1. Apri 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 dobbiamo 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 del servizio
   • Genera una chiave privata (.p8 file)
   • Ottieni l'ID del tuo Team e l'ID della tua 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 Apple Login Android. Questa guida utilizza un URL di server backend personalizzato. Per l'integrazione con Supabase, devi utilizzare l'URL della tua Funzione Edge Supabase al suo posto.

   Ecco il Match Esatto Richiesto

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

3. Raccogli tutti i valori richiesti

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

   • APPLE_TEAM_ID: Il tuo ID di Team di sviluppatore Apple
   • APPLE_KEY_ID: L'ID della chiave dal Portale di sviluppatore Apple
   • APPLE_PRIVATE_KEY: Il tuo file di chiave privata .p8 (che deve essere codificato in base64)
   • ID del servizio ANDROID: Il tuo ID di servizio Apple (ad esempio, com.example.app.service)
   • URL di reindirizzamento BASE: La tua URL di reindirizzamento profonda (ad esempio, capgo-demo-app://path)

   La

   è lo schema di reindirizzamento profondo configurato nel tuo BASE_REDIRECT_URL Questo è dove il backend reindirizzerà dopo l'autenticazione. AndroidManifest.xmlIl valore della tua URL di reindirizzamento profonda dipende dal tuo

   Se hai impostato android:scheme="capgo-demo-app" code. If you have set android:scheme="capgo-demo-app" In your AndroidManifest.xml, quindi il tuo link 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

   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 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 segreto con il suo valore

Configurazione dell'app Android

Il Guida di configurazione di Apple Login per Android è già coperto la configurazione dell'app Android:

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

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

Passo 4: Utilizza l'aiuto di autenticazione

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

Implementazione

La completa implementazione è disponibile nel file dell'applicazione di esempio. File dell'applicazione di esempio. supabaseAuthUtils.ts Utilizzo dell'Assistente di Autenticazione

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

Sezione intitolata “Aggiorna la Funzione di Aiuto”

Implementazione authenticateWithAppleSupabase funzione di aiuto, tu devi aggiornare i seguenti valori per adattarli alla tua configurazione:

1. Aggiorna redirectUrl - Imposta questo al 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 - Imposta questo 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 Android
       redirectUrl: redirectUrl,
     },
   });

   Importante

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

Vedi il complete implementation per riferimento.

Step 5: Test the Integration

1. Costruisci e esegui il tuo app Android

   npx cap sync android
   npx cap run android

2. Testa il flusso di autenticazione

   • Tocca il pulsante “Accedi con Apple”
   • Vorresti 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 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. 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. App si connette a Supabase con il token di identità

Risoluzione dei problemi

Se l'autenticazione fallisce:

• Discrepanza tra l'URI di reindirizzamentoVerifica che l'URL di ritorno nel portale dello sviluppatore Apple corrisponda esattamente con APPLE_REDIRECT_URI Segreto
• Deep link non funziona: Controlla che AndroidManifest.xml l'filtro di intento corrisponda al tuo BASE_REDIRECT_URL
• Segreti mancanti: Verifica che tutti i segreti siano impostati correttamente utilizzando supabase secrets list
• Scambio di token fallisce: Controlla i registri dell'edge function nel Dashboard 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

contesto":"Pagina/Area: Capgo Builder / prodotto di costruzione cloud nativa. Ruolo: Intestazione di sezione o pagina. Chiave di messaggio `native_build_how_it_works_title` (Titolo di costruzione nativa Come Funziona). | Pagina/Area: Sezione di homepage problema/soluzione. Ruolo: Etichetta di UI breve o elemento di navigazione. Visto in: pagina premium-support.astro. Chiave di messaggio `ps_how_it_works` (Ps Come Funziona). | Pagina/Area: Pagina di aggiornamenti in tempo reale. Ruolo: Intestazione di sezione o pagina. Visto in: pagina live-update.astro. Chiave di messaggio `live_update_how_it_works_title` (Titolo di aggiornamento in tempo reale Come Funziona)."

Sul sistema 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 backend
2. Flusso OAuth: Apre una finestra del browser/Tab personalizzato di Chrome con la pagina OAuth di Apple
3. Callback Backend: Apple reindirizza al tuo Funzione Edge Supabase con un'autorizzazione code
4. Scambio Token: La funzione edge scambia il code per token utilizzando l'endpoint token di Apple
5. Reindirizzamento Link Profondo: La funzione edge reindirizza nuovamente al tuo app con il token di identità
6. Autenticazione Supabase: L'app riceve il token e si connette a Supabase

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

Continua da Supabase Apple Login su Android

Se stai utilizzando Supabase Apple Login su Android 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-social-login per il dettaglio di implementazione in @capgo/capacitor-social-login @capgo/capacitor-passkey per il dettaglio di implementazione in @capgo/capacitor-passkey @capgo/capacitor-native-biometric 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.