Raccorder la connexion Google

Pour que les utilisateurs de votre service s'inscrivent avec un compte Google, vous enregistrez d'abord ce service auprès de Google et vous y récupérez un ID client et un code secret client.

Cette page indique l'ordre dans lequel récupérer l'ID client et le code secret client. La manière de les placer dans WEEGLOO se trouve dans Placer l'ID client et le code secret client dans WEEGLOO, et la manière de faire apparaître le nom et le logo de votre service sur l'écran de consentement dans Afficher le nom et le logo de votre service sur l'écran de consentement.

Récupérer l'ID client et le code secret client chez Google

Les quatre étapes ci-dessous se déroulent dans la Google Cloud Console. Vous devez être connecté avec votre compte Google. Ce que vous faites ici n'entraîne aucun coût.

Si vous utilisez plusieurs comptes Google, un lien peut s'ouvrir sur un compte que vous n'aviez pas prévu. Cliquez sur la photo de profil en haut à droite de l'écran pour vérifier de quel compte il s'agit, et changez de compte si ce n'est pas celui que vous vouliez.

1

Créer un projet

Si vous avez déjà un projet en cours d'utilisation, vous pouvez le réutiliser tel quel au lieu d'en créer un nouveau. Dans ce cas, passez cette étape et allez à Configurer l'écran de consentement.

  1. Ouvrez l'écran du nouveau projet (https://console.cloud.google.com/projectcreate (s'ouvre dans un nouvel onglet)).

  2. Dans Nom du projet, saisissez un nom que vous reconnaîtrez plus tard (par exemple Le Dressing Douillet).

  3. Cliquez sur Créer.

    L'écran Nouveau projet. « Le Dressing Douillet » est saisi dans le nom du projet et le bouton Créer se trouve en dessous

  4. Vérifiez que le nom du projet en haut de la console est bien celui que vous venez de créer.

3

Créer un client OAuth

C'est sur le client que vous créez ici que vous enregistrez l'adresse à laquelle revient le résultat de la connexion.

  1. Ouvrez l'écran Clients de Google Auth Platform (https://console.cloud.google.com/auth/clients (s'ouvre dans un nouvel onglet)).

  2. Cliquez sur Créer un client.

    L'écran Clients. La liste des ID clients OAuth 2.0 est vide et Créer un client se trouve au-dessus

  3. Dans Type d'application, choisissez Application Web.

    La liste déroulante Type d'application est ouverte et montre six types, dont Application Web

  4. Dans Nom, saisissez un nom qui vous permettra de reconnaître ce client (par exemple Le Dressing Douillet).

  5. Laissez vide Origines JavaScript autorisées.

  6. Cliquez sur Ajouter un URI dans URI de redirection autorisés.

  7. Dans le champ qui apparaît, collez l'adresse ci-dessous. Choisissez votre Space et l'identifiant est renseigné.

    Space
    https://auth.weegloo.com/v1/spaces/{spaceId}/login/oauth2/code/google

    Si vous ne savez pas quel est votre Space et que vous avez confié le raccordement à un agent IA, vous pouvez aussi le lui demander. Demandez dans la fenêtre de conversation « Donne-moi l'adresse de redirection à enregistrer pour la connexion Google » et vous recevez l'adresse complète.

  8. Cliquez sur Créer.

    Le formulaire avec l'adresse renseignée dans URI de redirection autorisés. Origines JavaScript autorisées est vide

La liste contient aussi des types comme Android ou iOS, mais vous choisissez Application Web même lorsque vous ajoutez la connexion à une application mobile. C'est parce que le résultat de la connexion revient à l'adresse web de WEEGLOO et non à votre application. Le Nom sert à distinguer les clients sur les écrans de Google, et il n'est pas visible pour vos utilisateurs.

L'adresse enregistrée peut ne pas être prise en compte immédiatement

Sous le formulaire figure l'indication de Google « Remarque : L'application des paramètres peut prendre de cinq minutes à quelques heures ». Juste après l'enregistrement, l'adresse peut ne pas être encore prise en compte et la connexion peut être bloquée. Dans ce cas, laissez passer un peu de temps et réessayez.

4

Copier l'ID client et le code secret client

Lorsque vous cliquez sur Créer, la fenêtre Client OAuth créé apparaît. L'ID client et le code secret client qui y sont inscrits sont ceux à placer dans WEEGLOO.

Une fois la fenêtre fermée, le code secret client n'est plus consultable

Cette fenêtre porte l'avertissement « Vous ne pourrez plus afficher ni télécharger le code secret du client une fois que vous aurez fermé cette boîte de dialogue ». Copiez l'ID client et le code secret client avant de fermer la fenêtre. Si vous voulez récupérer les valeurs sous forme de fichier, vous pouvez aussi cliquer sur Télécharger au format JSON.

  1. Cliquez sur l'icône de copie à droite de l'ID client pour copier la valeur.

  2. Cliquez sur l'icône de copie à droite du Code secret du client pour copier la valeur.

  3. Une fois l'ID client et le code secret client mis de côté, cliquez sur OK.

    La fenêtre Client OAuth créé. L'ID client, le code secret du client et l'avertissement indiquant qu'on ne pourra plus les revoir sont visibles

Voici dans quel champ du studio de contenu l'ID client et le code secret client se placent.

Écran de GoogleStudio de contenu
ID clientClient ID
Code secret du clientClient Secret

Le code secret client est un secret, comme son nom l'indique. Ne le communiquez à personne et ne l'inscrivez nulle part en public.

Placer l'ID client et le code secret client dans WEEGLOO

Vous avez maintenant l'ID client et le code secret client en main. À partir d'ici, le chemin diffère selon la manière dont vous avez travaillé jusqu'à présent.

Si vous configuriez directement dans le studio de contenu, procédez ainsi.

  1. Revenez à l'activation d'une connexion sociale dans Connexion des membres du service.
  2. Activez Google.
  3. Saisissez l'ID client dans le champ Client ID de l'étape Step 2.
  4. Saisissez le code secret client dans le champ Client Secret.
  5. Cliquez sur Enregistrer.

Si vous avez confié le raccordement à un agent IA et qu'il vous a demandé d'aller chercher l'ID client et le code secret client, collez telles quelles les deux valeurs récupérées dans la fenêtre de conversation et poursuivez ce que vous faisiez. L'agent prend en charge la suite de la configuration.

Afficher le nom et le logo de votre service sur l'écran de consentement

Sur l'écran de consentement qui apparaît lorsqu'un utilisateur se connecte avec un compte Google, c'est d'abord le domaine de WEEGLOO qui s'affiche à la place du nom de votre service. L'utilisateur reconnaît alors difficilement à quel service il s'inscrit, et il le distingue difficilement d'un faux site imité. Lorsque le nom et le logo de votre service s'affichent, l'utilisateur s'inscrit en confiance.

La connexion fonctionne aussi dans cet état, ce n'est donc pas obligatoire. Il est recommandé de le faire avant d'ouvrir réellement le service. Le nom et le logo s'affichent une fois obtenue la validation de marque (s'ouvre dans un nouvel onglet) de Google.

1

Préparer la page d'accueil et la politique de confidentialité

Google vérifie sur la page d'accueil que le nom affiché sur l'écran de consentement est bien celui du service réel. Préparez une page d'accueil et une politique de confidentialité sur votre site.

Si vous avez confié le raccordement à un agent IA, demandez-lui « Crée la page d'accueil et la politique de confidentialité nécessaires à la validation de marque Google ».

  • Page d'accueil : une page qui s'ouvre sans connexion, qui présente le service et qui renvoie vers la politique de confidentialité. Le bouton de connexion se place sur une autre page.
  • Politique de confidentialité : une page placée sous la même adresse que la page d'accueil, qui indique comment les informations reçues du compte Google sont utilisées et conservées.

Les conditions d'utilisation du service sont facultatives.

2

Faire valider le site dans la Search Console

C'est la Google Search Console qui prouve que la page d'accueil vous appartient.

Si vous avez confié le raccordement à un agent IA, déposez dans la fenêtre de conversation le fichier reçu au point 5 ci-dessous et demandez-lui « Place ce fichier sur le site et redéploie-le ». L'agent prend en charge le point 6.

  1. Ouvrez la Search Console (https://search.google.com/search-console (s'ouvre dans un nouvel onglet)). Le compte doit être propriétaire ou éditeur du projet Google Cloud.

  2. Cliquez sur Ajouter un site Web. Si vous avez déjà enregistré un site, cliquez sur Ajouter une propriété dans le menu de sélection de propriété en haut à gauche, puis sur Ajouter un site Web.

  3. Dans le champ Préfixe de l'URL de la fenêtre Sélectionner un type de propriété, saisissez l'adresse de la page d'accueil (par exemple https://dressing-douillet.weegloo.app/).

  4. Cliquez sur Continuer du côté Préfixe de l'URL.

  5. Dans Fichier HTML de la fenêtre Valider la propriété, cliquez sur le bouton portant le nom du fichier pour le télécharger. Laissez cette fenêtre ouverte.

    La fenêtre Valider la propriété de la Search Console. La méthode de validation recommandée, Fichier HTML, est dépliée et laisse voir le bouton portant le nom du fichier à télécharger, l'adresse de la page d'accueil où importer le fichier, et le bouton Valider en dessous

  6. Placez le fichier reçu, sous son nom d'origine, dans le dossier racine du site et redéployez-le (Remettre le site en ligne après l'avoir modifié).

  7. Revenez à la fenêtre Valider la propriété et cliquez sur Valider.

Cette étape se termine lorsque Propriété validée s'affiche.

Ne supprimez pas le fichier de validation

La Search Console revérifie périodiquement que ce fichier est toujours présent. Remettez-le également lorsque vous mettez le site en ligne à nouveau.

3

Renseigner les informations de marque

Vous indiquez à Google les pages préparées, le nom à afficher et le logo.

  1. Ouvrez l'écran Branding de Google Auth Platform (https://console.cloud.google.com/auth/branding (s'ouvre dans un nouvel onglet)).

  2. Dans Nom de l'application, saisissez exactement le nom du service inscrit sur la page d'accueil. Vous ne pouvez pas y mettre le nom d'un produit Google.

  3. Dans Logo de l'application, téléversez le logo propre à votre service. Le logo d'une autre marque n'est pas validé. Le fichier est un JPG, un PNG ou un BMP de 1MB au maximum, et un carré de 120×120px s'affiche le mieux.

  4. Dans Page d'accueil de l'application et Lien vers les règles de confidentialité de l'application, saisissez les adresses de la page d'accueil et de la politique de confidentialité. Si vous avez des conditions d'utilisation, saisissez-les aussi dans Lien vers les conditions d'utilisation de l'application.

  5. Dans Domaines autorisés, saisissez weegloo.app.

    • S'il n'y a aucune entrée, cliquez sur Ajouter un domaine et saisissez-le.
    • S'il existe déjà une entrée, remplacez la valeur de ce champ par weegloo.app. Une entrée existante peut ne pas être supprimable. Dans ce cas, il suffit d'en corriger la valeur.

    La section Domaines autorisés de l'écran Branding. La valeur du champ Domaine autorisé 1 a été remplacée par le domaine du Web Hosting, et le bouton Ajouter un domaine se trouve en dessous

  6. Cliquez sur Enregistrer.

4

Demander la validation et publier

La validation de marque se demande après la publication de l'application. Le bouton de validation ne s'affiche pas en état de test.

  1. Sur l'écran Audience, cliquez sur Publier l'application.
  2. Dans la fenêtre Passer en production ?, cliquez sur Confirmer.
  3. Dans État de la validation de l'écran Branding, cliquez sur Valider le branding. La validation prend jusqu'à 5 minutes environ.
  4. S'il y a des points à corriger, consultez-les avec Afficher les problèmes. Une fois corrigés, choisissez Problèmes résolus et redemandez la validation.
  5. Si elle passe, cliquez sur Publier le branding dans les 7 jours.

Une fois publiés, le nom et le logo de votre service s'affichent sur l'écran de consentement.

Et ensuite

  • Connexion des membres du service : placez les valeurs récupérées dans le studio de contenu et terminez le reste de la configuration de la connexion des membres.
  • Rôles et autorisations des membres : créez le ServiceUserRole qui définit ce qu'un membre inscrit peut voir et écrire.
  • Auth API : traite les spécifications techniques comme le format des requêtes, nécessaires pour rattacher la connexion au code de votre site.