Passer à la navigation principale

Continuez de la configuration de connexion Facebook

Répertoire de connexion sociale GitHub

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

  • Un compte développeur Facebook
  • __CAPGO_KEEP_0__
  • Nom de package de votre application/ID de bundle

Accès à une invite de terminal pour générer les hachages de clé (Android)

Configuration Générale

Section intitulée « Configuration Générale »

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

    Créer une application Facebook Suivre le tutoriel pour

  2. Créer une Application

    Ajouter l'authentification Facebook à votre application

  3. 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 le publier

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

  1. CLIENT_TOKEN:

    Écran du tableau de bord du développeur Facebook montrant où trouver le jeton client
  2. APP_ID:

    Écran du tableau de bord du développeur Facebook montrant où trouver l'ID de l'application
  3. APP_NAME:

    Écran du tableau de bord du développeur Facebook montrant où trouver le nom de l'application

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 API
  • instagram_manage_insights - Accès aux informations d'Instagram
  • pages_show_list - Liste des pages gérées par la personne
  • pages_read_engagement - Lecture des données d'engagement à partir des pages
  • pages_manage_posts - Gestion des publications sur les pages
  • business_management - Gestion des actifs commerciaux

Voir les 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 commerciale dans le console du développeur Facebook.
  2. Les autorisations commerciales peuvent nécessiter une revue de l'application Facebook avant utilisation en production.
  3. Votre application doit respecter les politiques de Facebook pour les cas d'utilisation commerciaux.
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'],
},
});
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}'],
},
});

Remarques 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 l'utilisation en production.
  • Les API commerciales ont des limites de taux différents. Veuillez consulter la documentation actuelle de la plateforme de Facebook avant le lancement.
  • Suivez les Guide d'intégration commerciale de Facebook lors de la configuration de l'application.
  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

    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 -A

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

  3. Ajoutez la clé de hachage à votre application Facebook

    1. Allez dans votre tableau de bord d'application sur Facebook Developers
    2. Naviguez vers Paramètres > Général
    3. Faites défiler vers le bas jusqu'à 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 clés de hachage de débogage et de production
  4. Mettre à 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>
  1. Ajoutez la plateforme iOS dans le console du développeur Facebook

    1. Allez dans l'interface de bord de votre application sur Facebook Developers
    2. Navigatez vers les paramètres > Fondamentaux
    3. Descendez 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>
  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 la connexion Facebook dans votre application

Sous-titre « Utilisation de la connexion Facebook dans votre application »
  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. Mettre 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
    }
    }
  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);
    }
    }
    }

    Type de jeton de limitation: Le getProfile appel ne fonctionne que lorsque vous avez un jeton d'accès (authentification standard avec suivi autorisé). Si l'utilisateur a refusé le suivi ou que vous utilisez une authentification limitée (jeton JWT uniquement), cette requête échouera. Dans ce cas, utilisez les données de profil fournies dans la réponse d'authentification initiale.

iOS Token Behavior deux types de jetons puisque les utilisateurs iOS peuvent recevoir soit des jetons d'accès ou des jetons JWT en fonction de leur choix de transparence de suivi de l'application, tandis que les utilisateurs Android reçoivent toujours des jetons d'accès.

PlateformeParamètre de connexion limitéeChoix de l'utilisateur ATTType de jeton résultat
iOStrueN'importe quelJWT Token
iOSfalsePermet le suiviJeton d'accès
iOSfalseRefuse le suiviJeton JWT (auto-remplacement)
AndroidToutN/AJeton d'accès (toujours)
  1. Déterminez le type de jeton et gérez 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é serveur

    // 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 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');
    }
    }

Access Token (Standard Login):

  • 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 d'informations utilisateur disponibles
  • Devenant moins courant sur iOS puisque les utilisateurs dénient de plus en plus le suivi

Jeton JWT (Mode de confidentialité iOS uniquement):

  • Android: Jamais se produit (non 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 iOS

Comportement spécifique au plateforme:

  • Applications iOS: Doivent gérer à la fois les jetons d'accès ET les jetons JWT
  • Applications Android: Ont besoin de gérer uniquement les jetons d'accès
  • Applications cross-plateforme: Doivent mettre en œuvre les deux méthodes de gestion de jetons

Le flux de connexion Facebook mis à jour nécessite le 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ème courant: ionic serve L'utilisation d'URLs HTTP brise l'authentification Facebook

EnvironnementCrypto API DisponibleFacebook 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
  1. Utiliser localhost pour les tests web

    Fenêtre de terminal
    # Instead of ionic serve --host=0.0.0.0
    ionic serve --host=localhost
  2. Activer HTTPS dans Ionic

    Fenêtre de terminal
    ionic serve --ssl
  3. Tester sur des appareils réels

    Fenêtre de terminal
    # 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));
    }
    }

La documentation Firebase récente nécessite 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 du développementSi vous utilisez ionic serve sur un réseau IP (pas localhost), l'authentification Facebook échouera en raison des restrictions de crypto API. Utilisez localhost ou HTTPS pour les tests web.

Section intitulée « Résolution des problèmes »

Problèmes courants et solutions
  1. 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
  2. Vérifiez que vous utilisez le bon fichier de clé de stockage lors de la génération du hachage  

    • Vérifiez que toutes les entrées du 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
  3. Problèmes iOS courants

    • Assurez-vous que toutes les entrées de Info.plist sont correctes
    • Vérifiez que les schémas d'URL sont correctement configurés
    • Vérifiez que votre ID de bundle correspond à celui enregistré dans le tableau de bord Facebook
  1. Avant de procéder au test, ajoutez des utilisateurs de test dans le console de développement Facebook

    • Allez dans Roles > Utilisateurs de test
    • Créez un utilisateur de test
    • Utilisez ces informations d'identification pour les tests
  2. Testez les deux versions de débogage et de production

    • Version de débogage avec clé de hachage de débogage
    • Version de production avec clé de hachage de production
    • Testez sur les deux émulateurs et les appareils physiques

Souvenez-vous de tester la connexion complète, y compris :

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

Si vous utilisez Configuration de connexion Facebook pour planifier l'authentification et les flux de compte, connectez-l’avec Pour la capacité native dans Utilisation @capgo/capacitor-social-login Utilisation @capgo/capacitor-social-login pour le détail d'implémentation dans Utilisation @capgo/capacitor-social-login, Utilisation @capgo/capacitor-passkey pour le détail d'implémentation dans Utilisation @capgo/capacitor-passkey, Utilisation @capgo/capacitor-native-biometric pour le détail d'implémentation dans Utilisation @capgo/capacitor-native-biometric, et for the implementation detail in @capgo/capacitor-native-biometric, and Utilisation @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login pour les détails d'implémentation dans l'authentification à deux facteurs.