# Configuration de Facebook Sign-in

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

Commencez par [Connexion sociale](https://docs.thewalletcrew.io/enroll/enrolment-form/social-sign-in) pour comprendre le parcours utilisateur. Revenez ensuite ici pour la configuration du fournisseur.

<div data-with-frame="true"><figure><img src="/files/c005cd0e1b4fe77c4de6c3781fb0f1708482f561" 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>

### Aperçu

#### Ce que vous allez configurer

* Un **Facebook App** 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 **la console d’administration** The Wallet Crew.

#### Prérequis

* Accès au compte **Meta for Developers** de votre marque.
* Autorisation de créer ou de gérer des **Facebook Apps**.
* La liste des domaines sur lesquels vos formulaires d’inscription seront utilisés (prod + staging + dev + personnalisé).

### Créer l’application Facebook

{% stepper %}
{% step %}

#### **Ouvrez le portail des développeurs Meta**

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éer une nouvelle application**

1. Cliquez sur `Create App`.
2. Sélectionnez le cas d’utilisation : `Authentifier et demander des données aux utilisateurs` (ou `Consumer` selon la version de votre tableau de bord Meta).
3. Définissez un nom. Exemple : `neostore login`.
4. Terminez l’assistant de création de l’application et confirmez votre compte développeur si demandé.
   {% endstep %}

{% step %}

#### **Ajouter le produit Facebook Login**

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

{% step %}

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

Accédez à **Facebook Login → Settings** dans la barre latérale gauche et configurez les éléments suivants :

**Valid OAuth Redirect URIs** — ajoutez une 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).

**Allowed Domains for the JavaScript SDK** — ajoutez la même liste d’origines (schéma + hôte uniquement, sans chemin).

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.
> {% endstep %}

{% step %}

#### **Passer l’application en mode Live**

1. Dans la barre supérieure du tableau de bord de l’application, faites passer l’application de **Development** à **Live**.
2. Si demandé, fournissez une **URL de politique de confidentialité** — cela est requis par Meta avant la mise en ligne.

> En mode Development, seuls les utilisateurs répertoriés comme testeurs ou développeurs de l’application peuvent se connecter. Passez en Live pour que tous les utilisateurs puissent s’authentifier.
> {% endstep %}
> {% endstepper %}

> **Info :** La connexion Facebook sur le web utilise uniquement l’ **App ID**. Vous pouvez le coller sans risque dans la console d’administration.

### Ajouter l’App ID dans The Wallet Crew

1. Ouvrez **Social logins → 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">Social logins -> Facebook</a></p>

<div data-with-frame="true"><figure><img src="/files/053ce1660e653c841cb94530ee12222c1bacb243" alt="The Wallet Crew - Facebook Social Sign In configuration" width="563"><figcaption><p>Configuration de la connexion sociale Facebook de The Wallet Crew</p></figcaption></figure></div>

2. Collez le **App ID** de Meta for Developers.
3. Collez le **App Secret** de Meta for Developers.&#x20;
4. Enregistrez.

### Activer Facebook sur votre formulaire d’inscription

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

Allez dans `configuration avancée -> Layout`  Ouvrez le layout sur lequel 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, voir [Formulaire d’inscription](/docs/fr/inscrire/enrolment-form.md).

### FAQ

<details>

<summary><strong>Avons-nous besoin d’un App Secret Facebook ?</strong></summary>

Non. Cette configuration utilise le **App ID** uniquement.

Si vous voyez un App Secret dans Meta for Developers, ne le collez nulle part dans Wallet Crew.

</details>

<details>

<summary><strong>Faut-il configurer les « Authorized redirect URIs » dans Facebook ?</strong></summary>

Oui — contrairement à Google, Facebook **exige** que les valid OAuth Redirect URIs soient explicitement listées.

Ajoutez chaque origine d’environnement sous **Facebook Login → Settings → Valid OAuth Redirect URIs**.

</details>

<details>

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

Ajoutez l’ **origine uniquement**: `schéma://hôte` (et le port si vous utilisez un port 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 à **Valid OAuth Redirect URIs** et **Allowed Domains for the JavaScript SDK** dans les paramètres de Facebook Login.

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

</details>

<details>

<summary><strong>Pourquoi listons-nous les origines prod, QA et dev ?</strong></summary>

Facebook valide l’origine au moment de l’exécution.

Si un utilisateur arrive sur QA mais que seul prod est configuré, 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 aussi activer Facebook sur le formulaire d’inscription.

Voir [Connexion sociale](https://docs.thewalletcrew.io/enroll/enrolment-form/social-sign-in) et [Formulaire d’inscription](https://docs.thewalletcrew.io/enroll/enrolment-form).

</details>


---

# Agent Instructions: 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:

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

The question should be specific, self-contained, and written in natural language.
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.