Configuration de connexion Facebook

Introduction

Dans ce guide, vous apprendrez à configurer Facebook Login avec Capgo Social Login. Vous aurez besoin des éléments suivants :

• Un compte développeur Facebook
• Le nom de package ou l'ID de votre application
• Accès à un terminal pour la génération de hachages de clés (Android)

Configuration Générale

Si vous n'avez pas encore créé une application Facebook, suivez ces étapes :

1. Créer une Application Facebook

   Suivez le tutoriel pour Créer une Application

2. Ajouter l'authentification Facebook à votre application

   Dans votre tableau de bord du développeur Facebook, ajoutez le produit d'authentification Facebook à votre application

3. Avant de pouvoir rendre votre application publique, suivez ce tutoriel pour la publier

Informations importantes

C'est ici que vous trouverez les informations clés nécessaires à l'intégration :

1. CLIENT_TOKEN:

   

2. APP_ID:

   

3. APP_NAME:

   

Configuration Android

1. Ajoutez la permission d'accès à Internet à votre AndroidManifest.xml

   Assurez-vous que cette ligne est présente :

   <uses-permission android:name="android.permission.INTERNET"/>

2. Générez votre hachage de clé Android

   Ceci est une étape de sécurité cruciale requise par Facebook. Ouvrez votre terminal et exécutez :

   keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64 -A

   Lorsque vous êtes invité à saisir un mot de passe, utilisez : android

   Remarque

   Pour les builds de production, vous aurez besoin de votre clé de stockage de production :

   keytool -exportcert -alias your-key-name -keystore your-keystore-path | openssl sha1 -binary | openssl base64 -A

3. Ajoutez l'empreinte de clé à votre application Facebook

   1. Allez dans l'interface utilisateur de votre application sur les développeurs Facebook
   2. Naviguez jusqu'à Paramètres > Fondamentaux
   3. Faites défiler vers la section « Android »
   4. Cliquez sur « Ajouter une plateforme » si Android n'est pas ajouté encore et renseignez les détails
   5. Ajoutez la clé de hachage que vous avez générée
   6. Pour la production, ajoutez les deux clés de hachage de débogage et de version de production

4. Mettez à jour votre AndroidManifest.xml pour inclure :

   <application>
       ...
       <activity android:name="com.facebook.FacebookActivity"
           android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
           android:label="@string/app_name" />
   
       <activity
           android:name="com.facebook.CustomTabActivity"
           android:exported="true">
           <intent-filter>
               <action android:name="android.intent.action.VIEW" />
               <category android:name="android.intent.category.DEFAULT" />
               <category android:name="android.intent.category.BROWSABLE" />
               <data android:scheme="FB[APP_ID]" />
           </intent-filter>
       </activity>
   </application>

   Attention

   Assurez-vous de remplacer [APP_ID] par votre ID d'application Facebook réel dans l' android:scheme attribut

Configuration iOS

1. Ajoutez la plateforme iOS dans le console développeur Facebook

   1. Allez dans votre tableau de bord d'application sur les développeurs Facebook
   2. Naviguez jusqu'à Paramètres > Basique
   3. Faites défiler jusqu'en bas de la page et cliquez sur “Ajouter une plateforme”
   4. Sélectionnez iOS et renseignez les détails requis

2. Ouvrez votre projet Xcode et naviguez jusqu'à Info.plist

3. Ajoutez les entrées suivantes à votre Info.plist :

   <key>FacebookAppID</key>
   <string>[APP-ID]</string>
   <key>FacebookClientToken</key>
   <string>[CLIENT-TOKEN]</string>
   <key>FacebookDisplayName</key>
   <string>[APP-NAME]</string>
   <key>LSApplicationQueriesSchemes</key>
   <array>
       <string>fbapi</string>
       <string>fb-messenger-share-api</string>
   </array>
   <key>CFBundleURLTypes</key>
   <array>
       <dict>
           <key>CFBundleURLSchemes</key>
           <array>
               <string>fb[APP-ID]</string>
           </array>
       </dict>
   </array>

   Attention

   Remplacez les valeurs suivantes :

   • [APP-ID] par l'ID de votre application Facebook
   • [CLIENT-TOKEN] par votre jeton client
   • [APP-NAME] par le nom de votre application

4. Modifier le AppDelegate.swift

   import FBSDKCoreKit
   @UIApplicationMain
   class AppDelegate: UIResponder, UIApplicationDelegate {
         func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
           // Override point for customization after application launch.
   
           // Initialize Facebook SDK
           FBSDKCoreKit.ApplicationDelegate.shared.application(
               application,
               didFinishLaunchingWithOptions: launchOptions
           )
   
           return true
       }
   
       func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
           // Called when the app was launched with a url. Feel free to add additional processing here,
           // but if you want the App API to support tracking app url opens, make sure to keep this call
   
           if (FBSDKCoreKit.ApplicationDelegate.shared.application(
               app,
               open: url,
               sourceApplication: options[UIApplication.OpenURLOptionsKey.sourceApplication] as? String,
               annotation: options[UIApplication.OpenURLOptionsKey.annotation]
           )) {
               return true;
           } else {
               return ApplicationDelegateProxy.shared.application(app, open: url, options: options)
           }
       }
   }

Utilisation de Facebook Login dans votre application

Attention

Avant de commencer: Rappelez-vous que avec le nouveau Facebook SDK, le type de jeton que vous recevez dépend entièrement de la choix de suivi de l'application de l'utilisateur, et non de votre code configuration. Assurez-vous toujours de mettre en œuvre la gestion de jeton d'accès et de jeton JWT dans votre backend pour garantir que l'authentification fonctionne pour tous les utilisateurs.

1. Initialisez la connexion Facebook dans votre application

   import { SocialLogin } from '@capgo/capacitor-social-login';
   
   // Initialize during app startup
   await SocialLogin.initialize({
     facebook: {
       appId: 'APP_ID',
       clientToken: 'CLIENT_TOKEN',
     }
   })

2. Mettez en œuvre la fonction de connexion

   async function loginWithFacebook() {
     try {
       const result = await SocialLogin.login({
         provider: 'facebook',
        options: {
          permissions: ['email', 'public_profile'],
          limitedLogin: false // See Limited Login section below for important details
        }
       });
       console.log('Facebook login result:', result);
       // Handle successful login
     } catch (error) {
       console.error('Facebook login error:', error);
       // Handle error
     }
   }

   Remarque

   Connexion limitée (iOS uniquement)Définir limitedLogin à true si vous souhaitez utiliser la fonctionnalité de connexion limitée de Facebook. Cette fonctionnalité est réservée aux appareils iOS et offre une meilleure protection de la vie privée en limitant les données partagées lors de la connexion.

   Limitations importantes :

   • iOS uniquementLa connexion limitée n'affecte que les appareils iOS et n'a aucun impact sur les appareils Android
   • ATT Override: Même si vous avez configuré limitedLogin: false, Facebook forcerait automatiquement à true si l'utilisateur n'a pas accordé la permission d'App Tracking Transparency (ATT)
   • Toujours Gérer les Deux Cas: Votre application doit toujours être prête à gérer les deux scénarios de connexion limitée et complète

   Vérification de l'état ATT:

   // Check if user has granted tracking permission
   const trackingStatus = await SocialLogin.providerSpecificCall({
     call: 'facebook#requestTracking',
     options: {}
   });
   console.log('Tracking status:', trackingStatus.status); // 'authorized', 'denied', 'notDetermined', or 'restricted'

   Implémentation recommandée si access_token est préférée:

   async function loginWithFacebook() {
     try {
       // Check ATT status first
       const trackingStatus = await SocialLogin.providerSpecificCall({
         call: 'facebook#requestTracking',
         options: {}
       });
   
       const result = await SocialLogin.login({
         provider: 'facebook',
         options: {
           permissions: ['email', 'public_profile'],
           limitedLogin: trackingStatus.status === 'denied' // Auto-adjust based on ATT
         }
       });
   
       // Handle different response types based on limited login
       if (result.result.accessToken) {
         // Your app logic should work with both limited and full login
         console.log('Login successful:', result);
       }
     } catch (error) {
       console.error('Facebook login error:', error);
     }
   }

   Ce qui se passe dans la connexion limitée:

   • Accès aux données réduit: Les données de l'utilisateur peuvent ne pas être disponibles
   • Divers types de jetons: Les jetons d'accès peuvent avoir différentes capacités
   • Conformité à la vie privée: Aide à se conformer aux exigences de confidentialité d'iOS

   Important: Testez toujours votre application avec les deux scénarios de connexion limitée et complète pour vous assurer que votre application fonctionne correctement dans les deux cas. Vous pouvez en savoir plus sur la connexion limitée ici.

3. Obtenir les données du profil de l'utilisateur

   Après une connexion réussie, vous pouvez récupérer des informations de profil supplémentaires :

   async function getFacebookProfile() {
     try {
       const profileResponse = await SocialLogin.providerSpecificCall({
         call: 'facebook#getProfile',
         options: {
           fields: ['id', 'name', 'email', 'first_name', 'last_name', 'picture']
         }
       });
   
       console.log('Facebook profile:', profileResponse.profile);
       return profileResponse.profile;
     } catch (error) {
       console.error('Failed to get Facebook profile:', error);
       return null;
     }
   }
   
   // Example usage after login
   async function loginAndGetProfile() {
     const loginResult = await loginWithFacebook();
     if (loginResult) {
       const profile = await getFacebookProfile();
       if (profile) {
         console.log('User ID:', profile.id);
         console.log('Name:', profile.name);
         console.log('Email:', profile.email);
         console.log('Profile Picture:', profile.picture?.data?.url);
       }
     }
   }

   Conseil

   Champs de Profil Disponibles: Vous pouvez demander n'importe quel champ disponible dans le graphique de Facebook’s API. Les champs courants incluent : id, name, email, first_name, last_name, picture, birthday, gender, location, hometownAttention : Limitation du Type de Jeton

   : L'appel ne fonctionne que lorsque vous avez unjeton d'accès getProfile (connexion standard avec suivi autorisé). Si l'utilisateur a refusé le suivi ou que vous utilisez une connexion limitée (jeton JWT uniquement), cette requête échouera. Dans ce cas, utilisez les données de profil fournies dans la réponse de connexion initiale. ⚠️ Critique : Gestion du Jeton Backend Section intitulée « ⚠️ Critique : Gestion du Jeton Backend »

Danger

Danger

COMPORTEMENT CRITIQUE DE iOS: Les autorisations de connexion limitées et la transparence de l'application (ATT) sont SEUL POUR iOS fonctionnalités. Sur Android, vous recevrez toujours des jetons d'accès, quel que soit limitedLogin l'ensemble des paramètres.

COMPORTEMENT DU JETON DE iOS:

• limitedLogin: true → Toujours un jeton JWT (seul pour iOS)
• limitedLogin: false + L'utilisateur ACCorde le suivi → Un jeton d'accès
• limitedLogin: false + L'utilisateur REFUSE le suivi → Un jeton JWT (iOS remplace automatiquement votre paramètre)

Comportement du jeton Android: Accédez toujours au jeton, limitedLogin La mise en œuvre de la configuration est ignorée.

Votre serveur backend doit gérer deux types de jetons différents car les utilisateurs d'iOS peuvent recevoir soit des jetons d'accès, soit des jetons JWT en fonction de leur choix de transparence de l'application de suivi, tandis que les utilisateurs Android reçoivent toujours des jetons d'accès.

Types de jetons par plateforme

Plateforme	Paramètre de connexion limitée	Choix de l'utilisateur ATT	Résultat du type de jeton
iOS	true	Tout	Jeton de jeton JWT
iOS	false	Permet le suivi	Jeton d'accès
iOS	false	Interdit le suivi	Jeton de jeton JWT (auto-remplacement)
Android	Tout	Pas applicable	Jeton d'accès (toujours)

Implémentation de l'arrière-plan

1. Détection du type de jeton et gestion en conséquence

   async function loginWithFacebook() {
     try {
       const loginResult = await SocialLogin.login({
         provider: 'facebook',
         options: {
           permissions: ['email', 'public_profile'],
           limitedLogin: false // iOS: depends on ATT, Android: ignored
         }
       });
   
       if (loginResult.accessToken) {
         // Access token (Android always, iOS when tracking allowed)
         return handleAccessToken(loginResult.accessToken.token);
       } else if (loginResult.idToken) {
         // JWT token (iOS only when tracking denied or limitedLogin: true)
         return handleJWTToken(loginResult.idToken);
       }
     } catch (error) {
       console.error('Facebook login error:', error);
     }
   }

2. Exemple d'intégration Firebase

   import { OAuthProvider, FacebookAuthProvider, signInWithCredential } from 'firebase/auth';
   
   async function handleAccessToken(accessToken: string, nonce: string) {
     // For access tokens, use OAuthProvider (new method)
     const fbOAuth = new OAuthProvider("facebook.com");
     const credential = fbOAuth.credential({
       idToken: accessToken,
       rawNonce: nonce
     });
   
     try {
       const userResponse = await signInWithCredential(auth, credential);
       return userResponse;
     } catch (error) {
       console.error('Firebase OAuth error:', error);
       return false;
     }
   }
   
   async function handleJWTToken(jwtToken: string) {
     // For JWT tokens, send to your backend for validation
     try {
       const response = await fetch('/api/auth/facebook-jwt', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
         },
         body: JSON.stringify({ jwtToken })
       });
   
       const result = await response.json();
       return result;
     } catch (error) {
       console.error('JWT validation error:', error);
       return false;
     }
   }

3. Validation JWT de l'arrière-plan

   // Backend: Validate JWT token from Facebook
   import jwt from 'jsonwebtoken';
   import { Request, Response } from 'express';
   
   app.post('/api/auth/facebook-jwt', async (req: Request, res: Response) => {
     const { jwtToken } = req.body;
   
     try {
       // Verify JWT token with Facebook's public key
       // See: https://developers.facebook.com/docs/facebook-login/limited-login/token/validating/#standard-claims
       const decoded = jwt.verify(jwtToken, getFacebookPublicKey(), {
         algorithms: ['RS256'],
         audience: process.env.FACEBOOK_APP_ID,
         issuer: 'https://www.facebook.com' // From: https://www.facebook.com/.well-known/openid-configuration/?_rdr
       });
   
       // Extract user info from JWT
       const userInfo = {
         id: decoded.sub,
         email: decoded.email,
         name: decoded.name,
         isJWTAuth: true
       };
   
       // Create your app's session/token
       const sessionToken = createUserSession(userInfo);
   
       res.json({
         success: true,
         token: sessionToken,
         user: userInfo
       });
     } catch (error) {
       console.error('JWT validation failed:', error);
       res.status(401).json({ success: false, error: 'Invalid token' });
     }
   });

4. Gestionnaire de jetons de l'arrière-plan générique

   // Handle both token types in your backend
   async function authenticateFacebookUser(tokenData: any) {
     if (tokenData.accessToken) {
       // Handle access token - validate with Facebook Graph API
       const response = await fetch(`https://graph.facebook.com/me?access_token=${tokenData.accessToken}&fields=id,name,email`);
       const userInfo = await response.json();
   
       return {
         user: userInfo,
         tokenType: 'access_token',
         expiresIn: tokenData.expiresIn || 3600
       };
     } else if (tokenData.jwtToken) {
       // Handle JWT token - decode and validate
       // See: https://developers.facebook.com/docs/facebook-login/limited-login/token/validating/#standard-claims
       const decoded = jwt.verify(tokenData.jwtToken, getFacebookPublicKey());
   
       return {
         user: {
           id: decoded.sub,
           name: decoded.name,
           email: decoded.email
         },
         tokenType: 'jwt',
         expiresIn: decoded.exp - Math.floor(Date.now() / 1000)
       };
     } else {
       throw new Error('No valid token provided');
     }
   }

Considérations clés

Danger

Importance critique iOS uniquement Compréhension:

• iOS: La choix de l'utilisateur pour le suivi de l'application détermine le type de jeton, ET PAS vos paramètres code (même lorsque limitedLogin: false)
• Android: Toujours reçoit des jetons d'accès, quel que soit limitedLogin paramètre
• L'accès limité est uniquement iOS - Android ignore complètement ce paramètre

Jeton d'accès (Connexion standard):

• ✅ Android: Toujours disponible (les restrictions iOS ne s'appliquent pas)
• ✅ iOS: Seulement lorsque l'utilisateur autorise explicitement le suivi de l'application
• ✅ Peut être utilisé pour accéder au graphique Facebook API
• ✅ Temps d'expiration plus long
• ✅ Plus de données utilisateur disponibles
• ❌ De moins en moins courant sur iOS en raison de l'augmentation du refus des utilisateurs de suivre

Jeton de jeton JWT (mode de confidentialité iOS uniquement):

• ❌ Android: Jamais (non pris en charge)
• ✅ iOS: Lorsque la localisation est refusée ou limitedLogin: true
• ✅ Respecte les préférences de confidentialité des utilisateurs iOS
• ❌ Contient des informations utilisateur de base uniquement
• ❌ Durées d'expiration plus courtes
• ❌ Aucun accès au graphique Facebook API
• ⚠️ Maintenant, le scénario le plus courant pour les utilisateurs iOS

Comportement Spécifique à la Plateforme:

• Applications iOS: Doit gérer à la fois les jetons d'accès ET les jetons JWT
• Applications Android: N'a besoin que de gérer les jetons d'accès
• Applications multi-plateformes: Doit mettre en œuvre les deux méthodes de gestion de jetons

Conseil

Essentiel pour iOS: Vous DEVEZ mettre en œuvre les deux méthodes de gestion de jetons. Beaucoup de développeurs iOS supposent qu'ils auront toujours accès aux jetons d'accès et leurs applications s'effondrent lorsque les utilisateurs refusent le suivi.

Exigences de contexte sécurisé (Web/Capacitor)

Limites de Crypto API

La mise à jour du flux de connexion Facebook nécessite Web Crypto API pour la génération de nonce, qui n'est disponible que dans contextes sécurisés:

// This requires secure context (HTTPS or localhost)
async function sha256(message: string) {
  const msgBuffer = new TextEncoder().encode(message);
  const hashBuffer = await crypto.subtle.digest("SHA-256", msgBuffer); // ❌ Fails in insecure context
  // ...
}

Problèmes de l'environnement de développement

Problème courant: ionic serve l'utilisation d'URL HTTP brise l'authentification Facebook

Environnement	Crypto API Disponible	L'authentification Facebook fonctionne
http://localhost:3000	✅ Oui	✅ Oui
http://127.0.0.1:3000	✅ Oui	✅ Oui
http://192.168.1.100:3000	❌ Non	❌ Non
https://any-domain.com	✅ Oui	✅ Oui

Solutions pour le développement Capacitor

1. Utiliser localhost pour les tests web

   # Instead of ionic serve --host=0.0.0.0
   ionic serve --host=localhost

2. Activer HTTPS dans Ionic

   ionic serve --ssl

3. Tester sur des appareils réels

   # Capacitor apps run in secure context on devices
   ionic cap run ios
   ionic cap run android

4. Génération alternative de nonce pour le développement

   async function generateNonce() {
     if (typeof crypto !== 'undefined' && crypto.subtle) {
       // Secure context - use crypto.subtle
       return await sha256(Math.random().toString(36).substring(2, 10));
     } else {
       // Fallback for development (not secure for production)
       console.warn('Using fallback nonce - not secure for production');
       return btoa(Math.random().toString(36).substring(2, 10));
     }
   }

Note d'intégration Firebase

La documentation Firebase récente exige des jetons JWT avec des nonces pour l'authentification Facebook, quel que soit le paramétrage de connexion. Cette approche fonctionne avec les deux limitedLogin: true et limitedLogin: false:

   // Both modes can return JWT tokens depending on user choice
   const loginResult = await SocialLogin.login({
     provider: 'facebook',
     options: {
       permissions: ['email', 'public_profile'],
       limitedLogin: false, // true = always JWT, false = depends on user tracking choice
       nonce: nonce
     }
   });

Limitation de développement: Si vous utilisez ionic serve sur un IP de réseau (pas localhost), la connexion Facebook échouera en raison des restrictions API de cryptage. Utilisez localhost ou HTTPS pour les tests web.

Conseil

Sécurité de production: Les Capacitor applications sur iOS/Android exécutent toujours des contextes sécurisés, donc cette limitation ne concerne que les environnements de développement web.

Résolution des problèmes

Problèmes courants et solutions

1. Erreurs de hachage clé sur Android

   • Vérifiez que vous avez ajouté la bonne clé de hachage au tableau de bord Facebook
   • Pour les builds de production, assurez-vous d'avoir ajouté les deux clés de hachage debug et release
   • Vérifiez que vous utilisez le bon keystore lors de la génération du hachage

2. Le bouton de connexion Facebook ne s'affiche pas

   • Vérifiez que toutes les entrées du manifeste sont correctes
   • Vérifiez que vos identifiants d'application Facebook et votre jeton client sont corrects
   • Assurez-vous d'avoir initialisé correctement le SDK

3. Problèmes iOS courants

   • Assurez-vous que toutes les entrées d'Info.plist sont correctes
   • Vérifiez que les schémas d'URL sont correctement configurés
   • Vérifiez que votre ID de bundle correspond à ce qui est enregistré dans le tableau de bord Facebook

Test

1. Avant de procéder à l'évaluation, ajoutez des utilisateurs de test dans le Console de développeur Facebook

   • Allez dans Rôles > Utilisateurs de test
   • Créez un utilisateur de test
   • Utilisez ces informations d'identification pour l'évaluation

2. Évaluez les deux versions de build : débogage et de production

   • Build de débogage avec la clé de hachage de débogage
   • Build de production avec la clé de hachage de production
   • Évaluez sur les deux émulateurs et appareils physiques

N'oubliez pas d'évaluer la pleine chaîne de connexion, y compris :

• Connexion réussie
• Annulation de la connexion
• Gestion des erreurs
• Fonctionnalité de déconnexion

Continuer depuis la configuration de connexion Facebook

Si vous utilisez Configuration de connexion Facebook pour planifier l'authentification et les flux de compte, la connectez avec Utilisation de @capgo/capacitor-social-login pour la 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 les détails 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.