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 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 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. Naviguez jusqu'à 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. 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 :.

   - Fonction de bord principale __CAPGO_KEEP_0__

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

4. - Configurez la vérification JWT

   - L'endpoint de rappel OAuth Apple doit être public (aucune authentification 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 - Déployez la fonction

5. - Fenêtre de terminal

   supabase functions deploy apple-signin-callback

6. Obtenez votre URL de fonction

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

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

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

   1. Ouvrir https://supabase.com/dashboard/project/YOUR_PROJECT_REF/functions
   2. Cliquez sur la apple-signin-callback URL de 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 : Configurez le portail Apple Developer

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

URL de la 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. Suivez le guide de configuration de l'authentification Apple Android

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

   • Créez un ID de service
   • Générez une clé privée (fichier .p8)
   • 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 Apple Developer

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

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

   Important : Utilisez l'URL de fonction Supabase Edge

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

   Exact Match Required

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

3. Collectez toutes les valeurs requises

   Après avoir terminé la guide de configuration d'Apple, vous devriez avoir :

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

   L'

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

   Si vous avez configuré android:scheme="capgo-demo-app" code android:scheme="capgo-demo-app" dans votre AndroidManifest.xml, puis votre lien profond sera capgo-demo-app://path.

Étape 3 : Définir les secrets 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 l'ensemble de la sortie (c'est 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 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

Le Guide de configuration de connexion Apple pour Android La section déjà couverte configure votre application Android :

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

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

Étape 4 : Utilisez l'assistant d'authentification

Vous pouvez maintenant utiliser l'assistant 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);
}

Section intitulée « Mettre à jour la fonctionnalité de l'Aideur »

l'assistant d'authentification 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 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 - 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' avec votre identifiant Apple réel (la même valeur que vous avez utilisée pour ANDROID_SERVICE_ID en étape 3).

Voir le 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

   • Cliquez sur le bouton « Connectez-vous 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 l'authentification OAuth 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 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é

Résolution des problèmes

Si l'authentification échoue :

• Mauvaise correspondance de l'URI de redirection : Vérifiez que l'URL de retour dans le portail du développeur Apple correspond exactement à APPLE_REDIRECT_URI secret
• Lien profond non fonctionnel : Vérifiez que AndroidManifest.xml le filtre d'intention correspond à votre BASE_REDIRECT_URL
• Manque de secrets : Vérifiez que tous les secrets sont correctement configurés à l'aide de supabase secrets list
• Échange de jeton échoue: Vérifiez les journaux de fonction de bord dans le tableau de bord de Supabase pour obtenir des messages d'erreur détaillés
• L'application n'a pas reçu le callback: Assurez-vous que onNewIntent est correctement implémenté dans MainActivity
• Examinez l'application d'exemple __CAPGO_KEEP_0__ example app code Comment ça marche

context : Page/zone : Éditeur Capgo / produit de construction native dans le cloud. Rôle : En-tête de section ou de page. Message clé `native_build_how_it_works_title` (Titre de la construction native Comment ça marche). | Page/zone : Section de la page du support premium. Rôle : Étiquette de navigation ou élément de navigation court. Vu dans : page premium-support.astro. Message clé `ps_how_it_works` (Ps Comment ça marche). | Page/zone : Page de mise à jour en direct. Rôle : En-tête de section ou de page. Vu dans : page live-update.astro. Message clé `live_update_how_it_works_title` (Titre de la mise à jour en direct 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. OAuth Flow: Ouvre un navigateur/une fenêtre personnalisée de Chrome avec la page d'authentification d'Apple.
3. Backend Callback: Apple redirige vers votre fonction Edge Supabase avec une autorisation code
4. Token Exchange: La fonction Edge échange la code pour des jetons à l'aide de l'endpoint de jetons d'Apple
5. Deep Link Redirect: La fonction Edge redirige vers votre application avec le jeton d'identité
6. Supabase Authentication: L'application reçoit le jeton et s'authentifie auprès de Supabase

Cette opération est nécessaire car Apple ne fournit pas de support natif Android pour la connexion avec Apple.

Continuez de Supabase Apple Login sur Android

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