Configurer la connexion sociale avec Facebook

Le connecteur officiel Logto pour la connexion sociale Facebook.

astuce

Dans ce guide, nous supposons que vous avez des connaissances de base sur les Connecteurs Logto. Si ce n'est pas le cas, consultez le guide Configurer les connecteurs pour commencer.

Commencer

Le connecteur Facebook fournit un moyen concis pour votre application d'utiliser le système d'Authentification OAuth 2.0 de Facebook.

Enregistrer un compte développeur Facebook

Inscrivez-vous en tant que développeur Facebook si vous n'en avez pas déjà un

Configurer une application Facebook

1. Visitez la page Apps.
2. Cliquez sur votre application existante ou créez-en une nouvelle si nécessaire.
   • Le type d'application sélectionné dépend de vous, mais il doit avoir le produit Facebook Login.
3. Sur la page du tableau de bord de l'application, faites défiler jusqu'à la section "Ajouter un produit" et cliquez sur le bouton "Configurer" sur la carte "Facebook Login".
4. Passez la page de démarrage rapide de Facebook Login, et cliquez sur la barre latérale -> "Produits" -> "Facebook Login" -> "Paramètres".
5. Dans la page des paramètres de Facebook Login, remplissez ${your_logto_origin}/callback/${connector_id} dans le champ "URI de redirection OAuth valides". Le connector_id peut être trouvé sur la barre supérieure de la page des détails du connecteur de la Logto Admin Console. Par exemple :
   • https://logto.dev/callback/${connector_id} pour la production
   • https://localhost:3001/callback/${connector_id} pour les tests dans l'environnement local
6. Cliquez sur le bouton "Enregistrer les modifications" en bas à droite.

Composer le JSON du connecteur

1. Dans la page du tableau de bord de l'application Facebook, cliquez sur la barre latérale -> "Paramètres" -> "Basique".
2. Vous verrez l'"ID de l'application" et le "Secret de l'application" sur le panneau.
3. Cliquez sur le bouton "Afficher" suivant la boîte de saisie du Secret de l'application pour copier son contenu.
4. Remplissez les paramètres du connecteur Logto :
   • Remplissez le champ clientId avec la chaîne de l'ID de l'application.
   • Remplissez le champ clientSecret avec la chaîne du Secret de l'application.
   • Remplissez le champ scope avec une liste séparée par des virgules ou des espaces de Permissions en chaîne. Si vous ne spécifiez pas de Portée, la Portée par défaut est email,public_profile.

Tester la connexion avec les utilisateurs de test de Facebook

Vous pouvez utiliser les comptes des utilisateurs de test, développeurs et administrateurs pour tester la connexion avec l'application concernée en mode développement et en direct.

Vous pouvez également mettre l'application en direct directement afin que tout utilisateur Facebook puisse se connecter avec l'application.

• Dans la page du tableau de bord de l'application, cliquez sur la barre latérale -> "Rôles" -> "Utilisateurs de test".
• Cliquez sur le bouton "Créer des utilisateurs de test" pour créer un utilisateur de test.
• Cliquez sur le bouton "Options" de l'utilisateur de test existant, et vous verrez plus d'opérations, par exemple, "Changer le nom et le mot de passe".

Publier les paramètres de connexion Facebook

Habituellement, seuls les utilisateurs de test, administrateurs et développeurs peuvent se connecter avec l'application concernée en mode développement.

Pour permettre aux utilisateurs Facebook normaux de se connecter avec l'application dans l'environnement de production, vous devrez peut-être passer votre application Facebook en mode en direct, selon le type d'application. Par exemple, l'application de type business pur n'a pas le bouton de basculement "en direct", mais cela ne bloquera pas votre utilisation.

1. Dans la page du tableau de bord de l'application Facebook, cliquez sur la barre latérale -> "Paramètres" -> "Basique".
2. Remplissez les champs "URL de la politique de confidentialité" et "Suppression des données utilisateur" sur le panneau si nécessaire.
3. Cliquez sur le bouton "Enregistrer les modifications" en bas à droite.
4. Cliquez sur le bouton de basculement "En direct" sur la barre supérieure de l'application.

Types de configuration

Nom	Type
clientId	string
clientSecret	string
scope	string

Références

• Facebook Login - Documentation - Facebook for Developers
  • Construire manuellement un flux de connexion
  • Guide des Permissions