Configuration de Facebook Login

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
• Nom de package / bundle ID de votre application
• L’accès à un terminal pour générer les hachages de clés (Android)

Configuration générale

Si vous n’avez pas encore créé d’application Facebook, suivez ces étapes :

1. Créer une application Facebook

   Suivez le tutoriel pour Créer une application

2. Ajouter Facebook Login à votre application

   Dans votre dashboard développeur Facebook, ajoutez le produit Facebook Login à votre application

3. Avant de publier votre application au public, suivez ce tutoriel pour la publier

Informations importantes

Voici où trouver les informations clés nécessaires à l’intégration :

1. CLIENT_TOKEN:

   

2. APP_ID:

   

3. APP_NAME:

   

Connexion Facebook Business

Ce plugin prend en charge Facebook Business Login pour les fonctionnalités et permissions business. Les comptes Business peuvent demander des permissions supplémentaires par rapport à la connexion grand public standard, notamment la gestion d'Instagram et des Pages.

Les permissions business prises en charge incluent :

• instagram_basic - Accès à Instagram Basic Display API
• instagram_manage_insights - Accès à Instagram Insights
• pages_show_list - Liste des Pages gérées par l'utilisateur
• pages_read_engagement - Lecture des données d'engagement des Pages
• pages_manage_posts - Gestion des posts sur les Pages
• business_management - Gérer les actifs professionnels

Consultez le Référence des autorisations Facebook pour la liste complète des autorisations.

Exigences de configuration :

1. Votre application Facebook doit être configurée en tant qu'application professionnelle dans la console de développement Facebook.
2. Business permissions may require Facebook App Review before production use.
3. Votre application doit se conformer aux politiques d'utilisation professionnelle de Facebook.

Accès de base Instagram

await SocialLogin.initialize({
  facebook: {
    appId: 'your-business-app-id',
    clientToken: 'your-client-token',
  },
});

const res = await SocialLogin.login({
  provider: 'facebook',
  options: {
    permissions: [
      'email',
      'public_profile',
      'instagram_basic',
      'pages_show_list',
      'pages_read_engagement',
    ],
  },
});

const profile = await SocialLogin.providerSpecificCall({
  call: 'facebook#getProfile',
  options: {
    fields: ['id', 'name', 'email', 'instagram_business_account'],
  },
});

Gestion des pages

const res = await SocialLogin.login({
  provider: 'facebook',
  options: {
    permissions: [
      'email',
      'pages_show_list',
      'pages_manage_posts',
      'pages_read_engagement',
    ],
  },
});

const profile = await SocialLogin.providerSpecificCall({
  call: 'facebook#getProfile',
  options: {
    fields: ['id', 'name', 'accounts{id,name,instagram_business_account}'],
  },
});

Notes importantes :

• Vous pouvez tester les permissions business avec des utilisateurs de test et des apps de développement avant l'App Review.
• La plupart des permissions business nécessitent une App Review de Facebook avant une utilisation en production.
• Les API Business ont des limites de débit différentes. Consultez la documentation actuelle de Facebook avant le lancement.
• Consultez la Guide d'intégration Facebook Business lors de la configuration de l'app.

Configuration Android

1. Ajoutez la permission internet à votre AndroidManifest.xml

   Vérifiez que cette ligne est présente :

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

2. Générer votre empreinte de clé Android

   C’est une étape de sécurité essentielle exigée par Facebook. Ouvrez votre terminal et exécutez :

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

   Lorsqu’on vous demande un mot de passe, utilisez : android

   Remarque

   Pour les builds de release, vous devrez utiliser votre keystore de release :

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

3. Ajoutez le key hash à votre application Facebook

   1. Allez sur le dashboard de votre application sur Facebook Developers
   2. Rendez-vous dans Paramètres > Informations de base
   3. Faites défiler jusqu'à la section « Android »
   4. Cliquez sur « Ajouter une plateforme » si Android n'est pas encore ajouté et renseignez les informations
   5. Ajoutez le key hash que vous avez généré
   6. Pour la production, ajoutez les key hashes de debug et de release

4. Mettez à jour votre AndroidManifest.xml à 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 la console Facebook Developer

   1. Allez sur le dashboard de votre application sur Facebook Developers
   2. Rendez-vous dans Paramètres > Informations de base
   3. Faites défiler jusqu'en bas de la page et cliquez sur « Ajouter une plateforme »
   4. Sélectionnez iOS et remplissez les informations requises

2. Ouvrez votre projet Xcode et accédez à 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 votre identifiant d’application Facebook
   • [CLIENT-TOKEN] par votre token client
   • [APP-NAME] par le nom de votre application

4. Modifiez 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)
           }
       }
   }

Utiliser Facebook Login dans votre application

Attention

Avant de commencer: N’oubliez pas qu’avec le nouveau Facebook SDK, le type de token que vous recevez dépend entièrement du choix de l’utilisateur concernant le suivi de l’application, et non de votre configuration code. Implémentez toujours la gestion des access token et des JWT token dans votre backend pour garantir que l’authentification fonctionne pour tous les utilisateurs.

1. Initialiser 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. Implémenter 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

   Limited Login (iOS uniquement): Définir limitedLogin à true si vous souhaitez utiliser la fonctionnalité de connexion limitée de Facebook. Cette fonctionnalité, exclusive à iOS, renforce la confidentialité en limitant les données partagées lors de la connexion.

   Limitations importantes :

   • iOS uniquement: Limited Login n'affecte que les appareils iOS et n'a aucun impact sur Android
   • Override ATT: Même si vous définissez limitedLogin: false, Facebook le forcera automatiquement true si l'utilisateur n'a pas accordé l'autorisation App Tracking Transparency (ATT)
   • Gérez toujours les deux cas: Votre application doit toujours être prête à gérer les cas de login limité et de login complet

   Vérification du statut 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 vous préférez access_token :

   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 avec Limited Login :

   • Accès réduit aux données: Some user data may not be available
   • Types de tokens différents: Les tokens d'accès peuvent avoir des capacités différentes
   • Conformité vie privée: Aide à respecter les exigences de confidentialité d'iOS

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

3. Récupérer les données du profil 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);
       }
     }
   }

   Astuce

   Champs de profil disponibles: Vous pouvez demander n'importe quel champ disponible dans l'API Graph de Facebook. Les champs courants incluent : id, name, email, first_name, last_name, picture, birthday, gender, location, hometown. Notez que certains champs peuvent nécessiter des permissions supplémentaires.

   Limitation du type de token: L'appel getProfile ne fonctionne que si vous possédez un token d'accès (connexion standard avec suivi autorisé). Si l'utilisateur a refusé le suivi ou si vous utilisez une connexion limitée (token JWT uniquement), cet appel échouera. Dans ce cas, utilisez les données de profil fournies dans la réponse de connexion initiale.

⚠️ Critique : gestion des tokens côté backend

Danger

COMPORTEMENT CRITIQUE SUR iOS: Limited Login et App Tracking Transparency (ATT) sont des iOS uniquement Sur Android, vous recevrez toujours des access tokens, peu importe le limitedLogin .

Comportement des tokens iOS:

• limitedLogin: true → Toujours un token JWT (iOS uniquement)
• limitedLogin: false + L'utilisateur AUTORISE le tracking → Token d'accès
• limitedLogin: false + L'utilisateur REFUSE le suivi → JWT token (iOS écrase automatiquement votre paramètre)

Comportement du token sur Android: Toujours un access token, limitedLogin le paramètre est ignoré.

Votre backend doit gérer deux types de tokens différents car les utilisateurs iOS peuvent recevoir soit des access tokens, soit des JWT tokens selon leur choix App Tracking Transparency, tandis que les utilisateurs Android reçoivent toujours des access tokens.

Types de token par plateforme

Plateforme	Réglage limitedLogin	Choix ATT de l'utilisateur	Type de token du résultat
iOS	true	Tous	Token JWT
iOS	false	Autorise le tracking	Token d'accès
iOS	false	Refuse le tracking	Token JWT (auto-override)
Android	Tous	N/A	Access Token (toujours)

Implémentation backend

1. Détecter le type de token et agir 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 côté back-end

   // 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 token backend 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

Point critique : iOS uniquement:

• iOS: le choix de suivi de l'utilisateur détermine le type de token, et NON vos paramètres code (même quand limitedLogin: false)
• Android : reçoit toujours des access tokens, quel que soit le limitedLogin paramètre
• Limited Login est exclusif à iOS - Android ignore complètement ce paramètre

Token d'accès (connexion standard):

• ✅ Android: Toujours disponible (les restrictions iOS ne s’appliquent pas)
• ✅ iOS: Uniquement si l’utilisateur autorise explicitement le suivi
• ✅ Peut être utilisé pour accéder au Facebook Graph API
• ✅ Durées d’expiration plus longues
• ✅ Plus de données utilisateur disponibles
• ❌ De moins en moins courant sur iOS les utilisateurs refusant de plus en plus le suivi

Jeton JWT (mode confidentialité iOS uniquement):

• ❌ Android: Ne se produit jamais (non pris en charge)
• ✅ iOS: Lorsque le suivi est refusé ou limitedLogin: true
• ✅ Respects iOS user privacy preferences
• ❌ Contient uniquement des informations de base sur l'utilisateur
• ❌ Durées d'expiration plus courtes
• ❌ Pas d'accès au Graph Facebook API
• ⚠️ Le scénario le plus courant pour les utilisateurs iOS

Comportement spécifique à la plateforme:

• Applications iOS: doivent gérer à la fois les access tokens et les JWT
• Applications Android: n’ont besoin que de gérer les access tokens
• Applications multiplateformes: doivent implémenter les deux méthodes de gestion des tokens

Astuce

Indispensable sur iOS: Vous devez implémenter les deux méthodes de gestion des tokens. De nombreux développeurs iOS supposent qu’ils obtiendront toujours des access tokens, et leurs applications se cassent lorsque les utilisateurs refusent le suivi.

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

Limites de Crypto API

Le flux de connexion Facebook mis à jour nécessite l' API Web Crypto pour la génération du nonce, qui n'est disponible que dans les 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 d'environnement de développement

Problème courant: ionic serve avec des URL HTTP casse l'authentification Facebook

Environnement	API Crypto disponible	Facebook Login 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. Utilisez 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 sur l'intégration Firebase

La documentation récente de Firebase exige des tokens 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
     }
   });

Limite en développement: si vous utilisez ionic serve sur une IP réseau (et non localhost), la connexion Facebook échouera en raison des restrictions crypto API. Utilisez localhost ou HTTPS pour les tests web.

Astuce

Sécurité en production: les apps Capacitor sur iOS/Android s’exécutent toujours dans des contextes sécurisés, cette limite ne concerne donc que les environnements de développement web.

Troubleshooting

Problèmes courants et solutions

1. Erreurs de hash de clé sur Android

   • Vérifiez que vous avez bien ajouté le bon hash de clé dans le dashboard Facebook
   • Pour les builds release, assurez-vous d'avoir ajouté les deux hashes de clé : debug et release
   • Vérifiez que vous utilisez le bon keystore lors de la génération du hash

2. Le bouton de connexion Facebook n'apparaît pas

   • Vérifiez que toutes les entrées du manifest sont correctes
   • Vérifiez que votre App ID Facebook et votre Client Token sont corrects
   • Assurez-vous d'avoir correctement initialisé le SDK

3. Problèmes courants sur iOS

   • Make sure all Info.plist entries are correct
   • Vérifier la configuration des URL schemes
   • Vérifier que votre bundle ID correspond à celui enregistré dans le dashboard Facebook

En test

1. Avant de tester, ajoutez des utilisateurs de test dans la console Facebook Developer

   • Allez dans Rôles > Utilisateurs de test
   • Créer un utilisateur de test
   • Utilisez ces identifiants pour vos tests

2. Tester les builds en mode debug et release

   • Build debug avec le hash de la clé de debug
   • Build release avec le hash de la clé de release
   • Tester sur émulateur et sur appareils physiques

N’oubliez pas de tester le flux de connexion complet, y compris :

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

Continuer depuis la configuration de Facebook Login

Si vous utilisez Configuration de Facebook Login pour planifier les flux d'authentification et de compte, le connecter à Utiliser @capgo/capacitor-social-login pour la capacité native dans Utiliser @capgo/capacitor-social-login @capgo/capacitor-social-login pour les détails 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 de l'authentification à deux facteurs.