Supabase Apple Login sur Android

Prerequisites

Cette guide vous aidera à intégrer Apple Sign-In avec l'authentification Supabase sur Android. Il est supposé que vous avez déjà complété :

• le Supabase Apple Login - Paramètres Généraux.

Important

Apple Sign-In sur Android nécessite un serveur backend car Apple ne fournit pas de support natif Android. Nous utiliserons une fonction Edge Supabase en tant que backend.

Étape 1 : Déployer la fonction Edge Backend

En premier lieu, nous devons déployer la fonction Edge Supabase qui gérera l'appel de rappel Apple OAuth.

1. Navigatez vers votre répertoire de projet Supabase

   cd your-project/supabase

2. Créer la fonction de bord si elle n'existe pas

   supabase functions new apple-signin-callback

3. Copier la fonction de bord code

   La mise en œuvre complète de la fonction edge est disponible dans le app d'exemple.

   - Fonction de bord principale __CAPGO_KEEP_0__

   • supabase/functions/apple-signin-callback/index.ts - Fonction principale d'edge code
   • supabase/functions/apple-signin-callback/deno.json la bibliothèque pour la signature JWT) jose Copier dans le presse-papier

4. Configure la vérification JWT

   L'endpoint de rappel OAuth Apple doit être public (aucune authentification requise) car Apple le redirigera. Mettez à jour votre supabase/config.toml fichier:

   [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"

   Important

   Paramètre verify_jwt = false rend l'endpoint public. Cela est requis car la redirection OAuth d'Apple ne contient pas les en-têtes d'authentification Supabase. L'endpoint valide la flux OAuth lui-même.

5. Déployez la fonction

   supabase functions deploy apple-signin-callback

6. Obtenez l'URL de votre fonction

   Après le déploiement, vous obtiendrez une URL comme :

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

   If you cannot find it, you can do the following:

   1. Ouvrir https://supabase.com/dashboard/project/YOUR_PROJECT_REF/functions
   2. Cliquez sur l' apple-signin-callback URL de la fonction pour la copier.

   Enregistrez cette URL

   Vous aurez besoin de cette URL dans l'étape suivante pour configurer le Portail du développeur Apple.

Étape 2 : Configurer le Portail du développeur Apple

Nous devons maintenant configurer le portail Apple Developer avec l'URL de serveur et obtenir toutes les valeurs requises.

URL de fonction

Assurez-vous d'avoir votre URL de fonction Supabase Edge de l'étape 1 avant de poursuivre. Vous aurez besoin de la pour configurer l'URL de retour dans le portail Apple Developer.

1. Follow the Apple Login Android Setup Guide

   Terminez le guide de configuration de l'authentification Apple Android à :

   • Créez un ID de service
   • Générez une clé privée (.p8 fichier)
   • Obtenez votre ID d'équipe et votre ID de clé
   • Configurez l'URL de retour

2. Définissez l'URL de retour dans le Portail des développeurs Apple

   Lorsque vous configurez l'URL de retour dans le Portail du développeur Apple (étape 6.9 du guide Apple), utilisez l'URL de la fonction Edge Supabase.

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

   Important : Utilisez l'URL de fonction Edge Supabase

   N'Utilisez PAS l'URL de redirection provenant du guide de configuration Apple Login Android. Ce guide utilise une URL de serveur de backend personnalisé. Pour l'intégration Supabase, vous devez utilisez l'URL de votre fonction Edge Supabase à la place.

   Correspondance Exacte Obligatoire

   L'URL de retour doit correspondre exactement exactly ce que vous configurez ici. Apple est très exigeant quant à la correspondance de l'URI de redirection.

3. Collectez toutes les valeurs requises

   Après avoir terminé le guide de configuration Apple, vous devriez avoir :

   • : Votre identifiant de l'équipe d'Apple: Votre ID d'équipe Apple Developer
   • APPLE_KEY_ID: La clé ID du Portail du développeur Apple
   • APPLE_PRIVATE_KEYVotre fichier de clé privée .p8 (doit être encodé en base64)
   • ID DE SERVICE ANDROID: Votre identifiant de service Apple (par exemple, com.example.app.service)
   • BASE_REDIRECT_URL: Votre URL de lien profond (par exemple, capgo-demo-app://path)

   URL de lien profond

   Le BASE_REDIRECT_URL est le schéma de lien profond configuré dans votre AndroidManifest.xmlCeci est où le serveur backend redirigera après l'authentification.

   La valeur de votre lien profond dépend du android:scheme="capgo-demo-app" code. Si vous avez défini android:scheme="capgo-demo-app" dans votre AndroidManifest.xml, alors votre lien profond sera capgo-demo-app://path.

Étape 3 : Définir les secrets de Supabase

Nous devons maintenant configurer les variables d'environnement (secrets) pour la fonction Edge de Supabase.

1. Encodez votre clé privée

   Tout d'abord, encodez votre clé privée Apple (.p8) en base64 :

   base64 -i AuthKey_XXXXX.p8

   Copiez l'ensemble de la sortie (il s'agit d'une seule longue chaîne).

2. Définir les secrets en utilisant 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

   Remplacer les placeholders

   Remplacez toutes les valeurs de placeholder par vos valeurs réelles de l'étape 2.

3. Alternative : Définir des secrets dans le tableau de bord de Supabase

   Si vous préférez utiliser le tableau de bord :

   1. Allez dans votre tableau de bord de projet Supabase
   2. Naviguez vers Fonctions Edge → Paramètres → Secrets
   3. Ajoutez chaque variable de secret avec sa valeur

Configuration de l'application Android

La Guide de configuration de l'authentification Apple Android Déjà couvert la configuration de votre application Android :

• Ajouter le filtre d'intent de lien profond à AndroidManifest.xml
• L'ajout de onNewIntent L'ajout du MainActivity.java

Assurez-vous d'avoir terminé ces étapes avant de poursuivre. Le schéma de lien profond que vous configurez là sera votre BASE_REDIRECT_URL en étape 3.

Étape 4 : Utilisez l'assistant d'authentification

Now you can use the authentication helper in your app code.

Implémentation

La mise en œuvre complète est disponible dans le l'application d'exemple's supabaseAuthUtils.ts fichier.

Utilisation de l'Assistant d'Authentification

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

Mettre à jour la fonctionnalité de l'assistant

Lors de l'utilisation de la authenticateWithAppleSupabase fonctionnalité de l'assistant, vous devez mettre à jour les valeurs suivantes pour les adapter à votre configuration :

1. Mettre à jour redirectUrl - Définissez cette valeur sur votre URL de fonction Edge Supabase :

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

2. Mettre à jour clientId - Fixez-le sur votre ID de service 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

   Remplacer 'your.service.id.here' par votre ID de service Apple réel (la même valeur que vous avez utilisée pour ANDROID_SERVICE_ID étape 3).

Voir le implémentation complète Étape 5 : Tester l'intégration

Section intitulée « Étape 5 : Tester l'intégration »

1. Construirez et exécuter votre application Android

   npx cap sync android
   npx cap run android

2. Testez le flux d'authentification

   • Cliquez sur le bouton “Se connecter avec Apple”.
   • Vous devriez voir la page OAuth Apple dans un navigateur
   • Après l'authentification, vous devriez être redirigé vers votre application
   • Vérifiez les journaux de console pour toute erreur

3. Vérifiez le flux

   Le flux complet devrait être :

   1. L'utilisateur appuie sur « Se connecter avec Apple »
   2. L'application ouvre un navigateur avec OAuth Apple
   3. L'utilisateur se connecte avec Apple
   4. Apple redirige vers : https://your-project-ref.supabase.co/functions/v1/apple-signin-callback
   5. La fonction Edge échange code contre des jetons
   6. La fonction Edge redirige vers : your-app://path?id_token=...&access_token=...
   7. L'application Android reçoit le lien profond et traite le jeton d'identité
   8. L'application se connecte à Supabase avec le jeton d'identité

Aide au dépannage

Si l'authentification échoue :

• L'URI de redirection ne correspond pas: Vérifiez que l'URL de retour dans le Portail des développeurs Apple correspond exactement à APPLE_REDIRECT_URI : Secret
• La liaison profonde ne fonctionne pas: Vérifiez que AndroidManifest.xml le filtre d'intention correspond à votre BASE_REDIRECT_URL
• Les secrets manquent: Verify all secrets are set correctly using supabase secrets list
• Échange de jeton échoue: Check edge function logs in Supabase Dashboard for detailed error messages
• L'application ne reçoit pas de rappel: Assurez onNewIntent est correctement mis en œuvre dans MainActivity
• Vérifiez le application d'exemple code pour référence

Comment ça marche

Sur Android, Apple Sign-In utilise un flux de redirection OAuth :

1. InitialisationLa plugin est initialisée avec votre ID de service et l'URL de redirection de votre serveur.
2. Flux OAuth: Opens a browser/Chrome Custom Tab with Apple’s OAuth page
3. Callback de l'arrière-plan: Apple redirige vers votre fonction Edge Supabase avec une autorisation code
4. Échange de jetonL'edge function échange le code par des jetons à l'aide de l'endpoint de jetons d'Apple.
5. Redirection de lien profond: La fonction Edge redirige vers votre application avec le jeton d'identité
6. Authentification Supabase: L'application reçoit le jeton et s'authentifie auprès de Supabase

Cette flux est nécessaire car Apple ne fournit pas de support natif Android pour Sign in with Apple.

Continuez avec Supabase Apple Login on Android

If vous utilisez Supabase Apple Login sur Android pour planifier l'authentification et les flux de compte, connectez-l’à En utilisant @capgo/capacitor-social-login pour la capacité native dans En utilisant @capgo/capacitor-social-login, @capgo/capacitor-connexion-social pour le détail d'implémentation dans @capgo/capacitor-social-login, @capgo/capacitor-passkey pour le détail d'implémentation dans @capgo/capacitor-passkey, @capgo/capacitor-native-biometrique pour le détail d'implémentation dans @capgo/capacitor-native-biometric, et Deux facteurs d'authentification pour les détails d'implémentation dans l'authentification à deux facteurs.