> 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/google-sign-in.md).

# Configuration de la connexion Google

Utilisez ceci lorsque vous souhaitez activer le **Google** 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. Puis revenez ici pour la configuration du fournisseur.

<div data-with-frame="true"><figure><img src="/files/f67b257d39d3db34fcc0bc2c0606145bb58d65e8" alt="Google-Social-Sign-In-Example" width="375"><figcaption><p>Connectez-vous avec Google dans un exemple de formulaire d'inscription</p></figcaption></figure></div>

### Vue d’ensemble

#### Ce que vous allez configurer

* Un **ID client OAuth 2.0 Google**.
* **Origines JavaScript autorisées** pour les domaines de votre formulaire d'inscription.
* L'ID client stocké dans **L’équipe Wallet** la console d'administration.

#### Prérequis

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

### Configurer Se connecter avec Google

{% stepper %}
{% step %}

#### **Ouvrir les identifiants**

Ouvrez la Console Google Cloud **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éez un client OAuth pour application Web**

1. Cliquez `Créer des identifiants` → `ID client OAuth`.
2. Choisissez le type d'application : `Application Web`.
3. Donnez 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és** vide.

![Paramètres du client OAuth Google](/files/2d92613d9c76e7a900a256dde973eda2f4be599b)

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

{% hint style="info" %}
Google Sign-In pour le web utilise le **ID client**. Vous pouvez le coller sans risque dans la console d'administration.

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

### Configurez Google dans 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/e5c36830ba6ad0759fcf751b20e51706b578dc25" alt="The Wallet Crew - Google Social Sign In configuration" width="563"><figcaption><p>Configuration de connexion sociale Google de Wallet Crew</p></figcaption></figure></div>

2. Collez l’ **ID client** depuis Google.
3. Enregistrez.

### Activez Google 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

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

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

### FAQ

<details>

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

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

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

</details>

<details>

<summary><strong>Faut-il configurer « URI de redirection autorisés » dans Google ?</strong></summary>

Non. Laissez **URI de redirection autorisés** 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 en tant qu’« 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é en tant qu’ **origine JavaScript autorisée** dans la Console Google Cloud.

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>

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

Si un utilisateur accède à QA mais que seule la prod est configurée, 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 également activer Google 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/google-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.