Bouton "Se connecter avec Google" pour le Web

Bouton "Se connecter avec Google" pour le Web

À propos de cet atelier de programmation

subjectDernière mise à jour : avr. 28, 2025
account_circleRédigé par Brian Daugherty

1. Présentation

Dans cet atelier de programmation, nous allons créer une page Web simple pour la connexion des utilisateurs. Vous utiliserez la bibliothèque JavaScript des services Google Identity pour afficher et personnaliser le bouton "Se connecter avec Google".

Un bouton "Se connecter avec Google"

Points abordés

  • Ajouter un bouton "Se connecter avec Google" sur une page Web
  • Configurer une application Web OAuth 2.0
  • Décoder un jeton d'ID
  • Personnaliser le bouton "Se connecter avec Google"

Prérequis

  1. Un éditeur de texte et un emplacement pour héberger une page Web, les environnements que nous allons aborder dans cet atelier de programmation:
    • exécuté localement dans un terminal de votre machine, ou
    • via une plate-forme telle que Glitch.
    Choisissez l'environnement qui vous convient le mieux.
  2. Un projet Google Cloud. Vous pouvez utiliser votre projet existant ou en créer un. Le compte et le projet Google Cloud Platform sont sans frais.
  3. Connaissances de base des langages HTML, CSS, JavaScript et des outils pour les développeurs Chrome (ou équivalents)

Alors, c'est parti !

2. Créer votre page de connexion

Ajoutez cet exemple de code dans un fichier nommé index.html. Vous pouvez le faire sur votre ordinateur à l'aide de votre éditeur de texte préféré ou sur une plate-forme telle que Glitch.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://accounts.google.com/gsi/client" async></script>

    <script>
      function decodeJWT(token) {

        let base64Url = token.split(".")[1];
        let base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
        let jsonPayload = decodeURIComponent(
          atob(base64)
            .split("")
            .map(function (c) {
              return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
            })
            .join("")
        );
        return JSON.parse(jsonPayload);
      }

      function handleCredentialResponse(response) {

        console.log("Encoded JWT ID token: " + response.credential);

        const responsePayload = decodeJWT(response.credential);

        console.log("Decoded JWT ID token fields:");
        console.log("  Full Name: " + responsePayload.name);
        console.log("  Given Name: " + responsePayload.given_name);
        console.log("  Family Name: " + responsePayload.family_name);
        console.log("  Unique ID: " + responsePayload.sub);
        console.log("  Profile image URL: " + responsePayload.picture);
        console.log("  Email: " + responsePayload.email);
      }
    </script>
  </head>
  <body>
    <!-- g_id_onload contains Google Identity Services settings -->
    <div
      id="g_id_onload"
      data-auto_prompt="false"
      data-callback="handleCredentialResponse"
      data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE"
    ></div>
    <!-- g_id_signin places the button on a page and supports customization -->
    <div class="g_id_signin"></div>
  </body>
</html>

Ce code, à la fois HTML et JavaScript, remplit plusieurs fonctions:

  • configure cette bibliothèque Google Identity Services avec g_id_onload ;
  • affiche un bouton "Se connecter avec Google" à l'aide de g_id_signin ;
  • Ajout d'un gestionnaire de fonctions de rappel JavaScript nommé handleCredentialResponse pour recevoir de Google les identifiants de connexion de l'utilisateur
  • Une fonction decodeJWT pour convertir les identifiants de jeton Web JSON (JWT) en simples fichiers JSON.

Quelque chose peut sembler un peu bizarre avec data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE".

Pour l'instant, ignorez-la, nous y reviendrons plus tard.

3. Diffuser votre page Web

Nous allons aborder deux environnements permettant de diffuser index.html sur le navigateur:

  • d’exécuter un serveur web localement sur votre machine
  • une plateforme à distance comme Glitch.

Choisissez celui qui vous convient le mieux. Après la configuration, nous utiliserons cette URL pour configurer un client Web OAuth.

Localement à partir de votre machine

Assurez-vous que Python3 est installé sur votre système. La configuration diffère selon le système d'exploitation et la plate-forme. Commencez par configurer et utiliser Python si vous devez installer Python sur votre machine.

Démarrez le serveur Web Python dans le répertoire contenant index.html:

$ python3 -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...

Un serveur Web écoute maintenant les connexions sur le port 8000 et est prêt à afficher votre page de connexion. L'URL est

http://localhost:8000

Utiliser une plate-forme distante

Si vous avez choisi de modifier et d'héberger votre page de connexion à l'aide de Glitch (ou d'un outil équivalent), vous devriez pouvoir ouvrir index.html dans un volet d'aperçu ou dans un nouvel onglet du navigateur.

En règle générale, l'URL à utiliser correspond au nom du projet que vous avez saisi lors de la configuration de votre projet glich.com. Par exemple, si votre projet glitch s'appelle gis-example, l'URL est https://gis-example.glitch.me. Bien entendu, vous aurez choisi un autre nom de projet et vous ne pourrez pas réutiliser celui-ci. L'URL est

https://<var>your-project-name</var>.glitch.me

Charger la page

Attendez une seconde...

Nous devons d'abord créer un client Web OAuth 2.0 et le configurer.

Copiez ou notez l'URL. Vous en aurez besoin à l'étape suivante.

4. Configurer un client Web OAuth

Nous allons configurer OAuth pour que les utilisateurs puissent se connecter.

  • Cliquez sur ce lien pour créer un client Web OAuth 2.0. Si nécessaire, un assistant vous aidera à créer et à configurer un projet Google Cloud.
  • Sélectionnez Application Web dans la liste déroulante Type d'application.
  • Appuyez sur le bouton Ajouter un URI sous Origines JavaScript autorisées.
  • Saisissez l'URL qui héberge index.html à l'étape 3 de l'Étape 3 : Diffuser votre page Web.

    Hébergé sur votre ordinateur local

    Origine locale hébergée sur votre machine

    Hébergé sur une plate-forme distante

    Utiliser une plate-forme d&#39;hébergement à distance
  • Appuyez sur Créer.
  • Copiez le nouvel ID client.

La dernière chose

Nous devons revenir en arrière et mettre à jour index.html pour utiliser le nouvel ID client. Dans votre éditeur, remplacez PUT_YOUR_WEB_CLIENT_ID_HERE par votre nouvel ID client. L'ID client ressemble à l'exemple suivant: 1234567890-abc123def456.apps.googleusercontent.com.

Connectons-nous !

5. Se connecter

Commencez par ouvrir la console de développement de votre navigateur. Toutes les erreurs et les identifiants du jeton d'ID JWT renvoyés par Google seront consignés ici.

Appuyez sur le bouton "Se connecter avec Google" !

Ce qui se passe ensuite peut varier légèrement:

  • Si vous êtes actuellement connecté à plusieurs comptes Google, vous serez invité à sélectionner celui que vous utiliserez pour vous connecter à cette application Web.
  • Si vous vous connectez pour la première fois à cette application Web, une invite de consentement s'affiche.

Après avoir éventuellement sélectionné un compte et donné votre autorisation, Google répond avec un JWT. La fonction de rappel handleCredentialResponse exécutée dans le navigateur reçoit le jeton JWT.

Dans cet atelier de programmation, nous décodeons et affichons le contenu du jeton JWT. Dans une application Web de production, vous allez vérifier et utiliser le jeton JWT décodé pour effectuer une opération plus significative, comme créer un compte sur votre plate-forme backend ou établir une nouvelle session pour l'utilisateur.

6. Inspecter le jeton d&#39;ID JWT

Le jeton JWT encodé est enregistré dans la Play Console. Après avoir décodé le JWT, certains champs de jetons d'ID couramment utilisés sont également consignés dans la console.

Vous pouvez utiliser des outils en ligne tels que jwt.io pour décoder ce jeton JWT.

Vous pouvez également utiliser jq dans votre terminal pour décoder et afficher le jeton JWT (vous devrez peut-être utiliser votre gestionnaire de packages pour installer jq). Commencez par coller la chaîne JWT encodée dans les guillemets doubles:

$ JWT="eyJhbGciOiJSUzI1Ni ... Hecz6Wm4Q"

puis utilisez cette commande pour le décoder

$ echo $JWT | jq -R 'split(".") | .[0],.[1] | @base64d | fromjson'
{
  "alg": "RS256",
  "kid": "c7e04465649ffa606557650c7e65f0a87ae00fe8",
  "typ": "JWT"
}
{
  "iss": "https://accounts.google.com",
  "azp": "123456789012-s0meRand0mStR1nG.apps.googleusercontent.com",
  "aud": "123456789012-s0meRand0mStR1nG.apps.googleusercontent.com",
  "sub": "2718281828459045",
  "email": "example@example.com",
  "email_verified": true,
  "nbf": 1744645148,
  "name": "Brian Daugherty",
  "picture": "https://lh3.googleusercontent.com/a/08a898b88ca4d6407be652d8",
  "given_name": "Brian",
  "family_name": "Daugherty",
  "iat": 1744645448,
  "exp": 1744649048,
  "jti": "52cd32984b30e178aa88bc2e75e63e055a461fcf"
}

Certaines clés et valeurs, telles que l'adresse e-mail, le nom et l'image, doivent être assez faciles à comprendre. D'autres valeurs permettent de vérifier le jeton JWT avant de l'utiliser. Obtenir les informations utilisateur à partir du jeton d'ID pour en savoir plus sur la signification de tous les champs.

7. Personnaliser le bouton

Pour placer un bouton de connexion par défaut sur une page, procédez comme suit :

    <div class="g_id_signin"></div>

et ce bouton

Un bouton &quot;Se connecter avec Google&quot;

Mais peut-être souhaitez-vous modifier la couleur, la taille ou le texte pour l'adapter au thème de votre site.

Nous allons maintenant remplacer la couleur du bouton par le bleu et indiquer S'inscrire avec Google.

Ouvrez index.html, localisez l'élément g_id_signin, puis ajoutez les attributs data-theme="filled_blue" et data-text="signup_with":

    <div
      class="g_id_signin"
      data-theme="filled_blue"
      data-text="signup_with"
    ></div>

Une fois la page enregistrée et actualisée, un bouton bleu contenant le nouveau texte s'affiche.

Un bouton &quot;S&#39;inscrire avec Google&quot;

Vous pouvez personnaliser davantage le bouton. Consultez Attributs de données visuelles pour obtenir la liste complète des options.

8. Autres ressources

Félicitations !

Vous avez ajouté un bouton "Se connecter avec Google" à une page Web, configuré un client Web OAuth 2.0, décodé un jeton d'ID JWT et appris à personnaliser l'apparence du bouton.

Ces liens peuvent vous aider pour les étapes suivantes:

Questions fréquentes

bug_report Signaler une erreur