> 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

Configurez la connexion Google (ID client OAuth 2.0) et associez-la à la connexion sociale de The Wallet Crew.

Utilisez cette page pour 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 client. Revenez ensuite ici pour la configuration du fournisseur.

<div data-with-frame="true"><figure><img src="https://831874859-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlFokgwgJiwLXu7G8MVSJ%2Fuploads%2FzfVT9pePqimlWGvzej2B%2FGoogle-Social-Sign-In.png?alt=media&#x26;token=f53cebf5-739a-42ee-8103-ed85247e6a6e" 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 qui est configuré ici

* Un **ID client OAuth 2.0 Google**.
* **Origines JavaScript autorisées** pour les domaines du formulaire d'inscription.
* L'ID client stocké dans **The Wallet Crew** console d'administration.

#### Prérequis

* Accès au compte de la marque **Google Cloud Console** projet.
* Autorisation de créer **des ID client OAuth 2.0**.
* La liste des domaines où les formulaires d’inscription seront exécutés (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éez un client OAuth d'application Web**

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

{% step %}

#### **Configurez les origines**

Ajoutez **Origines JavaScript autorisées** pour chaque domaine utilisé.

* `https://app.neostore.cloud`
* `https://app-qa.neostore.cloud`
* `https://app-dev.neostore.cloud`
* N'importe quel **domaine personnalisé** utilisé pour les formulaires d'inscription (ajoutez l'origine exacte).

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

<figure><img src="https://831874859-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlFokgwgJiwLXu7G8MVSJ%2Fuploads%2Fx3PsBEB2MtC5fKa0XShX%2Fenroll-google-sign-google-oauth-client-settings.png?alt=media&#x26;token=92554f52-1803-48c7-b621-0ceb66c4cb19" alt="Google OAuth client settings"><figcaption><p>Vérifiez que chaque origine est répertoriée et que la liste des URI de redirection est vide.</p></figcaption></figure>

<figure><img src="https://831874859-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlFokgwgJiwLXu7G8MVSJ%2Fuploads%2F5FoPcv2y3SENuMJp2Ran%2Fenroll-google-sign-wallet-crew-google-social-login-settings.png?alt=media&#x26;token=f770156b-7114-4049-8d64-55b33cb7b574" alt="The Wallet Crew Google social login settings"><figcaption><p>Vérifiez que l'ID client enregistré ici correspond à celui émis par Google.</p></figcaption></figure>
{% endstep %}
{% endstepper %}

{% hint style="info" %}
La connexion Google pour le Web utilise le **ID client**. Vous pouvez le coller sans risque dans la console d'administration.

Ne partagez aucun **secret client**. Il n'est pas nécessaire pour ce flux.
{% endhint %}

### Configurez 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="https://831874859-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlFokgwgJiwLXu7G8MVSJ%2Fuploads%2FMgY4eCvOQQAPBgBpeiaj%2Fimage.png?alt=media&#x26;token=c17d0e73-ed9f-44ed-b0de-b1535d6eb16a" 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 l’ **ID client** depuis Google.
3. Enregistrez.

### Activer Google sur le 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 où la connexion sociale doit être activée et ajoutez ces lignes :

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

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 client Google ?</strong></summary>

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

Si un secret client apparaît dans Google Cloud Console, ne le collez nulle part dans The Wallet Crew.

</details>

<details>

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

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

L'ajout d'URI de redirection n'aide généralement pas. Cela peut aussi compliquer le débogage plus tard.

</details>

<details>

<summary><strong>Que doit-on exactement ajouter en tant qu'« origine JavaScript autorisée » ?</strong></summary>

Ajoutez le **origine uniquement**: `schéma://hôte` (et le port s'il est utilisé).

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 le domaine personnalisé en tant que **origine JavaScript autorisée** dans Google Cloud Console.

Utilisez le domaine exact que les clients 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 à l'exécution.

Si un client accède à QA mais que seule la prod est configurée, Google rejette la connexion.

</details>

<details>

<summary><strong>Où le bouton Google est-il activé dans le parcours client ?</strong></summary>

La configuration du fournisseur ne suffit pas. Google doit également être activé 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.