Supabase Apple Login sur Android

Prérequis

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

• le Supabase Apple Login - Configuration générale.

Important

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

Étape 1 : Déployez la fonction Edge Backend

Tout d’abord, nous devons déployer la fonction Edge Supabase qui gérera l’appel de rappel OAuth d’Apple.

1. Naviguez jusqu'à votre répertoire de projet Supabase

   cd your-project/supabase

2. Créer la fonction Edge Fenêtre de terminal

   supabase functions new apple-signin-callback

3. Copy the edge function code

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

   Copiez les fichiers suivants dans votre projet :

   • supabase/functions/apple-signin-callback/index.ts - Fonction d'edge principale code
   • supabase/functions/apple-signin-callback/deno.json - Carte d'importation pour les dépendances (inclut jose bibliothèque pour la signature JWT)

4. Configurer 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

   Configure verify_jwt = false rend cette point de terminaison public. Cela est nécessaire car la redirection OAuth d'Apple ne contient pas d'en-têtes d'authentification Supabase. Le point de terminaison valide le flux OAuth lui-même.

5. Déployez la fonction

   supabase functions deploy apple-signin-callback

6. Obtenez votre URL de fonction

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

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

   Si vous ne la trouvez pas, vous pouvez faire les choses suivantes :

   1. Ouvrez https://supabase.com/dashboard/project/YOUR_PROJECT_REF/functions
   2. Cliquez sur le 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 du développeur Apple avec l'URL de serveur et obtenir toutes les valeurs requises.

URL de la fonction

Assurez-vous d'avoir votre URL de fonction Supabase Edge de l'étape 1 avant de passer à l'étape suivante. Vous aurez besoin de celle-ci pour configurer l'URL de retour dans le Portail du développeur Apple.

1. Suivez le Guide de configuration de l'authentification Apple pour Android

   Terminez la procédure Guide de configuration Apple Login Android à :

   • Créer un ID de service
   • Générer une clé privée (fichier .p8)
   • Obtenir votre ID d'équipe et votre ID de clé
   • Configurer l'URL de retour

2. Définir l'URL de retour dans le portail Apple Developer

   Lors de la configuration de l'URL de retour dans le portail Apple Developer (étape 6.9 du guide Apple), utilisez l'URL de votre fonction Edge Supabase :

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

   Important : Utilisez l'URL de la fonction Edge Supabase

   N'oubliez pas de Guide de configuration Apple Login Android. Ce guide utilise une URL de serveur backend personnalisée. Pour l'intégration Supabase, vous devez utiliser votre URL de fonction Edge Supabase au lieu de celle.

   Exact Match Requis

   L'URL de retour doit correspondre exactement à ce que vous configurez ici. Apple est très exigeant en matière de correspondance des URI de redirection.

3. Collectez toutes les valeurs requises

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

   • ID DÉVELOPPEUR APPLE: Votre identifiant d'équipe Apple Developer
   • APPLE_KEY_ID: L'ID de la clé provenant du portail Apple Developer
   • APPLE_PRIVATE_KEY: Votre fichier de clé privée .p8 (doit être encodé en base64)
   • ANDROID_SERVICE_ID: Votre ID de service Apple (par exemple, com.example.app.service)
   • BASE_REDIRECT_URL: Votre URL de lien profond (par exemple, capgo-demo-app://path)

   Deep Link URL

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

   La valeur de votre lien profond dépend de android:scheme="capgo-demo-app" code. Si vous avez configuré 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 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 la sortie entière (ce n'est qu'une seule longue chaîne).

2. Définir des secrets à l'aide de 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 valeurs de remplacement

   Remplacez toutes les valeurs de remplacement 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 le tableau de bord de votre projet Supabase
   2. Naviguer vers Fonctions de bord Edge → Paramètres → Secrets
   3. Ajoutez chaque variable de secret avec sa valeur

Configuration de l'application Android

Le Guide de configuration de l'authentification Apple Android Le guide de configuration de l'authentification Apple Android déjà couvre la configuration de votre application Android :

• Ajout du filtre d'intent de lien profond à AndroidManifest.xml
• Ajout du onNewIntent gérant à MainActivity.java

Veuillez vous assurer d'avoir complété ces étapes avant de poursuivre. Le schéma de lien profond que vous configurez là-bas sera votre BASE_REDIRECT_URL en Étape 3.

Étape 4 : Utilisez l'Aideur d'Authentification

Vous pouvez maintenant utiliser l'aideur d'authentification dans votre application code.

Mise en œuvre

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

Section intitulée “Utilisation de l'Aideur 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 fonction d'aide

Lorsque vous utilisez la authenticateWithAppleSupabase fonction d'aide, vous devez mettre à jour les valeurs suivantes pour qu'elles correspondent à votre configuration :

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

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

2. Mettre à jour clientId - Définissez cette valeur 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 à l'étape 3).

Voir la mise en œuvre complète en tant que référence.

Étape 5 : Tester l'intégration

1. Construire et exécuter votre application Android

   npx cap sync android
   npx cap run android

2. Tester le flux d'authentification

   • Appuyez sur le bouton « Se connecter avec Apple »
   • Vous devriez voir la page d'authentification Apple dans un navigateur
   • Après avoir authentifié, vous devriez être redirigé vers votre application
   • Vérifiez les journaux de console pour toute erreur

3. Vérifier le flux

   Le flux complet devrait être :

   1. L'utilisateur appuie sur « Se connecter avec Apple »
   2. L'application ouvre un navigateur avec l'authentification Apple
   3. L'utilisateur s'authentifie avec Apple
   4. Apple redirige vers : https://your-project-ref.supabase.co/functions/v1/apple-signin-callback
   5. La fonction Edge échange code par 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 s'inscrit auprès de Supabase avec le jeton d'identité

Résolution des problèmes

Si l'authentification échoue :

• URI de redirection non conforme: Vérifiez l'URL de retour dans le portail Apple Developer pour qu'elle corresponde exactement avec APPLE_REDIRECT_URI secret
• Le lien profond ne fonctionne pas: Vérifiez que AndroidManifest.xml intent filter correspond à votre BASE_REDIRECT_URL
• Manque de secrets: Vérifiez que tous les secrets sont correctement configurés à l'aide de supabase secrets list
• Échec de l'échange de jeton: Vérifiez les journaux de fonction d'angle dans le tableau de bord Supabase pour les messages d'erreur détaillés
• L'application ne reçoit pas de rappel: Assurez-vous que onNewIntent est correctement implémenté dans MainActivity
• Examinez l'application d'exemple __CAPGO_KEEP_0__ example app code for reference

Comment ça marche

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

1. Initialisation : Le plugin est initialisé avec votre ID de service et l'URL de redirection de votre serveur
2. Flux OAuth : Ouvre une fenêtre de navigateur ou une fenêtre personnalisée de Chrome avec la page OAuth d'Apple
3. Appel de la fonctionnalité backend : Apple redirige vers votre fonctionnalité Edge Supabase avec une autorisation code
4. Échange de jetons : La fonctionnalité Edge échange la code contre des jetons en utilisant 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 se connecte à Supabase

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

Continuez de Supabase Apple Login on Android

Si vous utilisez Supabase Apple Login on Android pour planifier l'authentification et les flux de compte, connectez-le avec En utilisant @capgo/capacitor-social-login pour la capacité native dans En utilisant @capgo/capacitor-social-login, @capgo/capacitor-social-login pour les détails d'implémentation dans @capgo/capacitor-login-social @capgo/capacitor-passkey pour les détails d'implémentation dans @capgo/capacitor-passkey @capgo/capacitor-biométrique-native pour les détails d'implémentation dans @capgo/capacitor-biométrique-native, et L'authentification à deux facteurs pour les détails d'implémentation dans L'authentification à deux facteurs