Migrer depuis Google Sign-In

Ce guide vous aide à comprendre les changements et les étapes nécessaires pour migrer les bibliothèques JavaScript à partir de l'ancienne version de Google Sign-In de la plate-forme Google Cloud vers la nouvelle bibliothèque Google Identity Services pour authentification.

Si votre client utilise la bibliothèque cliente des API Google pour JavaScript ou d'autres des bibliothèques précédentes pour les autorisations, consultez Migrer vers Google Identity Services.

Authentification et autorisation

L'authentification établit qui est une personne, couramment appelée l'inscription ou la connexion d'un utilisateur. L'autorisation consiste à accorder ou refuser l'accès aux données ou aux ressources. Par exemple, votre application demande votre l'autorisation de l'utilisateur pour accéder à son Google Drive.

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

Cependant, la nouvelle bibliothèque sépare les deux processus pour réduire la complexité. permettant aux développeurs d'intégrer des comptes Google à votre application.

Si votre cas d'utilisation concerne uniquement l'authentification, poursuivez la lecture de cette page.

Si votre cas d'utilisation comprend une autorisation, consultez Fonctionnement des autorisations des utilisateurs. et Migrez vers Google Identity Services pour vous assurer que votre application est à l'aide des nouvelles API améliorées.

Modifications apportées

Pour les utilisateurs, la nouvelle bibliothèque Google Identity Services propose de nombreuses d'amélioration de la convivialité. Principales caractéristiques:

• Nouvelles procédures de connexion automatique et One Tap plus fluides, avec moins d'utilisateurs pas,
• un nouveau bouton de connexion avec personnalisation utilisateur,
• un branding cohérent et une procédure de connexion uniforme sur l'ensemble du Web améliorent la compréhension et la confiance,
• accéder rapidement au contenu ; les utilisateurs peuvent s'inscrire et se connecter directement, où qu'ils soient. sur votre site sans avoir à accéder à une page de connexion ou à un compte au préalable.

Pour les développeurs, notre objectif a été de réduire la complexité, d'améliorer la sécurité et faites en sorte que votre intégration soit aussi rapide que possible. Voici quelques-unes de ces améliorations:

• La possibilité d'ajouter une connexion d'utilisateur au contenu statique de votre site en utilisant simplement HTML
• la séparation entre l'authentification de connexion et l'autorisation, et le partage les données utilisateur, l'intégration OAuth 2.0 n'est plus nécessaire pour connecter les utilisateurs à votre site,
• les modes pop-up et redirection sont toujours pris en charge, mais le protocole OAuth de Google l'infrastructure 2.0 redirige désormais vers le point de terminaison de connexion de votre serveur backend,
• la consolidation des fonctionnalités de la solution précédente et les bibliothèques JavaScript de l'API Google en une seule,
• pour les réponses de connexion, vous pouvez décider d'utiliser ou non La Promise et l'indirection via les fonctions de style getter ont été supprimées pour plus de simplicité.

Exemple de migration de connexion

Si vous effectuez la migration à partir du bouton Google Sign-In existant et que vous n'utilisez à connecter les utilisateurs à votre site, la modification la plus simple pour passer au nouveau bouton personnalisé. Vous pouvez le faire en remplaçant bibliothèques JavaScript et mettre à jour votre codebase pour utiliser un nouvel objet sign-in.

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 pas n'est plus nécessaire pour l'authentification et l'autorisation des utilisateurs. Ils ont été remplacé par une seule bibliothèque JavaScript Google Identity Services: accounts.google.com/gsi/client

Les trois modules JavaScript précédents (api, client et platform) utilisés pour connexion sont tous chargés depuis apis.google.com. Pour vous aider à identifier des lieux où la bibliothèque précédente pourrait être incluse dans votre site, généralement:

• le bouton de connexion par défaut charge apis.google.com/js/platform.js,
• un graphique de bouton personnalisé 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 continuer à utiliser l'ID client de votre application Web existante. identifiants de connexion. Lors de votre migration, nous vous recommandons de consulter notre Règles OAuth 2.0 et utiliser la console Google APIs pour confirmer et, si nécessaire, mettre à jour les paramètres client suivants:

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

Identifier le code concerné et effectuer un test

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

Dans les applications volumineuses ou complexes, il peut être difficile de trouver tout le code affecté par le Abandon du module gapi.auth2. Pour consigner l'utilisation existante de fonctionnalités obsolètes de la console, définissez la valeur de G_AUTH2_MIGRATION le cookie à informational. Si vous le souhaitez, ajoutez un signe deux-points suivi d'une valeur de clé pour et les consigner dans l'espace de stockage de la session. Après la connexion et la réception de examinent les identifiants ou envoient les journaux collectés à un backend pour une analyse ultérieure. Pour exemple, informational:showauth2use enregistre l'origine et l'URL dans un espace 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 comportement post-abandon avant la date d'application forcée.

Valeurs possibles du cookie G_AUTH2_MIGRATION:

• enforced Ne pas charger le module gapi.auth2.
• informational Consigner l'utilisation de fonctionnalités obsolètes dans la console JavaScript. Consigner également au stockage de session lorsqu'un nom de clé facultatif est défini: informational:key-name

Pour minimiser l'impact sur l'utilisateur, nous vous recommandons de définir d'abord ce cookie localement pendant les phases de développement et de test, avant de les utiliser dans des environnements de production.

HTML et JavaScript

Dans ce scénario de connexion par authentification uniquement, l'exemple de code et les rendus du le bouton "Google Sign-In" existant s'affiche. Sélectionnez "Pop-up" ou "Redirect" (Redirection). pour voir les différences de gestion de la réponse d'authentification un rappel JavaScript ou une redirection sécurisée vers la connexion au serveur backend. point de terminaison unique.

La méthode précédente

<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>

<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>

Nouvelle méthode

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

<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>

<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>

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

En plus d'afficher le nouveau bouton personnalisé, l'exemple de code affiche le nouveau pop-up One Tap. Partout où vous affichez le bouton personnalisé, Nous vous recommandons vivement d'afficher également le pop-up One Tap pour réduire lors de l'inscription et de la connexion.

Bien que cela ne soit pas recommandé en raison des difficultés de connexion, le nouveau personnalisé peut s'afficher seul, sans afficher simultanément le bouton Boîte de dialogue One Tap. Pour ce faire, définissez l'attribut data-auto_prompt sur false.

API HTML et JavaScript

L'exemple précédent montre comment utiliser la nouvelle API HTML pour ajouter une connexion à votre site Web. Vous pouvez également utiliser l'équivalent fonctionnellement API JavaScript, ou associez-les à des API HTML et JavaScript dans vos sur votre site.

Pour afficher de manière interactive les options de personnalisation des boutons, telles que le type de rappel et attributs tels que la couleur, la taille, la forme, le texte et le thème, consultez notre Code générateur. Il peut être utilisé pour comparer rapidement différentes options et générer Extraits HTML à utiliser sur votre site.

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

One Tap est une nouvelle méthode simple d'inscription ou de connexion à votre site pour les utilisateurs. Il vous permet d'activer la connexion des utilisateurs directement depuis n'importe quelle page de votre site et élimine le besoin pour les utilisateurs de visiter une page de connexion dédiée. En d'autres termes, Cela réduit les problèmes d'inscription et de connexion en offrant aux utilisateurs la possibilité de s'inscrire et se connecter depuis d'autres pages que votre page de connexion.

Pour permettre 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 la connexion personnalisée , uniquement sur vos pages de connexion ou de gestion des comptes d'utilisateurs. Donner le choix aux utilisateurs pour l'inscription ou la connexion en affichant le bouton à côté d'autres les boutons de fournisseur d'identité, et les champs de saisie du nom d'utilisateur et du mot de passe.

Réponse du jeton

Vous n'avez plus besoin de comprendre ni d'utiliser OAuth 2.0 pour vous connecter. codes d'autorisation, jetons d'accès ou jetons d'actualisation. À la place, un jeton Web JSON (JWT) permet de partager l'état de la connexion et le profil utilisateur. En tant que plus simple, vous n'êtes plus obligé d'utiliser la méthode style méthodes d'accesseur pour travailler avec les données de profil utilisateur.

Un identifiant de jeton JWT sécurisé signé par Google est renvoyé:

• au gestionnaire de rappel JavaScript basé sur le navigateur de l'utilisateur en mode pop-up ;
• à 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:

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

Utilisez plutôt des références directes aux sous-champs credential dans le nouveau jeton JWT. CredentialResponse pour utiliser les données du profil utilisateur.

De plus, et pour le mode Redirection uniquement, assurez-vous d'empêcher les requêtes intersites Contrefaçon (CSRF) et validez le jeton d'ID Google sur votre serveur backend.

Pour mieux comprendre comment les utilisateurs interagissent avec votre site, Le champ select_by de CredentialResponse peut être utilisé pour déterminer l'état le résultat du consentement et le flux de connexion spécifique utilisé.

Autorisation de l'utilisateur et révocation de l'autorisation

Lorsqu'un utilisateur se connecte pour la première fois à votre site Web, Google lui demande son consentement. pour partager le profil de son compte avec votre application. Ce n'est qu'après avoir donné le consentement le profil de l'utilisateur partagé avec votre application dans une charge utile des identifiants de jeton d'ID. Révoquer l'accès à ce profil équivaut à révoquer un jeton d'accès dans le bibliothèque de connexion antérieure.

Les utilisateurs peuvent révoquer les autorisations et dissocier votre application de leur compte Google à l'adresse https://myaccount.google.com/permissions. Ils peuvent aussi se déconnecter directement de votre appli en déclenchant une API que vous implémentez ; la méthode disconnect précédente a été remplacée par la nouvelle méthode 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 être utilisé pour gérer la déconnexion des utilisateurs. depuis votre application. Supprimez toute utilisation de auth2.signOut() et votre appli 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 ni l'état de session pour votre l'application.

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

L'état de connexion de l'utilisateur à son compte Google et à votre application est indépendant de chacun sauf pendant la procédure de connexion, lorsque vous savez que l'utilisateur a s'est bien authentifié et est connecté à son compte Google.

Lorsque la fonctionnalité Se connecter avec Google, One Tap ou la connexion automatique est incluse dans votre Les utilisateurs du site doivent d'abord se connecter à leur compte Google pour:

• autoriser le partage de leur profil utilisateur lors de leur première inscription ou lorsque vous vous connectez à votre site,
• et plus tard pour une connexion lors d'une visite ultérieure sur votre site.

Les utilisateurs peuvent rester connectés, être déconnectés ou changer de compte Google tout en maintenant 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 permettait de surveiller le comportement l'état de la session.

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

Auparavant, les écouteurs permettaient de partager les modifications apportées à l'état de connexion d'une compte Google de l'utilisateur. Les écouteurs ne sont plus acceptés.

Supprimez toute référence à listen(), auth2.currentUser et auth2.isSignedIn

Cookies

La fonctionnalité Se connecter avec Google fait un usage limité des cookies, une description de ces cookies suit. Découvrez comment Google utilise les cookies. pour en savoir plus sur les autres types de cookies utilisés par Google.

Cookie G_ENABLED_IDPS défini par l'ancienne bibliothèque de plate-forme Google Sign-in n'est plus utilisée.

Si vous le souhaitez, la nouvelle bibliothèque Google Identity Services peut définir ces selon vos options de configuration:

• g_state enregistre l'état de déconnexion des utilisateurs et est défini lors de l'utilisation de One Tap ou "Connexion automatique",

• g_csrf_token est un cookie d'envoi en double utilisé pour empêcher les attaques CSRF. et est défini lorsque votre point de terminaison de connexion est appelé. Valeur de votre URI de connexion peut être défini explicitement ou utiliser par défaut l'URI de la page actuelle. Votre le 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 ou

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

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

Si vous gérez plusieurs domaines ou sous-domaines, consultez l'article Afficher One Tap sur sous-domaines pour obtenir plus d'instructions sur l'utilisation du cookie g_state.

Documentation de référence sur la migration des objets pour la connexion des utilisateurs