Google Sign-In avec les API FedCM

Ce guide traite de l'impact de l'abandon des cookies tiers sur la plate-forme Bibliothèque de la plate-forme de connexion. Les sujets abordés comprennent la chronologie et Étapes suivantes pour une mise à jour rétrocompatible de la bibliothèque : Réalisez une analyse d'impact et vérifiez que la connexion des utilisateurs continue de fonctionner comme prévu et, si nécessaire, des instructions pour mettre à jour votre application Web. Options pour gérer la période de transition et obtenir de l'aide sont également abordés.

État de la bibliothèque

Les nouvelles applications Web ne pourront plus utiliser la plate-forme obsolète Google Sign-In bibliothèque, tandis que les applis qui l'utilisent peuvent continuer jusqu'à nouvel ordre. A La date d'abandon définitif de la bibliothèque n'a pas été établie. Pour en savoir plus, consultez Abandon de l'assistance et arrêt.

La Privacy Sandbox de Chrome bloquer les cookies tiers affecte les applications Web qui utilisent la bibliothèque de la plate-forme Google Sign-In. Pour conserver le comportement existant, sans requérir l'utilisation de cookies tiers, une mise à jour rétrocompatible ajoute des API FedCM à cette bibliothèque. Même si la plupart des modifications sont transparentes, Modifications apportées aux invites de consentement de l'utilisateur, les tags iFrame permissions-policy et Content Security Policy (CSP). Ces modifications peut affecter votre application Web, et nécessiter la modification du code de l'application et du site configuration.

Pendant la période de transition, une option de configuration détermine si Les API FedCM sont utilisées lors de la connexion de l'utilisateur.

Chronologie

Dernière mise à jour : juillet 2024

Voici les dates et les modifications qui ont une incidence sur le comportement de connexion des utilisateurs:

  • Mars 2023 Abandon de la prise en charge de la plate-forme Google Sign-In bibliothèque.
  • Janvier 2024 Chrome bloque 1% des cookies tiers, le protocole de connexion la bibliothèque de plate-forme bénéficie d'une exception temporaire par rapport aux cookies tiers lors d'un essai avant arrêt.
  • Juillet 2024 : début de la période de transition et bibliothèque de la plate-forme Google Sign-In la prise en charge des API FedCM est ajoutée. Par défaut, Google contrôle le pourcentage de requêtes de connexion d'utilisateurs via FedCM au cours de cette période. Les applications Web peuvent remplacer explicitement ce comportement par le paramètre use_fedcm.
  • Adoption obligatoire (date à déterminer) des API FedCM par l'équipe Google Bibliothèque de plate-forme de connexion, après laquelle le paramètre use_fedcm est ignoré et toutes les demandes de connexion des utilisateurs utilisent FedCM.

Après la migration vers les API FedCM, la bibliothèque de la plate-forme Google Sign-In n'est plus disponible affectées par le blocage des cookies tiers. Pour les mises à jour sur les cookies tiers consultez le calendrier Privacy Sandbox de Chrome.

Étapes suivantes

Vous avez le choix entre trois options:

  1. Réalisez une évaluation d'impact et, si nécessaire, mettez à jour votre application Web. Cette approche permet d'évaluer si les fonctionnalités qui nécessitent des modifications dans votre application Web en cours d'utilisation. Vous trouverez les instructions dans la section suivante de ce guide.
  2. Déplacer vers la bibliothèque Google Identity Services (GIS). Passer à la dernière version une bibliothèque de connexion compatible est vivement recommandée. Pour ce faire, suivez suivez ces instructions.
  3. Ne rien faire. Votre application Web est automatiquement mise à jour lorsque La bibliothèque Google Sign-In a été déplacée vers les API FedCM pour la connexion des utilisateurs. Il s'agit de la mais il est possible que les utilisateurs ne puissent pas se connecter votre application Web.

Réaliser une évaluation d'impact

Suivez ces instructions pour déterminer si votre application Web peut être mise à jour facilement via une mise à jour rétrocompatible ou si des modifications sont nécessaires pour éviter les utilisateurs ne parviennent pas à se connecter lorsque la bibliothèque de la plate-forme Google Sign-In adopte les API FedCM.

Configuration

Les API du navigateur et la dernière version de la bibliothèque de la plate-forme Google Sign-In sont nécessaires pour utiliser FedCM lors de la connexion de l'utilisateur.

Avant d'aller plus loin:

  • Installez la dernière version de Chrome pour ordinateur. Chrome pour Android nécessite la version M128 ou une version ultérieure et ne peut pas être testé à l'aide de versions antérieures.

  • Ouvrez chrome://flags et définissez les caractéristiques suivantes sur ces valeurs:

    • #fedcm-authz Activée si votre site utilise une Content Security Policy qui bloque https://accounts.google.com/gsi/ottoken.
    • #tracking-protection-3pcd Activée
    • #third-party-cookie-deprecation-trial Désactivé
    • #tpcd-metadata-grants Désactivé
    • #tpcd-heuristics-grants Désactivé

    puis relancez Chrome.

  • Définissez use_fedcm sur true lors de l'initialisation de la plate-forme Google Sign-In. bibliothèque dans votre application Web. L'initialisation se présente généralement comme suit:

    • gapi.client.init({use_fedcm: true}) ou
    • gapi.auth2.init({use_fedcm: true}) ou
    • gapi.auth2.authorize({use_fedcm: true}).

  • Invalider les versions mises en cache de la bibliothèque de la plate-forme Google Sign-In En général, cette étape n'est pas nécessaire, car la dernière version de la bibliothèque est téléchargée directement dans le navigateur en incluant api.js, client.js ou platform.js dans une balise <script src> (la requête peut utiliser l'un de ces éléments noms de groupes de la bibliothèque).

  • Confirmez les paramètres OAuth de votre ID client OAuth:

    1. Ouvrir la page "Identifiants" de Google API Console

    2. Vérifiez que l'URI de votre site Web est inclus dans Origines JavaScript autorisées. L'URI comprend le schéma et nom d'hôte complet uniquement. Exemple :https://www.example.com

    3. Les identifiants peuvent éventuellement être renvoyés via une redirection vers un point de terminaison. que vous hébergez plutôt que via un rappel JavaScript. Dans ce cas, vérifiez que vos URI de redirection sont inclus dans la liste des URI de redirection autorisés. Les URI de redirection incluent le schéma, le nom d'hôte complet et le chemin d'accès. et doit respecter les règles de validation des URI de redirection. Exemple : https://www.example.com/auth-receiver.

Tests

Après avoir suivi les instructions de configuration:

Rechercher la demande d'accès à la bibliothèque Google Sign-In

Vérifiez si les modifications apportées aux paramètres permissions-policy et Content Security Policy sont nécessaire en inspectant la requête pour la bibliothèque de la plate-forme Google Sign-In. Pour ce faire, localisez la requête à l'aide du nom et de l'origine de la bibliothèque:

  • Dans Chrome, ouvrez le panneau Réseau des outils de développement, puis actualisez la page.
  • Utilisez les valeurs des colonnes Domain et Name pour localiser la bibliothèque. requête: <ph type="x-smartling-placeholder">
      </ph>
    • Le domaine est apis.google.com et
    • Le nom est api.js, client.js ou platform.js. Le point spécifique La valeur "Nom" dépend du groupe de bibliothèques demandé par le document.

Par exemple, filtrez sur apis.google.com dans la colonne Domain (Domaine) et platform.js dans la colonne Nom.

Vérifier la règle "Permissions-policy" de l'iFrame

Il est possible que votre site utilise la bibliothèque de la plate-forme Google Sign-In dans un environnement multi-origine iFrame. Si c'est le cas, une mise à jour est nécessaire.

Après avoir suivi la procédure Localiser la requête de bibliothèque Google Sign-In instructions, sélectionnez la requête de bibliothèque Google Sign-In dans les outils de développement dans le panneau Network (Réseau), puis recherchez l'en-tête Sec-Fetch-Site dans le Section En-têtes de requête de l'onglet En-têtes Si la valeur de l'en-tête est:

  • same-siteou same-origin, alors les règles multi-origines ne s'appliquent pas des changements sont nécessaires.
  • cross-origin modifications peuvent être nécessaires si un iFrame est utilisé.

Pour vérifier si un iFrame est présent, procédez comme suit:

  • Sélectionnez le panneau Éléments dans les outils pour les développeurs Chrome.
  • Appuyez sur Ctrl+F pour trouver un iFrame dans le document.

Si un iFrame est détecté, inspectez le document pour rechercher les appels à gapi.auth2 fonctions ou des instructions script src pour charger la bibliothèque Google Sign-In dans l'iFrame. Dans ce cas :

Répétez cette procédure pour chaque iFrame du document. peuvent être imbriqués, veillez à ajouter la directive allow à tous les iFrames parents environnants.

Vérifier Content Security Policy

Si votre site utilise une Content Security Policy, vous devrez peut-être mettre à jour votre CSP afin de autoriser l'utilisation de la bibliothèque Google Sign-In.

Après avoir suivi la procédure Localiser la requête de bibliothèque Google Sign-In instructions, sélectionnez la requête de bibliothèque Google Sign-In dans les outils de développement dans le panneau Network (Réseau), puis recherchez l'en-tête Content-Security-Policy dans le Section En-têtes de réponse de l'onglet En-têtes.

Si l'en-tête est introuvable, aucune modification n'est nécessaire. Sinon, vérifiez si l'une des ces directives CSP sont définies dans l'en-tête CSP et sont mises à jour comme suit:

  • Ajout de https://apis.google.com/js/, https://accounts.google.com/gsi/, et https://acounts.google.com/o/fedcm/ à n'importe quel connect-src, default-src ou frame-src.

  • Ajout de https://apis.google.com/js/bundle-name.js à script-src... directive. Remplacez bundle-name.js par api.js, client.js ou platform.jsbasé sur la bibliothèque regroupent les requêtes de documents.

Vérifier les modifications apportées aux invites de l'utilisateur

Le comportement des invites utilisateur diffère, FedCM ajoute une boîte de dialogue modale affiché par le navigateur et met à jour les conditions d'activation des utilisateurs.

Image de la boîte de dialogue modale FedCM

Inspectez la mise en page de votre site pour vérifier que le contenu sous-jacent peut être en toute sécurité superposée et temporairement masquée par la boîte de dialogue modale du navigateur. Si cette n'est pas le cas, vous devrez peut-être ajuster la mise en page ou la position de certains éléments de votre site Web.

Activation des utilisateurs

FedCM inclut de nouvelles conditions d'activation utilisateur. En appuyant sur un bouton ou cliquer sur un lien sont des exemples de gestes qui permettent aux origines tierces pour effectuer des requêtes réseau ou pour stocker des données. Avec FedCM, le navigateur vous invite à saisir le consentement de l'utilisateur lorsque:

  • un utilisateur se connecte d'abord à une application Web à l'aide d'une nouvelle instance de navigateur ; ou
  • GoogleAuth.signIn est appelé.

Aujourd'hui, si l'utilisateur s'est déjà connecté à votre site Web, vous pouvez obtenir Les informations de connexion de l'utilisateur lors de l'initialisation de la bibliothèque Google Sign-In à l'aide de gapi.auth2.init, sans autre interaction de l'utilisateur.

En raison de l'abandon des cookies tiers, cela n'est plus possible à moins que le l'utilisateur a d'abord effectué la procédure de connexion à FedCM au moins une fois.

En activant FedCM et en appelant GoogleAuth.signIn, la prochaine fois utilisateur visite votre site Web, gapi.auth2.init peut obtenir les informations de connexion de l'utilisateur des informations lors de l'initialisation sans intervention de l'utilisateur.

Cas d'utilisation courants

La documentation destinée aux développeurs pour la bibliothèque Google Sign-In inclut des guides et du code pour les cas d'utilisation courants. Cette section explique comment FedCM affecte comportemental.

  • Intégrer Google Sign-In à votre application Web

    Dans cette demo, un élément <div> et une classe affichent le bouton, et pour les utilisateurs déjà connectés, l'événement onload de la page renvoie l'ID identifiants de connexion. Une interaction de l'utilisateur est requise pour se connecter et établir un nouveau session.

    L'initialisation de la bibliothèque est effectuée par la classe g-signin2, qui appelle gapi.load et gapi.auth2.init.

    Un geste de l'utilisateur, un événement onclick de l'élément <div> appelle auth2.signIn. lors de la connexion ou auth2.signOut à la déconnexion.

  • Créer un bouton Google Sign-In personnalisé

    Dans la démonstration, les attributs personnalisés permettent de contrôler l'apparence bouton de connexion et, pour les utilisateurs déjà connectés, l'événement de page onload renvoie les identifiants de l'utilisateur. Une interaction de l'utilisateur est requise pour se connecter et d'établir une nouvelle session.

    L'initialisation de la bibliothèque s'effectue via un événement onload pour la platform.js et le bouton est affiché par gapi.signin2.render.

    Un geste de l'utilisateur, en appuyant sur le bouton de connexion, appelle auth2.signIn.

    Dans la deuxième démonstration, un élément <div>, des styles CSS et une image personnalisée sont permettant de contrôler l'apparence du bouton de connexion. L'interaction de l'utilisateur est pour se connecter et ouvrir une nouvelle session.

    L'initialisation de la bibliothèque s'effectue lors du chargement du document à l'aide d'une fonction de démarrage qui appelle gapi.load, gapi.auth2.init et gapi.auth2.attachClickHandler

    Un geste de l'utilisateur, un événement onclick de l'élément <div> appelle auth2.signIn. utiliser auth2.attachClickHandler lors de la connexion ou auth2.signOut pour à la déconnexion.

  • Surveiller l'état de la session de l'utilisateur

    Dans cette demo, l'utilisateur appuie sur un bouton pour se connecter et se déconnecter. Une interaction de l'utilisateur est requise pour se connecter et ouvrir une nouvelle session.

    L'initialisation de la bibliothèque s'effectue en appelant directement gapi.load. gapi.auth2.init, puis gapi.auth2.attachClickHandler() platform.js est chargé à l'aide de script src.

    Un geste de l'utilisateur, un événement onclick de l'élément <div> appelle auth2.signIn. utiliser auth2.attachClickHandler lors de la connexion ou auth2.signOut pour à la déconnexion.

  • Demander des autorisations supplémentaires

    Dans demo, une pression sur un bouton permet de demander un protocole OAuth 2.0 supplémentaire. d'obtenir un nouveau jeton d'accès. Pour les utilisateurs déjà connectés, L'événement de la page onload renvoie les identifiants de l'utilisateur. Veuillez indiquer une interaction de l'utilisateur pour se connecter et ouvrir une nouvelle session.

    L'initialisation de la bibliothèque est effectuée par l'événement onload pour le platform.js via un appel à gapi.signin2.render.

    Un geste de l'utilisateur, qui clique sur un élément <button>, déclenche une requête pour des habilitations OAuth 2.0 supplémentaires à l'aide de googleUser.grant ou auth2.signOut lors de la déconnexion.

  • Intégrer Google Sign-In à l'aide d'écouteurs

    Dans cette demo, pour les utilisateurs déjà connectés, l'événement de page onload renvoie les identifiants de l'utilisateur. Une interaction de l'utilisateur est requise pour se connecter et d'établir une nouvelle session.

    L'initialisation de la bibliothèque s'effectue lors du chargement du document à l'aide d'une fonction de démarrage qui appelle gapi.load, gapi.auth2.init et gapi.auth2.attachClickHandler Ensuite, auth2.isSignedIn.listen et Les auth2.currentUser.listen permettent de configurer la notification des modifications l'état de la session. Enfin, auth2.SignIn est appelé pour renvoyer les identifiants pour les utilisateurs connectés.

    Un geste de l'utilisateur, un événement onclick de l'élément <div> appelle auth2.signIn. utiliser auth2.attachClickHandler lors de la connexion ou auth2.signOut pour à la déconnexion.

  • Google Sign-In pour les applications côté serveur

    Dans demo, un geste de l'utilisateur est utilisé pour demander un code d'autorisation OAuth 2.0. Un rappel JS effectue un appel AJAX pour envoyer la réponse au backend pour la validation.

    L'initialisation de la bibliothèque s'effectue à l'aide d'un événement onload pour platform.js. , qui utilise une fonction de démarrage pour appeler gapi.load et gapi.auth2.init

    Un geste de l'utilisateur, qui clique sur un élément <button>, déclenche une requête pour un code d'autorisation en appelant auth2.grantOfflineAccess.

  • Authentification unique multiplate-forme

    FedCM exige le consentement pour chaque instance de navigateur, même si les utilisateurs Android déjà connectés, un consentement unique est nécessaire.

Gérer la période de transition

Pendant la période de transition, un pourcentage d'utilisateurs connectés peut utiliser FedCM, le le pourcentage exact peut varier et évoluer au fil du temps. Par défaut, Google contrôle le nombre de demandes de connexion qui utilisent FedCM, mais vous pouvez choisir d'activer ou de désactiver utiliser FedCM pendant la période de transition. À la fin de la période de transition FedCM devient obligatoire et est utilisé pour toutes les demandes de connexion.

L'utilisateur est alors redirigé vers la procédure de connexion à FedCM, les utilisateurs sont alors redirigés vers la procédure de connexion existante. Ce comportement est contrôlé à l'aide du paramètre use_fedcm.

Activer

Il peut être utile de contrôler si toutes les tentatives de connexion à votre compte utilisent les API FedCM. Pour ce faire, définissez use_fedcm sur true lors de l'initialisation la bibliothèque de la plate-forme. Dans ce cas, la demande de connexion de l'utilisateur utilise les API FedCM.

Désactiver

Au cours de la période de transition, un pourcentage de tentatives de connexion des utilisateurs vers votre site utilisent les API FedCM par défaut. Si vous avez besoin de plus de temps pour modifier votre vous pouvez désactiver temporairement l'utilisation des API FedCM. Pour ce faire, définissez use_fedcm sur false lors de l'initialisation de la bibliothèque de la plate-forme. Connexion de l'utilisateur n'utilise pas les API FedCM dans ce cas.

Une fois l'adoption obligatoire effectuée, tous les paramètres use_fedcm sont ignorés par le Bibliothèque de la plate-forme Google Sign-In.

Obtenir de l'aide

Effectuez une recherche ou posez des questions sur StackOverflow à l'aide du tag google-signin.