Supabase Apple Login sur Android

Prérequis

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

• le Paramètres de configuration général de l'authentification Apple Supabase.

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éployez la fonction Edge Backend

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

1. Naviguez jusqu'à votre dossier de projet Supabase

   cd your-project/supabase

2. Créez la fonction de bord (si elle n'existe pas)

   supabase functions new apple-signin-callback

3. Copiez la fonction de bord code

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

   Copiez les fichiers suivants dans votre projet :

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

4. Configurez la vérification JWT

   L'endpoint de rappel OAuth d'Apple doit être public (aucune authentication requise) car Apple le redirigera vers lui. 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 cet endpoint public. Cela est requis car la redirection OAuth d'Apple ne contient pas les en-têtes d'authentication 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

   Si vous ne pouvez pas le trouver, vous pouvez faire les choses suivantes :

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

   Sauvegardez cette URL

   Vous aurez besoin de cette URL dans l'étape suivante lors de la configuration du Portail des développeurs Apple.

Étape 2 : Configurer le Portail des développeurs Apple

Maintenant, nous devons configurer le Portail des développeurs Apple avec l'URL de l'arrière-plan et obtenir toutes les valeurs requises.

URL de fonction

Vérifiez que vous avez 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 du développeur Apple.

1. Suivez le guide de configuration d'Apple Login pour Android

   Completer le guide de configuration d'Apple Login pour Android à :

   • Créer 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éfinir l'URL de retour dans le Portail du développeur Apple

   Lors de la configuration de l'URL de retour dans le Portail du développeur Apple (étape 6.9 du guide Apple), utilisez votre URL de 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 de l'authentification 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-ci. Correspondance exacte requise

   L'URL de retour doit correspondre

   Correspondance exacte requise exactement ce que vous configurez ici. Apple est très exigeante en ce qui concerne l'URI de redirection. Collectez toutes les valeurs requises

3. Après avoir terminé la guide de configuration Apple, vous devriez avoir :

   APPLE_TEAM_ID

   • : Votre identifiant de l'équipe de développeur AppleAPPLE_KEY_ID
   • : L'ID de clé provenant du portail du développeur AppleAPPLE_PRIVATE_KEY
   • : Votre fichier de clé privée .p8 (doit être encodé en base64)ANDROID_SERVICE_ID
   • : Votre ID de service Apple (par exemple,exactly com.example.app.service)
   • BASE_REDIRECT_URL: Votre URL de lien profond (par exemple, capgo-demo-app://path)

   L'

   est le schéma de lien profond configuré dans votre BASE_REDIRECT_URL . C'est là que le serveur backend redirigera après l'authentification. AndroidManifest.xmlLa valeur de votre lien profond dépend du

   __CAPGO_KEEP_0__. Si vous avez configuré android:scheme="capgo-demo-app" code. If you have set android:scheme="capgo-demo-app" , alors votre lien profond sera AndroidManifest.xmlÉtape 3 : Définir les secrets Supabase capgo-demo-app://path.

Étape 3 : Définir les secrets 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 à 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 champs de remplacement

   Remplacez toutes les valeurs de remplacement par vos valeurs réelles à 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

Les Configuration de l'authentification Apple sur Android Déjà, la configuration de votre application Android est abordée :

• Ajouter le filtre d'intent de lien profond à AndroidManifest.xml
• Ajouter le onNewIntent handler à 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

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

Implémentation

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

Section intitulée “En utilisant 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);
}

Section intitulée “Mettre à jour la fonctionnalité de l'Aideur”

fonctionnalité de l'aideur, vous authenticateWithAppleSupabase devez mettre à jour les valeurs suivantes pour qu'elles correspondent à votre configuration: __CAPGO_KEEP_0__

1. Mise à jour redirectUrl - Définissez-le sur votre URL de fonction Edge Supabase :

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

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

Consultez la implémentation complète en 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

   • Cliquez sur le bouton « Connectez-vous avec Apple »
   • Vous devriez voir la page OAuth Apple dans un navigateur
   • Après avoir authentifié, vous devriez être redirigé vers votre application
   • Vérifiez les journaux de console pour tout 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 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 se connecte à Supabase avec le jeton d'identité

Résolution des problèmes

If l'authentification échoue :

• URI de redirection incohérente: Vérifiez l'URL de retour dans le Portail du développeur Apple pour qu'elle corresponde exactement à APPLE_REDIRECT_URI __CAPGO_KEEP_0__
• Lien profond ne fonctionne pas: Vérifiez que AndroidManifest.xml le filtre d'intention correspond à votre BASE_REDIRECT_URL
• Secrets manquants: Vérifiez que tous les secrets sont correctement configurés à l'aide de supabase secrets list
• L'échange de jetons échoue: Vérifiez les journaux de la fonction d'angle dans le tableau de bord de Supabase pour obtenir des messages d'erreur détaillés
• L'application ne reçoit pas d'appel de rappel: Assurez-vous que onNewIntent est correctement implémenté dans MainActivity
• Vérifiez le exemple d'application code en référence

Comment ça marche

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

1. Initialisation: Le plugin est initialisé avec votre ID de service et l'URL de redirection de votre serveur
2. Flux OAuth: Ouvre un navigateur/une fenêtre personnalisée Chrome avec la page OAuth d'Apple
3. Appel de la fin de la session: Apple redirige votre fonction d'edge Supabase avec une autorisation code
4. Échange de jeton: La fonction d'edge échange le code pour des jetons à l'aide de l'endpoint de jeton d'Apple
5. Redirection de lien profond: La fonction d'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 la connexion avec Apple.

Continuez avec Supabase Apple Login sur Android

Si vous utilisez Supabase Apple Login sur Android pour planifier l'authentification et les flux de compte, connectez-le avec Utilisation de @capgo/capacitor-social-login pour le capacité native dans Utilisation de @capgo/capacitor-social-login, @capgo/capacitor-social-login 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-biometric pour le détail d'implémentation dans @capgo/capacitor-native-biometric, et L'authentification à deux facteurs pour le détail d'implémentation dans L'authentification à deux facteurs.