Configuration de la connexion Facebook

Configurez Facebook Login pour les formulaires d’inscription : créez une application Facebook, définissez les URI de redirection et les domaines autorisés, puis ajoutez l’ID de l’application dans la console d’administration The Wallet Crew.

Utilisez ceci lorsque vous souhaitez activer le Facebook bouton dans un formulaire d’inscription.

Commencez par Connexion sociale pour comprendre le parcours utilisateur. Puis revenez ici pour la configuration du fournisseur.

Connecter avec Facebook dans un exemple de formulaire d’inscription

Vue d’ensemble

Ce que vous allez configurer

• Un Application Facebook avec le produit Facebook Login activé.
• URI de redirection OAuth autorisées et domaines valides pour votre formulaire d'inscription.
• L'App ID stocké dans L’équipe Wallet la console d'administration.

Prérequis

• L’accès à votre marque Meta for Developers compte.
• L’autorisation de créer ou de gérer Applications Facebook.
• La liste des domaines sur lesquels vos formulaires d’inscription seront déployés (prod + staging + dev + personnalisés).

Créez l’application Facebook

1

Ouvrez le portail des développeurs Meta

Accédez au tableau de bord des applications de Meta for Developers :

Tableau de bord des applications Meta

2

Créer une nouvelle application

1. Cliquez Créer l’application.
2. Sélectionnez le cas d’utilisation : Authentifier et demander des données aux utilisateurs (ou Consommateur selon la version de votre tableau de bord Meta).
3. Donnez un nom. Exemple : connexion neostore.
4. Terminez l’assistant de création de l’application et confirmez votre compte développeur si vous y êtes invité.

3

Ajoutez le produit Facebook Login

1. Dans le tableau de bord de votre application, recherchez la Ajouter un produit section.
2. Cliquez Configurer sur Facebook Login pour les entreprises (ou Facebook Login).
3. Choisissez Web comme plateforme.
4. Saisissez l’URL de votre site Web (par ex. https://app.neostore.cloud) puis enregistrez.

4

Configurez les domaines autorisés et les URI de redirection

Accédez à Connexion Facebook → Paramètres dans la barre latérale gauche et configurez les éléments suivants :

URI de redirection OAuth valides — ajoutez un URI par environnement :

• https://app.neostore.cloud
• https://app-qa.neostore.cloud
• https://app-dev.neostore.cloud
• Tout domaine personnalisé que vous utilisez pour les formulaires d'inscription (ajoutez l'origine exacte).

Domaines autorisés pour le SDK JavaScript — ajoutez la même liste d’origines (schéma + hôte uniquement, sans chemins).

Enregistrez vos modifications.

Remarque : Contrairement à Google, Facebook exige que l’URI de redirection et la liste des domaines autorisés soient toutes deux renseignées.

5

Passez l’application en mode En ligne

1. Dans la barre supérieure du tableau de bord de l’application, basculez l’application de Développement à En ligne.
2. Si on vous y invite, fournissez une URL de la politique de confidentialité — c’est exigé par Meta avant la mise en ligne.

En mode Développement, seuls les utilisateurs répertoriés comme testeurs ou développeurs de l’application peuvent se connecter. Passez en mode En ligne afin que tous les utilisateurs puissent s’authentifier.

Info : La connexion Facebook pour le web utilise uniquement le App ID. Il est sûr de le coller dans la console d’administration.

Ajoutez l’ID de l’application dans The Wallet Crew

1. Ouvrez Connexions sociales → Facebook dans la console d'administration.

Connexions sociales -> Facebook

Configuration de la connexion sociale Facebook de The Wallet Crew

1. Collez l’ App ID depuis Meta for Developers.
2. Collez le secret d’application depuis Meta for Developers.
3. Enregistrez.

Activez Facebook sur votre formulaire d’inscription

Activez le fournisseur dans les paramètres du formulaire d’inscription.

Allez dans configuration avancée -> Layout Ouvrez la mise en page sur laquelle vous souhaitez activer la connexion sociale et ajoutez ces lignes

signinOptions:
  providers:
    - type : facebook

Pour plus d’informations, voir Formulaire d'inscription.

FAQ

Avons-nous besoin d’un secret d’application Facebook ?

Non. Cette configuration utilise le App ID uniquement.

Si vous voyez un secret d’application dans Meta for Developers, ne le collez nulle part dans Wallet Crew.

Devrions-nous configurer « URI de redirection autorisées » dans Facebook ?

Oui — contrairement à Google, Facebook exige que les URI de redirection OAuth valides soient explicitement répertoriées.

Ajoutez chaque origine d’environnement sous Connexion Facebook → Paramètres → URI de redirection OAuth valides.

Que faut-il exactement ajouter comme domaine autorisé ?

Ajoutez l’ origine uniquement: scheme://host (et le port si vous en utilisez un non standard).

Exemples :

• ✅ https://app.neostore.cloud
• ✅ https://brand.example.com
• ❌ https://app.neostore.cloud/molia/mobile (les chemins ne sont pas autorisés)

Nous utilisons un domaine personnalisé. Que devons-nous faire ?

Ajoutez votre domaine personnalisé à la fois à URI de redirection OAuth valides et Domaines autorisés pour le SDK JavaScript dans les paramètres de Connexion Facebook.

Utilisez le domaine exact que les utilisateurs voient dans le navigateur. Exemple : https://wallet.brand.com.

Pourquoi répertorions-nous les origines de prod, QA et dev ?

Facebook valide l’origine à l’exécution.

Si un utilisateur arrive en QA alors que seule la prod est configurée, Facebook rejette la connexion.

Où active-t-on le bouton Facebook dans le parcours utilisateur ?

La configuration du fournisseur ne suffit pas. Vous devez également activer Facebook sur le formulaire d’inscription.

Voir Connexion sociale et Formulaire d'inscription.