# Configuration de Google Sign-In

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

Commencez par [Connexion sociale](/docs/fr/inscrire/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="/files/637249ef26a2c9fad80026e5ab0ca7858fc803e4" alt="Google-Social-Sign-In-Example" width="375"><figcaption><p>Se connecter avec Google dans un exemple de formulaire d’inscription</p></figcaption></figure></div>

### Vue d’ensemble

#### Ce que vous allez configurer

* Un **Google OAuth 2.0 Client ID**.
* **Origines JavaScript autorisées** pour les domaines de votre formulaire d’inscription.
* Le Client ID stocké dans **The Wallet Crew** console d’administration.

#### Prérequis

* Accès au **Google Cloud Console** de votre marque.
* Autorisation de créer des **OAuth 2.0 Client IDs**.
* La liste des domaines sur lesquels vos formulaires d’inscription fonctionneront (prod + staging + dev + personnalisé).

### Configurer la connexion avec Google

{% stepper %}
{% step %}

#### **Ouvrir les identifiants**

Ouvrez la Google Cloud Console **Identifiants** page :

<p align="center"><a href="https://console.developers.google.com/apis/credentials" class="button secondary" data-icon="chevrons-right">Page des identifiants Google</a></p>
{% endstep %}

{% step %}

#### **Créer un client OAuth pour application Web**

1. Cliquez sur `Créer des identifiants` → `ID client OAuth`.
2. Choisissez le type d’application : `Application Web`.
3. Définissez un nom. Exemple : `connexion neostore`.
   {% endstep %}

{% step %}

#### **Configurer les origines**

Ajoutez **Origines JavaScript autorisées** pour chaque domaine que vous utiliserez.

* `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).

Laissez **URI de redirection autorisées** vide.

![Paramètres du client OAuth Google](/files/6ced095b6fe39d60123772852dc82e0061c72fa4)

![Paramètres de connexion sociale Google de Wallet Crew](/files/193a34c26f9cde23efa6d09b3de7ad0c9ebdb05f)
{% endstep %}
{% endstepper %}

{% hint style="info" %}
La connexion Google pour le web utilise le **ID client**. Il est sûr de le coller dans la console d’administration.

Ne partagez pas de **secret client**Google. Vous ne devriez pas en avoir besoin pour ce flux.
{% endhint %}

### Configurer Google dans The Wallet Crew

1. Ouvrez **Connexions sociales → Google** dans la console d’administration.

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

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

2. Collez le **ID client** de Google.
3. Enregistrez.

### Activer Google sur votre formulaire d’inscription

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

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

```yaml
signinOptions:
  providers:
    - type: android
      displayProps:
        isMobile: true
        isAndroid: true
```

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

### FAQ

<details>

<summary><strong>Avons-nous besoin d’un secret client Google ?</strong></summary>

Non. Cette configuration utilise uniquement le **Google Client ID** .

Si vous voyez un secret client dans Google Cloud Console, ne le collez nulle part dans Wallet Crew.

</details>

<details>

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

Non. Laissez **URI de redirection autorisées** vide pour ce flux.

Si vous ajoutez des URI de redirection, cela n’aide généralement pas. Cela peut aussi compliquer le débogage plus tard.

</details>

<details>

<summary><strong>Que faut-il exactement ajouter comme « origine JavaScript autorisée » ?</strong></summary>

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

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é comme **origine JavaScript autorisée** dans Google Cloud Console.

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 prod, QA et dev ?</strong></summary>

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

Si un utilisateur accède à QA mais que seul prod est configuré, Google rejette la connexion.

</details>

<details>

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

La configuration du fournisseur ne suffit pas. Vous devez aussi activer Google sur le formulaire d’inscription.

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

</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/google-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.