Configuration de connexion Facebook
Copiez un prompt de configuration avec les étapes d'installation et la guide markdown complet pour ce plugin.
Introduction
Section intitulée “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 :Créer une Application Facebook
-
Suivez le tutoriel pour
Créer une Application Ajouter l'authentification Facebook à votre application
-
Dans votre tableau de bord du développeur Facebook, ajoutez le produit d'authentification Facebook à votre application
Avant de pouvoir rendre votre application publique, suivez ce
-
tutoriel pour la publier Configuration Générale
Informations importantes
Section intitulée « Informations importantes »C'est ici que vous trouverez les informations clés nécessaires à l'intégration :
-
CLIENT_TOKEN:
-
APP_ID:
-
APP_NAME:
Connexion à Facebook Entreprise
Section intitulée « Connexion à Facebook Entreprise »Ce plugin prend en charge la connexion à Facebook Entreprise pour les fonctionnalités et les autorisations liées aux entreprises. Les comptes d'entreprise peuvent demander des autorisations supplémentaires au-delà des autorisations standard de connexion de consommateur, notamment la gestion d'Instagram et de Pages.
Les autorisations commerciales prises en charge incluent :
instagram_basic- Accès à la mise en page de base d'Instagram APIinstagram_manage_insights- Accès aux données d'Insights d'Instagrampages_show_list- Liste des Pages gérées par la personnepages_read_engagement- Lire les données d'engagement des Pagespages_manage_posts- Gérer les publications sur les Pagesbusiness_management- Gérer les actifs commerciaux
Voir la Référence des autorisations Facebook pour la liste complète des autorisations.
Exigences de configuration :
- Votre application Facebook doit être configurée en tant qu'application commerciale dans le Console de développement Facebook.
- Les autorisations commerciales peuvent nécessiter une revue de l'application Facebook avant utilisation en production.
- Votre application doit respecter les politiques d'utilisation commerciale de Facebook.
Accès de base Instagram
Section intitulée « 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
Section intitulée « 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 commerciales avec des utilisateurs de test et des applications de développement avant la revue de l'application.
- La plupart des permissions commerciales nécessitent une revue de l'application Facebook avant utilisation en production.
- Les API commerciales ont des limites de taux différents. Consultez la documentation actuelle du plateau de Facebook avant le lancement.
- Suivez le Guide d'intégration des entreprises Facebook lors de la configuration de l'application.
Paramètres Android
Section intitulée “Paramètres Android”-
Ajoutez la permission d'accès à Internet à votre
AndroidManifest.xmlAssurez-vous que cette ligne est présente :
<uses-permission android:name="android.permission.INTERNET"/> -
Générez votre hachage de clé Android
Cette étape de sécurité est cruciale pour Facebook. Ouvrez votre terminal et exécutez :
Fenêtre de terminal keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64 -ALorsque vous êtes invité à saisir un mot de passe, utilisez :
android -
Ajoutez la clé de hachage à votre application Facebook
- Allez dans le tableau de bord de votre application sur les développeurs Facebook
- Naviguez jusqu'à Paramètres > Général
- Faites défiler vers le bas jusqu'à la section « Android »
- Cliquez sur « Ajouter une plateforme » si Android n'est pas ajouté encore et renseignez les détails
- Ajoutez la clé de hachage que vous avez générée
- Pour la production, ajoutez les deux clés de hachage de debug et de production
-
Mettez à jour votre
AndroidManifest.xmlpour y inclure :<application>...<activity android:name="com.facebook.FacebookActivity"android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"android:label="@string/app_name" /><activityandroid: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>
Configuration iOS
Section intitulée “Configuration iOS”-
Ajoutez la plateforme iOS dans le console du développeur Facebook
- Allez dans l'interface de votre application sur Facebook Developers
- Naviguez vers Paramètres > Général
- Faites défiler vers le bas de la page jusqu'à la fin et cliquez sur “Ajouter une plateforme”
- Choisissez iOS et renseignez les détails requis
-
Ouvrez votre projet Xcode et naviguez jusqu'à Info.plist
-
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> -
Modifier le
AppDelegate.swiftimport FBSDKCoreKit@UIApplicationMainclass AppDelegate: UIResponder, UIApplicationDelegate {func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {// Override point for customization after application launch.// Initialize Facebook SDKFBSDKCoreKit.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 callif (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
Section intitulée « Utiliser Facebook Login dans votre application »-
Initialiser la connexion Facebook dans votre application
import { SocialLogin } from '@capgo/capacitor-social-login';// Initialize during app startupawait SocialLogin.initialize({facebook: {appId: 'APP_ID',clientToken: 'CLIENT_TOKEN',}}) -
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}} -
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 loginasync 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);}}}Limitation du type de jeton: Le
getProfilene fonctionne que lorsque vous avez un jeton d'accès (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 : Traitement des jetons backend
Section intitulée “⚠️ Critique : Traitement des jetons backend”: Toujours jeton d'accès, la configuration est ignorée. Votre serveur doit gérer les deux types de jetons différents car les utilisateurs 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
Sous-titre “Types de jetons par plateforme”| Plateforme | Paramètre de connexion limitée | Choix de l'utilisateur ATT | Type de jeton de résultat |
|---|---|---|---|
| iOS | true | Tout | Jeton JWT |
| iOS | false | Permet le suivi | Jeton d'accès |
| iOS | false | Refuse le suivi | JWT Token (auto-override) |
| Android | Tout | N/A | Access Token (toujours) |
Implémentation du serveur
Section intitulée “Implémentation du serveur”-
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);}} -
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 validationtry {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;}} -
Validation JWT Backend
// Backend: Validate JWT token from Facebookimport 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-claimsconst 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 JWTconst userInfo = {id: decoded.sub,email: decoded.email,name: decoded.name,isJWTAuth: true};// Create your app's session/tokenconst 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' });}}); -
Gestionnaire de jetons Backend générique
// Handle both token types in your backendasync function authenticateFacebookUser(tokenData: any) {if (tokenData.accessToken) {// Handle access token - validate with Facebook Graph APIconst 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-claimsconst 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
Section intitulée “Considérations clés”Le jeton d'accès (Authentification 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 longs
- ✅ Plus de données utilisateur disponibles
- ❌ Becoming moins courant sur iOS car les utilisateurs dénient de plus en plus le suivi
Jeton JWT (Mode de confidentialité iOS uniquement):
- ❌ Android: Jamais (pas pris en charge)
- ✅ iOS: Lorsque le suivi est refusé ou
limitedLogin: true - ✅ Respecte les préférences de confidentialité des utilisateurs iOS
- ❌ Contient uniquement des informations utilisateur de base
- ❌ Temps d'expiration plus courts
- ❌ Pas d'accès au graphique Facebook API
- ⚠️ Maintenant, le scénario le plus courant pour les utilisateurs d'iOS
Comportement Spécifique à la Plateforme:
- Applications iOS: Doivent gérer à la fois les jetons d'accès ET les jetons JWT
- Applications Android: N'ont besoin que de gérer les jetons d'accès
- Applications Cross-plateformes: Doivent mettre en œuvre les deux méthodes de gestion de jetons
Exigences de Contexte Sécurisé (Web/Capacitor)
Section intitulée « Exigences de Contexte Sécurisé (Web/Capacitor) »Limitations de API Crypto
Section intitulée « Limitations de API Crypto »Le flux de connexion Facebook mis à jour nécessite le API Web Crypto pour la génération de nonce, qui n'est disponible que dans des 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
Section intitulée « Problèmes de l'environnement de développement »Problème courant: ionic serve avec les URL HTTP brise l'authentification Facebook
| Environnement | Crypto API 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
Section intitulée “Solutions pour le développement Capacitor”-
Utilisez localhost pour les tests web
Fenêtre de terminal # Instead of ionic serve --host=0.0.0.0ionic serve --host=localhost -
Activer HTTPS dans Ionic
Fenêtre de terminal ionic serve --ssl -
Tester sur des appareils réels
Fenêtre de terminal # Capacitor apps run in secure context on devicesionic cap run iosionic cap run android -
Génération alternative de nonce pour le développement
async function generateNonce() {if (typeof crypto !== 'undefined' && crypto.subtle) {// Secure context - use crypto.subtlereturn 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
Section intitulée « Note d'intégration Firebase »La documentation Firebase récente nécessite des jetons JWT avec des nonces pour l'authentification Facebook, quel que soit les paramètres 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), l'authentification Facebook échouera en raison des restrictions de crypto API . Utilisez localhost ou HTTPS pour les tests web.
Résolution des problèmes
Section intitulée “Résolution des problèmes”Problèmes courants et solutions
Section intitulée “Problèmes courants et solutions”-
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 de débogage et de production
- Vérifiez que vous utilisez le bon fichier de clé de stockage lors de la génération du hachage
-
Le bouton de connexion Facebook ne s'affiche pas
- Vérifiez que toutes les entrées de manifeste sont correctes
- Vérifiez que votre ID d'application Facebook et votre jeton client sont corrects
- Assurez-vous d'avoir correctement initialisé le SDK
-
Problèmes iOS courants
- Vérifiez que toutes les entrées Info.plist sont correctes
- Vérifiez que les schémas URL sont correctement configurés
- Vérifiez que votre ID de bundle correspond à celui enregistré dans le tableau de bord Facebook
-
Avant de procéder au test, ajoutez des utilisateurs de test dans le console du développeur Facebook
- Allez dans Roles > Utilisateurs de test
- Créez un utilisateur de test
- Utilisez ces informations d'identification pour le test
-
Testez les deux versions debug et release
- Construire une version de débogage avec la clé de hachage de débogage
- Construire une version de production avec la clé de hachage de production
- Tester sur les deux émulateurs et appareils physiques
N'oubliez pas de tester la connexion complète, y compris :
- Connexion réussie
- Annulation de la connexion
- Gestion des erreurs
- Fonctionnalité de déconnexion
Continuez de la configuration de connexion Facebook
Section intitulée “Continuez de la configuration de connexion Facebook”Si vous utilisez Configuration de connexion Facebook 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.