Migrer vers FedCM

Ce guide vous aide à comprendre les modifications apportées à votre application Web par l'API Federated Credentials Management (FedCM).

Lorsque FedCM est activé, le navigateur affiche des invites utilisateur et aucun cookie tiers n'est utilisé.

Présentation

La Privacy Sandbox pour le Web et la suppression des cookies tiers du Web par Chrome entraînent des modifications importantes des services Google Identity Services et de la procédure de connexion des utilisateurs.

FedCM permet des flux de connexion plus privés sans nécessiter l'utilisation de cookies tiers. Le navigateur contrôle les paramètres utilisateur, affiche les invites des utilisateurs et ne contacte un fournisseur d'identité tel que Google qu'après avoir donné son consentement explicite.

Pour la plupart des sites Web, la migration s'effectue facilement par le biais de mises à jour rétrocompatibles de la bibliothèque JavaScript Google Identity Services.

Informations sur la fonctionnalité de connexion automatique

La version bêta de la gestion des identifiants fédérés (FedCM) pour Google Identity Services a été lancée en août 2023. De nombreux développeurs ont testé l'API et ont fourni de précieux commentaires.

Une réponse de Google aux développeurs concerne l'exigence de geste de l'utilisateur concernant le parcours de connexion automatique de FedCM. Pour renforcer la confidentialité, Chrome demande aux utilisateurs de confirmer à nouveau qu'ils souhaitent se connecter au site Web avec un compte Google dans chaque instance Chrome, même si l'utilisateur a approuvé le site Web avant le déploiement FedCM. Cette reconfirmation ponctuelle est obtenue en un seul clic sur l'invite One Tap pour démontrer l'intention de l'utilisateur de se connecter. Cette modification peut entraîner une interruption initiale des taux de conversion de connexion automatique pour certains sites Web.

Dans M121, Chrome a récemment modifié l'expérience utilisateur du flux de connexion automatique FedCM. La reconfirmation n'est requise que lorsque les cookies tiers sont restreints. Ainsi :

  1. Avant l'application des restrictions liées aux cookies tiers à 100% au 3e trimestre 2024, la connexion automatique FedCM ne nécessite pas de nouvelle confirmation pour les utilisateurs connus. Si les utilisateurs confirment à nouveau dans l'interface utilisateur FedCM, cette nouvelle confirmation sera prise en compte dans l'exigence de geste utilisateur pour l'ère post-3PCD.

  2. La connexion automatique FedCM vérifie l'état de reconfirmation lorsque les cookies tiers sont restreints manuellement par les utilisateurs aujourd'hui ou par défaut dans Chrome à l'avenir.

Avec ce changement, nous recommandons à tous les développeurs de la connexion automatique de migrer vers FedCM dès que possible afin de réduire l'interruption des taux de conversion de connexion automatique.

Pour le flux de connexion automatique, le code JavaScript GIS ne déclenchera pas FedCM sur une ancienne version de Chrome (avant M121), même si votre site Web choisit d'activer FedCM.

Différences du parcours utilisateur

Les expériences One Tap utilisant FedCM et sans FedCM sont similaires, à quelques différences près.

Nouvel utilisateur à session unique

Avec FedCM, One Tap affiche le nom de domaine au lieu du nom de l'application.

Utiliser FedCM Sans FedCM
Nouvel utilisateur à session unique utilisant FedCM Nouvel utilisateur à session unique sans FedCM

Utilisateur connu à session unique (avec connexion automatique désactivée)

Avec FedCM, One Tap affiche le nom de domaine au lieu du nom de l'application.

Utiliser FedCM Sans FedCM
Parcours utilisateur connu d'une seule session à l'aide de FedCM (avec la connexion automatique désactivée) Parcours utilisateur connu à session unique sans FedCM (avec connexion automatique désactivée)

Utilisateur connu à session unique (avec connexion automatique activée)

À l'aide de FedCM, les utilisateurs peuvent cliquer sur X pour annuler la connexion automatique dans un délai de cinq secondes au lieu de cliquer sur le bouton Annuler.

Utiliser FedCM Sans FedCM
Parcours utilisateur connu d'une seule session à l'aide de FedCM (avec connexion automatique activée) Parcours utilisateur connu à session unique sans FedCM (avec connexion automatique activée)

Plusieurs sessions

Avec FedCM, One Tap affiche le nom de domaine au lieu du nom de l'application.

Utiliser FedCM Sans FedCM
Utilisateur effectuant plusieurs sessions utilisant FedCM Utilisateur ayant effectué plusieurs sessions sans FedCM

Avant de commencer

Vérifiez que les paramètres et la version de votre navigateur sont compatibles avec l'API FedCM. Nous vous recommandons de passer à la dernière version.

  • L'API FedCM est disponible dans Chrome 117 ou version ultérieure.

  • Le paramètre Connexion tierce est activé dans Chrome.

  • Si votre navigateur Chrome est version 119 ou antérieure, ouvrez chrome://flags et activez la fonctionnalité expérimentale FedCmWithoutThirdPartyCookies. Cette étape n'est pas nécessaire avec la version 120 ou ultérieure du navigateur Chrome.

Migrer votre application Web

Suivez ces étapes pour activer FedCM, évaluer l'impact potentiel d'une migration et, si nécessaire, modifier votre application Web existante:

1. Ajoutez un indicateur booléen pour activer FedCM lors de l'initialisation à l'aide de la commande suivante:

2. Supprimez l'utilisation des méthodes isDisplayMoment(), isDisplayed(), isNotDisplayed() et getNotDisplayedReason() dans votre code.

Pour améliorer la confidentialité des utilisateurs, le rappel google.accounts.id.prompt ne renvoie plus de notification de moment d'affichage dans l'objet PromptMomentNotication. Supprimez tout code qui dépend des méthodes associées au moment d'affichage. Il s'agit des méthodes isDisplayMoment(), isDisplayed(), isNotDisplayed() et getNotDisplayedReason().

3. Supprimez l'utilisation de la méthode getSkippedReason() dans votre code.

Bien que le moment où l'élément isSkippedMoment() soit ignoré, il est toujours appelé à partir du rappel google.accounts.id.prompt dans l'objet PromptMomentNotication, mais le motif détaillé n'est pas fourni. Supprimez de votre code tout code qui dépend de la méthode getSkippedReason().

Notez que la notification du moment ignoré, isDismissedMoment(), et la méthode de motif détaillé associée, getDismissedReason(), restent inchangées lorsque FedCM est activé.

4. Supprimez position attributs de style de data-prompt_parent_id et de intermediate_iframes.

Le navigateur contrôle la taille et la position des invites utilisateur. Les positions personnalisées ne sont pas compatibles avec One Tap sur ordinateur.

5. Mettez à jour la mise en page si nécessaire.

Le navigateur contrôle la taille et la position des invites utilisateur. En fonction de la mise en page des pages individuelles, certains contenus peuvent être superposés, car les positions personnalisées pour One Tap sur ordinateur ne sont en aucun cas compatibles avec l'attribut de style, data-prompt_parent_id, intermediate_iframes, le iFrame personnalisé et d'autres moyens créatifs.

Modifiez la mise en page pour améliorer l'expérience utilisateur lorsque des informations importantes sont dissimulées. Ne construisez pas votre expérience utilisateur autour de l'invite One Tap, même si vous supposez qu'elle se trouve sur la position par défaut. Étant donné que l'API FedCM est gérée par un navigateur, différents fournisseurs de navigateurs peuvent placer la position de l'invite légèrement différemment.

6. Ajoutez l'attribut allow="identity-credentials-get" au cadre parent si votre application Web appelle l'API One Tap à partir d'iFrames multi-origines.

Un iFrame est considéré comme multi-origine si son origine n'est pas exactement la même que l'origine parente. Par exemple :

  • Domaines différents: https://example1.com et https://example2.com
  • Différents domaines de premier niveau: https://example.uk et https://example.jp

  • Sous-domaines: https://example.com et https://login.example.com

    Pour améliorer la confidentialité des utilisateurs, lorsque l'API One Tap est appelée à partir d'iFrames multi-origines, vous devez ajouter l'attribut allow="identity-credentials-get" dans chaque balise iframe du frame parent:

    <iframe src="https://your.cross-origin/onetap.page" allow="identity-credentials-get"></iframe>

    Si votre application utilise un iFrame qui contient un autre iFrame, vous devez vous assurer que l'attribut est ajouté à chaque iFrame, y compris à tous les sous-iFrames.

    Prenons l'exemple du scénario suivant:

  • Le document du haut (https://www.example.uk) contient un iFrame nommé "iFrame A" qui intègre une page (https://logins.example.com).

  • Cette page intégrée (https://logins.example.com) contient également un iFrame nommé "iFrame B", qui intègre une page (https://onetap.example2.com) qui héberge One Tap.

    Pour garantir que One Tap peut s'afficher correctement, l'attribut doit être ajouté aux tags iFrame A et iFrame B.

    Préparez-vous à répondre aux questions sur l'invite One Tap qui ne s'affiche pas. D'autres sites d'origines différentes peuvent intégrer vos pages hébergeant One Tap à leurs iFrames. Il se peut que vous receviez davantage de demandes d'assistance de la part des utilisateurs finaux ou d'autres propriétaires de sites, car One Tap n'apparaît pas. Bien que les mises à jour ne puissent être effectuées que par les propriétaires des sites sur leurs pages, vous pouvez procéder comme suit pour atténuer l'impact:

  • Mettez à jour votre documentation destinée aux développeurs afin d'indiquer comment configurer correctement l'iFrame pour appeler votre site. Vous pouvez ajouter un lien vers cette page dans votre documentation.

  • Mettez à jour la page des questions fréquentes des développeurs, le cas échéant.

  • Informez votre équipe d'assistance de ce changement à venir et préparez-vous à l'avance à la réponse à votre demande.

  • Contactez de manière proactive les partenaires, les clients ou les propriétaires de sites concernés pour faciliter la transition vers FedCM.

7. Ajoutez ces instructions à votre Content Security Policy (CSP).

Cette étape est facultative, car tous les sites Web ne choisissent pas de définir une CSP.

  • Si vous n'utilisez pas CSP sur votre site Web, aucune modification n'est requise.

  • Si votre CSP fonctionne pour l'application One Tap actuelle et que vous n'utilisez pas connect-src, frame-src, script-src, style-src ou default-src, aucune modification n'est nécessaire.

  • Sinon, suivez ce guide pour configurer votre CSP. Si CSP n'est pas correctement configuré, le One Tap de FedCM ne s'affiche pas sur le site.

8. Suppression de la compatibilité des pages AMP (Accelerated Mobile Pages) avec la connexion.

La fonctionnalité de connexion utilisateur pour AMP est une fonctionnalité facultative des SIG que votre application Web peut avoir implémentée. Si tel est le cas,

Supprimez toutes les références aux éléments suivants:

  • Élément personnalisé amp-onetap-google

  • <script async custom-element="amp-onetap-google" src="https://cdn.ampproject.org/v0/amp-onetap-google-0.1.js"></script>

    Envisagez de rediriger les demandes de connexion depuis une page AMP vers le flux de connexion HTML de votre site Web. Notez que le Intermediate Iframe Support API associé n'est pas affecté.

Tester et vérifier votre migration

Après avoir apporté les modifications nécessaires en fonction des étapes précédentes, vous pouvez vérifier que la migration a réussi.

  1. Vérifiez que votre navigateur est compatible avec FedCM et que vous disposez d'une session de compte Google.

  2. Accédez à la ou aux pages One Tap de votre application.

  3. Vérifiez que l'invite One Tap est affichée et qu'elle se superpose de manière sécurisée au contenu sous-jacent.

  4. Vérifiez que les identifiants sont correctement renvoyés à votre point de terminaison ou à la méthode de rappel lorsque vous vous connectez à votre application à l'aide de One Tap.

  5. Si la connexion automatique est activée, vérifiez que l'annulation fonctionne et que les identifiants corrects sont renvoyés vers votre point de terminaison ou votre méthode de rappel.

Période d'attente One Tap

Cliquez sur One Tap en haut à droite pour fermer l'invite et entrer dans la période de stabilisation, ce qui empêche l'affichage temporaire de l'invite One Tap. Dans Chrome, si vous souhaitez que l'invite One Tap s'affiche à nouveau avant la fin de la période d'attente, vous pouvez réinitialiser l'état de cette période en cliquant sur l'icône en forme de cadenas dans la barre d'adresse, puis sur le bouton Réinitialiser l'autorisation.

Période silencieuse de connexion automatique

Lorsque vous testez One Tap de connexion automatique à l'aide de FedCM, une période de silence de 10 minutes s'écoule entre chaque tentative de connexion automatique. La période silencieuse ne peut pas être réinitialisée. Vous devrez attendre 10 minutes ou utiliser un autre compte Google pour les tests afin de déclencher à nouveau la connexion automatique.

Ressources utiles

L'outil d'analyse de la Privacy Sandbox (PSAT) est une extension des outils pour les développeurs Chrome qui offre des fonctionnalités spécialisées pour aider les développeurs à faire face à l'abandon des cookies tiers et à l'adoption d'API alternatives. Il analyse votre site pour détecter les fonctionnalités affectées et fournit une liste de modifications recommandées.