Migrer depuis Google Sign-In

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Ce guide vous aide à comprendre les modifications et les étapes nécessaires à la migration des bibliothèques JavaScript de l'ancienne bibliothèque de la plate-forme Google Sign-In vers la bibliothèque Google Identity Services pour l'authentification.

Si votre client utilise la bibliothèque cliente des API Google pour JavaScript ou d'autres bibliothèques plus anciennes pour l'autorisation, consultez la page Migrer vers les services Google Identity pour en savoir plus.

Authentification et autorisation

L'authentification permet d'identifier un utilisateur. On l'appelle généralement"inscription"ou"connexion". L'autorisation est le processus permettant d'accorder ou de refuser l'accès aux données ou aux ressources. Par exemple, votre application demande l'autorisation de l'utilisateur pour accéder à Google Drive.

Comme l'ancienne bibliothèque de la plate-forme Google Sign-In, la nouvelle bibliothèque de services Google Identity est conçue pour prendre en charge les processus d'authentification et d'autorisation.

Cependant, la nouvelle bibliothèque sépare les deux processus afin de faciliter la tâche des développeurs qui souhaitent intégrer des comptes Google à votre application.

Si votre cas d'utilisation ne concerne que l'authentification, veuillez poursuivre la lecture de cette page.

Si votre cas d'utilisation inclut une autorisation, consultez les pages Fonctionnement de l'autorisation des utilisateurs et Migrer vers les services Google Identity pour vous assurer que votre application utilise les nouvelles API améliorées.

Modifications apportées

Pour les utilisateurs, la nouvelle bibliothèque Google Identity Services offre de nombreuses améliorations en termes de facilité d'utilisation. Points forts:

  • Nouveaux processus simples et rapides de connexion et d'appui avec moins d'étapes individuelles
  • un bouton de connexion actualisé avec la personnalisation des utilisateurs,
  • un branding cohérent et un comportement de connexion uniforme sur le Web améliorent la compréhension et la confiance,
  • accéder rapidement au contenu. Les utilisateurs peuvent s'inscrire et se connecter facilement et directement depuis n'importe où sur votre site, sans avoir à visiter une page de connexion ou de compte.

Notre objectif a été de simplifier les développeurs, d'améliorer leur sécurité et de rendre votre intégration aussi rapide et facile que possible. Voici quelques-unes de ces améliorations:

  • Possibilité d'ajouter une connexion utilisateur au contenu statique de votre site uniquement à l'aide de code HTML
  • la séparation de l'authentification de connexion et du partage des données utilisateur, la complexité d'une intégration OAuth2 n'est plus nécessaire simplement pour connecter les utilisateurs à votre site,
  • les modes pop-up et redirection restent compatibles, mais l'infrastructure OAuth2 de Google redirige désormais vers le point de terminaison de connexion de votre serveur backend,
  • consolidation des fonctionnalités des anciennes bibliothèques JavaScript de Google Identity et des API Google en une seule nouvelle bibliothèque ;
  • Pour les réponses de connexion, vous devez désormais décider si vous souhaitez ou non utiliser une promesse. Par ailleurs, l'indirection via les fonctions de style getter a été supprimée pour plus de simplicité.

Exemple de migration de connexion

Si vous effectuez la migration depuis le bouton Google Sign-In existant et que vous souhaitez uniquement connecter les utilisateurs à votre site, la modification la plus simple consiste à passer au nouveau bouton personnalisé. Pour ce faire, vous devez remplacer les bibliothèques JavaScript et mettre à jour votre codebase afin d'utiliser un nouvel objet de connexion.

Bibliothèques et configuration

L'ancienne bibliothèque de la plate-forme Google Sign-In (apis.google.com/js/platform.js) et la bibliothèque cliente des API Google pour JavaScript (gapi.client) ne sont plus nécessaires pour l'authentification et l'autorisation des utilisateurs. Elles ont été remplacées par une nouvelle bibliothèque JavaScript Google Identity Services : accounts.google.com/gsi/client.

Les trois anciens modules JavaScript (api, client et platform) utilisés pour la connexion sont tous chargés à partir de apis.google.com. Pour vous aider à identifier les emplacements dans lesquels l'ancienne bibliothèque pourrait être incluse, généralement:

  • le bouton de connexion par défaut charge apis.google.com/js/platform.js,
  • Une image de bouton personnalisée charge apis.google.com/js/api:client.js.
  • L'utilisation directe de gapi.client charge apis.google.com/js/api.js.

Dans la plupart des cas, vous pouvez simplement continuer à utiliser les identifiants de votre ID client d'application Web existant. Dans le cadre de votre migration, nous vous recommandons de consulter nos règles OAuth 2.0 et d'utiliser la console Google APIs pour vérifier et, si nécessaire, mettre à jour les paramètres client suivants:

  • vos applications de test et de production utilisent des projets distincts et possèdent leurs propres ID client,
  • Le type d'ID client OAuth 2.0 est "Application Web".
  • HTTPS est utilisé pour les origines JavaScript et les URI de redirection autorisés.

Identifier le code et les tests concernés

Un cookie de débogage peut vous aider à localiser le code concerné et à tester le comportement post-abandon.

Dans les applications volumineuses ou complexes, il peut être difficile de trouver tout le code concerné par l'abandon du module gapi.auth2. Pour enregistrer dans la console l'utilisation existante de la fonctionnalité bientôt obsolète, définissez la valeur du cookie G_AUTH2_MIGRATION sur informational. Vous pouvez également ajouter un signe deux-points suivi d'une valeur de clé pour vous connecter au stockage de sessions. Après la connexion et la réception des identifiants, examinez ou envoyez les journaux collectés à un backend pour une analyse ultérieure. Par exemple, informational:showauth2use enregistre l'origine et l'URL dans une clé de stockage de session nommée showauth2use.

Pour vérifier le comportement de l'application lorsque le module gapi.auth2 n'est plus chargé, définissez la valeur du cookie G_AUTH2_MIGRATION sur enforced. Cela permet de tester le comportement post-abandon avant la date d'application.

Valeurs possibles des cookies G_AUTH2_MIGRATION:

  • enforced Ne chargez pas le module gapi.auth2.
  • informational Consignez l'utilisation de fonctionnalités obsolètes dans la console JS. Vous pouvez également vous connecter au stockage de la session lorsqu'un nom de clé facultatif est défini : informational:key-name.

Pour minimiser l'impact sur les utilisateurs, il est recommandé de définir ce cookie localement lors du développement et du test, avant de l'utiliser dans des environnements de production.

HTML et JavaScript

Dans ce scénario de connexion par authentification, des exemples de code et d'affichages du bouton Google Sign-In existant sont présentés. Sélectionnez le mode pop-up ou redirection pour voir les différences de traitement de la réponse d'authentification, soit par un rappel JavaScript, soit par une redirection sécurisée vers votre point de terminaison de serveur backend.

Ancienne méthode

Affichez le bouton Google Sign-In et gérez les connexions directement à partir du navigateur de l'utilisateur.

<html>
  <body>
    <script src="https://apis.google.com/js/platform.js" async defer></script>
    <meta name="google-signin-client_id" content="YOUR_CLIENT_ID">
    <div class="g-signin2" data-onsuccess="handleCredentialResponse"></div>
  </body>
</html>

Mode de redirection

Affichez le bouton Google Sign-In se terminant par un appel AJAX du navigateur de l'utilisateur au point de terminaison de votre serveur backend.

<html>
  <body>
    <script src="https://apis.google.com/js/platform.js" async defer></script>
    <meta name="google-signin-client_id" content="YOUR_CLIENT_ID">
    <div class="g-signin2" data-onsuccess="handleCredentialResponse"></div>
    <script>
      function handleCredentialResponse(googleUser) {
        ...
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'https://yourbackend.example.com/tokensignin');
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.onload = function() {
          console.log('Signed in as: ' + xhr.responseText);
        };
        xhr.send('idtoken=' + id_token);
      }
    </script>
  </body>
</html>

Rendu

Les nouveaux attributs visuels simplifient l'ancienne méthode de création d'un bouton personnalisé, éliminent les appels à gapi.signin2.render(), et vous évitent d'avoir à héberger et à gérer des images et des éléments visuels sur votre site.

Google Sign-In Google connecté

Texte du bouton permettant de mettre à jour l'état de connexion des utilisateurs.

La nouvelle façon

Pour utiliser la nouvelle bibliothèque dans un scénario de connexion par authentification simple, sélectionnez le mode pop-up ou redirection et utilisez l'exemple de code pour remplacer votre mise en œuvre existante sur votre page de connexion.

Utilisez un rappel pour gérer la connexion directement à partir du navigateur de l'utilisateur.

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async defer></script>
    <div id="g_id_onload"
         data-client_id="YOUR_CLIENT_ID"
         data-callback="handleCredentialResponse">
    </div>
    <div class="g_id_signin" data-type="standard"></div>
  </body>
</html>

Mode de redirection

Google appelle votre point de terminaison de connexion, tel que spécifié par l'attribut data-login_url. Auparavant, vous étiez responsable de l'opération POST et du nom du paramètre. La nouvelle bibliothèque publie le jeton d'ID sur votre point de terminaison dans le paramètre credential. Enfin, vérifiez le jeton d'ID sur votre serveur backend.

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async defer></script>
    <div id="g_id_onload"
         data-client_id="YOUR_CLIENT_ID"
         data-ux_mode="redirect"
         data-login_uri="https://www.example.com/your_login_endpoint">
    </div>
    <div class="g_id_signin" data-type="standard"></div>
  </body>
</html>

Rendu

Utilisez visual-attributes pour personnaliser la taille, la forme et la couleur du bouton "Se connecter avec Google". Affichez le pop-up One Tap avec le bouton personnalisé pour améliorer le taux de connexion.

Bouton &quot;Se connecter avec Google&quot; Pop-up One Tap

L'état de connexion de l'utilisateur ne met pas à jour le texte du bouton, de "Se connecter" à "Connecté". Une fois que vous avez donné votre consentement ou lors des visites suivantes, le bouton personnalisé inclut le nom, l'adresse e-mail et la photo de profil de l'utilisateur.

Dans cet exemple simple d'authentification uniquement, la nouvelle bibliothèque accounts.google.com/gsi/client, la nouvelle classe g_id_signin et l'objet g_id_onload remplacent l'ancienne bibliothèque apis.google.com/js/platform.js et l'ancien objet g-signin2.

En plus d'afficher le nouveau bouton personnalisé, l'exemple de code affiche également le nouveau pop-up One Tap. Chaque fois que vous affichez le bouton personnalisé, nous vous recommandons vivement d'afficher également le pop-up One Tap pour minimiser la friction pendant le processus d'inscription et de connexion.

Bien que cela ne soit pas recommandé en raison d'une friction de connexion accrue, le nouveau bouton personnalisé peut être affiché seul, sans afficher la boîte de dialogue en un seul geste. Pour ce faire, définissez l'attribut data-auto_prompt sur false.

API HTML et JavaScript

L'exemple ci-dessus montre comment utiliser la nouvelle API HTML pour ajouter des identifiants de connexion à votre site Web. Vous pouvez également utiliser l'API JavaScript fonctionnellement équivalente, ou combiner les API HTML et JavaScript sur votre site.

Pour afficher les options de personnalisation du bouton, telles que le type de rappel et les attributs tels que la couleur, la taille, la forme, le texte et le thème, consultez le générateur de code. Vous pouvez l'utiliser pour comparer rapidement différentes options et générer des extraits HTML à utiliser sur votre site.

Connectez-vous depuis n'importe quelle page avec One Tap

One Tap est un nouveau moyen simple de s'inscrire ou de se connecter à votre site. Elle vous permet de vous connecter directement depuis n'importe quelle page de votre site et vous évite ainsi d'avoir à accéder à une page de connexion dédiée. En d'autres termes, cela facilite la procédure d'inscription et de connexion en offrant aux utilisateurs la possibilité de s'inscrire et de se connecter depuis des pages autres que votre page de connexion.

Pour activer la connexion depuis n'importe quelle page, nous vous recommandons d'inclure g_id_onload dans un en-tête, un pied de page ou un autre objet partagé sur l'ensemble de votre site.

Nous vous recommandons également d'ajouter g_id_signin, qui affiche le bouton de connexion personnalisé, uniquement sur vos pages de connexion ou de gestion des comptes utilisateur. Permettez aux utilisateurs de s'inscrire ou de se connecter en affichant le bouton à côté d'autres boutons de fournisseur d'identité fédérés, ainsi que dans les champs de saisie du nom d'utilisateur et du mot de passe.

Réponse au jeton

La connexion des utilisateurs n'exige plus que vous compreniez les codes d'autorisation, les jetons d'accès ou les jetons d'actualisation OAuth2. Un jeton d'ID JWT (JSON Web Token) est utilisé à la place pour partager l'état de connexion et le profil utilisateur. Pour simplifier, vous n'êtes plus obligé d'utiliser des méthodes d'accesseur de style "getter" pour utiliser les données de profil utilisateur.

Des identifiants de jeton d'ID JWT signés par Google sont renvoyés:

  • au gestionnaire de rappel JavaScript basé sur un navigateur en mode pop-up ; ou
  • à votre serveur backend via une redirection Google vers votre point de terminaison de connexion lorsque le bouton "Se connecter avec Google" ux_mode est défini sur redirect.

Dans les deux cas, mettez à jour vos gestionnaires de rappel existants en supprimant:

  • appels à googleUser.getBasicProfile(),
  • des références à BasicProfile, ainsi que des appels associés aux méthodes getId(), getName(), getGivenName(), getFamilyName(), getImageUrl() et getEmail() ;
  • l'utilisation de l'objet AuthResponse.

Utilisez plutôt des références directes aux sous-champs credential du nouvel objet JWT CredentialResponse pour travailler avec les données de profil utilisateur.

De plus, pour le mode de redirection uniquement, assurez-vous d'empêcher la falsification des requêtes intersites (CSRF) et vérifiez le jeton d'ID Google sur votre serveur backend.

Pour mieux comprendre comment les utilisateurs interagissent avec votre site, vous pouvez utiliser le champ select_by dans CredentialResponse afin de déterminer le résultat du consentement de l'utilisateur et le flux de connexion spécifique utilisé.

Lorsqu'un utilisateur se connecte pour la première fois à votre site Web, Google l'invite à partager le profil de son compte avec votre application. Ce n'est qu'une fois que vous avez donné votre consentement que le profil de l'utilisateur est partagé avec votre application dans une charge utile correspondant au jeton d'ID. Révoquer l'accès à ce profil revient à révoquer un jeton d'accès dans l'ancienne bibliothèque de connexion.

Les utilisateurs peuvent révoquer les autorisations et déconnecter votre application de leur compte Google en accédant à https://myaccount.google.com/permissions. Ils peuvent également se déconnecter directement de votre application en déclenchant un appel d'API que vous implémentez. L'ancienne méthode disconnect a été remplacée par la nouvelle, revoke.

Lorsqu'un utilisateur supprime son compte sur votre plate-forme, il est recommandé d'utiliser revoke pour dissocier votre application de son compte Google.

Auparavant, auth2.signOut() pouvait vous aider à gérer la déconnexion des utilisateurs de votre application. Toute utilisation de auth2.signOut() doit être supprimée, et votre application doit gérer directement l'état de la session utilisateur et l'état de connexion.

État de la session et écouteurs

La nouvelle bibliothèque ne conserve pas l'état de connexion ou de session de votre application Web.

L'état de connexion d'un compte Google, ainsi que l'état de session de l'application et l'état de connexion sont des concepts distincts.

L'état de la connexion de l'utilisateur à son compte Google et à votre application est indépendant les uns des autres, sauf au moment où l'utilisateur sait qu'il a été authentifié et qu'il est connecté à son compte Google.

Lorsque la fonctionnalité Se connecter avec Google, la fonctionnalité One Tap ou la connexion automatique sont incluses sur votre site, les utilisateurs doivent d'abord se connecter à leur compte Google pour:

  • donner leur accord pour partager leur profil utilisateur lors de la première inscription ou connexion à votre site ;
  • et plus tard pour vous connecter lors de visites répétées sur votre site.

Les utilisateurs peuvent rester connectés, se déconnecter ou basculer vers un autre compte Google tout en conservant une session active et connectée sur votre site Web.

Vous êtes désormais responsable de la gestion directe de l'état de connexion des utilisateurs de votre application Web. Auparavant, Google Sign-In a permis de surveiller l'état de la session de l'utilisateur.

Supprimez toutes les références à auth2.attachClickHandler() et à ses gestionnaires de rappel enregistrés.

Auparavant, les écouteurs permettaient de partager les changements d'état de connexion pour le compte Google d'un utilisateur. Les écouteurs ne sont plus acceptés.

Supprimez toutes les références à listen(), auth2.currentUser et auth2.isSignedIn.

Cookies

Si vous utilisez la fonctionnalité Se connecter avec Google, l'utilisation des cookies est limitée. Vous en trouverez la description. Pour en savoir plus sur les autres types de cookies que Google utilise, consultez l'article Comment Google utilise les cookies.

Le cookie G_ENABLED_IDPS défini par l'ancienne bibliothèque Google Sign-in Platform n'est plus utilisé.

La nouvelle bibliothèque des services Google Identity peut éventuellement définir ces cookies multidomaines sur la base de vos options de configuration:

  • g_state stocke l'état de déconnexion de l'utilisateur et est défini lors de l'utilisation du pop-up One Tap ou de la connexion automatique,
  • g_csrf_token est un cookie à double envoi utilisé pour empêcher les attaques CSRF. Il est défini lorsque votre point de terminaison de connexion est appelé. La valeur de votre URI de connexion peut être définie explicitement ou définie par défaut sur l'URI de la page actuelle. Votre point de terminaison de connexion peut être appelé dans les conditions suivantes lorsque vous utilisez:

    • API HTML avec data-ux_mode=redirect ou lorsque data-login_uri est défini ; ou

    • L'API JavaScript avec ux_mode=redirect, et où google.accounts.id.prompt() n'est pas utilisé pour afficher la connexion One Tap ou automatique.

Si vous disposez d'un service qui gère les cookies, veillez à ajouter les deux nouveaux cookies et à supprimer l'ancien cookie une fois la migration terminée.

Si vous gérez plusieurs domaines ou sous-domaines, consultez la section Display Tap sur les sous-domaines pour en savoir plus sur l'utilisation du cookie g_state.

Documentation de référence sur la migration d'objets pour la connexion utilisateur

Anciennes offres Nouveau Remarques
Bibliothèques JavaScript
apis.google.com/js/platform.js accounts.google.com/gsi/client Remplacez l'ancien par le nouveau.
apis.google.com/js/api.js accounts.google.com/gsi/client Remplacez l'ancien par le nouveau.
Objet GoogleAuth et méthodes associées:
GoogleAuth.attachClickHandler() IdConfiguration.callback pour data-callback JS et HTML Remplacez l'ancien par le nouveau.
GoogleAuth.currentUser.get() CredentialResponse (Identifiant de réponse) Utilisez CredentialResponse à la place, ce n'est plus nécessaire.
GoogleAuth.currentUser.listen() Supprimer. L'état de connexion actuel d'un utilisateur sur Google n'est pas disponible. Les utilisateurs doivent être connectés à Google pour obtenir le consentement et les moments de connexion. Le champ select_by de CredentialResponse peut être utilisé pour déterminer le résultat du consentement de l'utilisateur ainsi que la méthode de connexion utilisée.
GoogleAuth.disconnect(). google.accounts.id.revoke Remplacez l'ancien par le nouveau. La révocation peut également être effectuée à l'adresse https://myaccount.google.com/permissions.
GoogleAuth.grantOfflineAccess() Supprimer. Un jeton d'ID a remplacé les champs d'application et les jetons d'accès OAuth2.
GoogleAuth.isSignedIn.get() Supprimer. L'état de connexion actuel d'un utilisateur sur Google n'est pas disponible. Les utilisateurs doivent être connectés à Google pour obtenir le consentement et les moments de connexion.
GoogleAuth.isSignedIn.listen() Supprimer. L'état de connexion actuel d'un utilisateur sur Google n'est pas disponible. Les utilisateurs doivent être connectés à Google pour obtenir le consentement et les moments de connexion.
GoogleAuth.signIn(). Supprimer. Le chargement DOM HTML de l'élément g_id_signin ou l'appel JS sur google.accounts.id.renderButton déclenche la connexion de l'utilisateur à un compte Google.
GoogleAuth.signOut(). Supprimer. L'état de la connexion de l'utilisateur pour votre application et un compte Google est indépendant. Google ne gère pas l'état de session de votre application.
GoogleAuth.then() Supprimer. GoogleAuth est obsolète.
Objet GoogleUser et méthodes associées:
GoogleUser.disconnect() google.accounts.id.revoke Remplacez l'ancien par le nouveau. La révocation peut également être effectuée à l'adresse https://myaccount.google.com/permissions.
GoogleUser.getAuthResponse()
GoogleUser.getBasicProfile() CredentialResponse (Identifiant de réponse) Utilisez directement credential et des sous-champs au lieu des méthodes BasicProfile.
GoogleUser.getGrantedScopes() Supprimer. Un jeton d'ID a remplacé les champs d'application et les jetons d'accès OAuth2.
GoogleUser.getHostedDomain() CredentialResponse (Identifiant de réponse) Utilisez plutôt credential.hd.
GoogleUser.getId() CredentialResponse (Identifiant de réponse) Utilisez plutôt credential.sub.
GoogleUser.grantOfflineAccess() Supprimer. Un jeton d'ID a remplacé les champs d'application et les jetons d'accès OAuth2.
GoogleUser.grant() Supprimer. Un jeton d'ID a remplacé les champs d'application et les jetons d'accès OAuth2.
GoogleUser.hasGrantedScopes() Supprimer. Un jeton d'ID a remplacé les champs d'application et les jetons d'accès OAuth2.
GoogleUser.isSignedIn() Supprimer. L'état de connexion actuel d'un utilisateur sur Google n'est pas disponible. Les utilisateurs doivent être connectés à Google pour obtenir le consentement et les moments de connexion.
GoogleUser.reloadAuthResponse() Supprimer. Un jeton d'ID a remplacé les champs d'application et les jetons d'accès OAuth2.
Objet gapi.auth2 et méthodes associées:
Objet gapi.auth2.AuthorizeConfig Supprimer. Un jeton d'ID a remplacé les champs d'application et les jetons d'accès OAuth2.
Objet gapi.auth2.AuthorizeResponse Supprimer. Un jeton d'ID a remplacé les champs d'application et les jetons d'accès OAuth2.
Objet gapi.auth2.AuthResponse Supprimer. Un jeton d'ID a remplacé les champs d'application et les jetons d'accès OAuth2.
gapi.auth2.authorized() Supprimer. Un jeton d'ID a remplacé les champs d'application et les jetons d'accès OAuth2.
gapi.auth2.ClientConfig() Supprimer. Un jeton d'ID a remplacé les champs d'application et les jetons d'accès OAuth2.
gapi.auth2.getAuthInstance() Supprimer. Un jeton d'ID a remplacé les champs d'application et les jetons d'accès OAuth2.
gapi.auth2.init(). Supprimer. Un jeton d'ID a remplacé les champs d'application et les jetons d'accès OAuth2.
Objet gapi.auth2.OfflineAccessOptions Supprimer. Un jeton d'ID a remplacé les champs d'application et les jetons d'accès OAuth2.
Objet gapi.auth2.SignInOptions Supprimer. Un jeton d'ID a remplacé les champs d'application et les jetons d'accès OAuth2.
Objet gapi.signin2 et méthodes associées:
gapi.signin2.render() Supprimer. Le chargement DOM HTML de l'élément g_id_signin ou l'appel JS sur google.accounts.id.renderButton déclenche la connexion de l'utilisateur à un compte Google.