> For the complete documentation index, see [llms.txt](https://docs.thewalletcrew.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.thewalletcrew.io/guides-enrolment/fr/inscription/enrolment-form/social-sign-in/facebook-sign-in.md).

# 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 d’application dans la console d’administration de The Wallet Crew.

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

Commencez par [Connexion sociale](/guides-enrolment/fr/inscription/enrolment-form/social-sign-in.md) pour comprendre le parcours utilisateur. Revenez ensuite ici pour la configuration du fournisseur.

<div data-with-frame="true"><figure><img src="https://1734667767-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlFokgwgJiwLXu7G8MVSJ%2Fuploads%2Ftx8p7cIfISOvhdm1PdZP%2FFB-Social-Sign-In.png?alt=media&amp;token=02655c9d-0d52-4678-9fc7-abc31ef7f79e" alt="FB-Social-Sign-In-Example" width="375"><figcaption><p>Se connecter avec Facebook dans un exemple de formulaire d'inscription</p></figcaption></figure></div>

### 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 **The Wallet Crew** console d'administration.

#### Prérequis

* Accès à **Meta for Developers** .
* Autorisation de créer ou de gérer **applications Facebook**.
* La liste des domaines sur lesquels vos formulaires d'inscription s'exécuteront (prod + préproduction + dev + personnalisé).

### Créez l'application Facebook

{% stepper %}
{% step %}

#### **Ouvrez le portail Meta pour les développeurs**

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

<p align="center"><a href="https://developers.facebook.com/apps" class="button secondary" data-icon="chevrons-right">Tableau de bord Meta Apps</a></p>
{% endstep %}

{% step %}

#### **Créez une nouvelle application**

1. Cliquez sur `Créer une 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. Attribuez un nom. Exemple : `neostore login`.
4. Terminez l'assistant de création de l'application et confirmez votre compte développeur si cela vous est demandé.
   {% endstep %}

{% step %}

#### **Ajoutez le produit Facebook Login**

1. Depuis votre tableau de bord de l'application, trouvez la **Ajouter un produit** section.
2. Cliquez sur `Configurer` sur **Facebook Login for Business** (ou **Facebook Login**).
3. Choisissez `Web` comme plateforme.
4. Saisissez l'URL de votre site web (par ex. `https://app.neostore.cloud`) et enregistrez.
   {% endstep %}

{% step %}

#### **Configurez les domaines autorisés et les URI de redirection**

Accédez à **Facebook Login → Paramètres** dans la barre latérale gauche et configurez ce qui suit :

**URI de redirection OAuth valides** — ajoutez une URI par environnement :

* `https://app.neostore.cloud`
* `https://app-qa.neostore.cloud`
* `https://app-dev.neostore.cloud`
* N'importe quel **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 d'autorisation de domaines soient toutes deux renseignées.
> {% endstep %}

{% step %}

#### **Passez l'application en mode En direct**

1. Dans la barre supérieure du tableau de bord de l'application, faites passer l'application de **Développement** sur **En direct**.
2. Si cela vous est demandé, fournissez une **URL de la politique de confidentialité** — Meta l'exige 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 direct pour que tous les utilisateurs puissent s'authentifier.
> {% endstep %}
> {% endstepper %}

> **Info :** La connexion Facebook pour le web utilise uniquement le **App ID**. Vous pouvez le coller sans risque 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.

<p align="center"><a href="https://admin.thewalletcrew.io/tenant/~/settings/social/facebook" class="button secondary" data-icon="chevrons-right">Connexions sociales -> Facebook</a></p>

<div data-with-frame="true"><figure><img src="https://1734667767-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlFokgwgJiwLXu7G8MVSJ%2Fuploads%2F3Go3v1GfcyUgGaqYwjSp%2Fimage.png?alt=media&amp;token=c33df760-daec-44db-a57a-c74514803a33" alt="The Wallet Crew - Facebook Social Sign In configuration" width="563"><figcaption><p>Configuration de connexion sociale Facebook de The Wallet Crew</p></figcaption></figure></div>

2. Collez l’ **App ID** 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

<pre class="language-yaml"><code class="lang-yaml"><strong>signinOptions:
</strong>  providers:
    - type: facebook
</code></pre>

Pour plus d’informations, consultez [Formulaire d’inscription](/guides-enrolment/fr/inscription/enrolment-form.md).

### FAQ

<details>

<summary><strong>Avons-nous besoin d'un secret d'application Facebook ?</strong></summary>

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.

</details>

<details>

<summary><strong>Devons-nous configurer des « URI de redirection autorisées » dans Facebook ?</strong></summary>

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

Ajoutez l'origine de chaque environnement sous **Facebook Login → Paramètres → URI de redirection OAuth valides**.

</details>

<details>

<summary><strong>Que faut-il exactement ajouter comme domaine autorisé ?</strong></summary>

Ajoutez le **origine uniquement**: `schéma://hôte` (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)

</details>

<details>

<summary><strong>Nous utilisons un domaine personnalisé. Que devons-nous faire ?</strong></summary>

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

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

</details>

<details>

<summary><strong>Pourquoi répertorions-nous les origines de prod, QA et dev ?</strong></summary>

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

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

</details>

<details>

<summary><strong>Où activons-nous le bouton Facebook dans le parcours utilisateur ?</strong></summary>

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

Voir [Connexion sociale](/guides-enrolment/fr/inscription/enrolment-form/social-sign-in.md) et [Formulaire d’inscription](/guides-enrolment/fr/inscription/enrolment-form.md).

</details>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.thewalletcrew.io/guides-enrolment/fr/inscription/enrolment-form/social-sign-in/facebook-sign-in.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.