Migrer vers FedCM

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

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

Présentation

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

Pour la plupart des sites Web, la migration s'effectue facilement grâce à des mises à jour rétrocompatibles vers 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 nous ont fait part de leurs commentaires.

Les développeurs ont répondu que Google indiquait l'exigence de geste utilisateur pour le flux de connexion automatique FedCM. Pour améliorer la confidentialité, Chrome demande aux utilisateurs de confirmer qu'ils souhaitent se connecter au site Web avec un compte Google dans chaque instance Chrome, même s'ils ont approuvé le site Web avant le déploiement de FedCM. Cette reconfirmation unique est effectuée en un seul clic sur l'invite "One Tap" (Un seul geste) pour indiquer l'intention de l'utilisateur de se connecter. Ce changement peut entraîner une perturbation 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 de FedCM. La reconfirmation n'est requise que lorsque les cookies tiers sont restreints. Ainsi :

  1. La connexion automatique à FedCM ne nécessite pas de nouvelle confirmation pour les utilisateurs connus. Si les utilisateurs confirment à nouveau avec l'UI FedCM, cette nouvelle confirmation sera prise en compte pour la condition requise concernant les gestes utilisateur pour l'ère post-3PCD.

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

Avec ce changement, nous recommandons à tous les développeurs avec connexion automatique de migrer vers FedCM dès que possible, afin de limiter 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 entre les parcours utilisateur

Les expériences One Tap avec FedCM et sans FedCM ne sont similaires que par de légères différences.

Nouveaux utilisateurs ayant effectué une seule session

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

Utiliser FedCM Sans FedCM
Nouveaux utilisateurs ayant effectué une seule session à l'aide de FedCM Nouvel utilisateur ayant effectué une seule session sans FedCM

Utilisateur connu ayant effectué une seule session (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 unique avec FedCM (connexion automatique désactivée) Parcours utilisateur connu en une seule session sans FedCM (avec connexion automatique désactivée)

Utilisateur ayant effectué une seule session (avec connexion automatique activée)

Avec FedCM, les utilisateurs peuvent cliquer sur X pour annuler la connexion automatique dans les cinq secondes au lieu de cliquer sur le bouton Annuler.

Utiliser FedCM Sans FedCM
Parcours utilisateur unique utilisant FedCM (avec connexion automatique activée) Parcours utilisateur de retour en une seule session sans FedCM (avec connexion automatique activée)

Multisession

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

Utiliser FedCM Sans FedCM
Utilisateur multisession utilisant FedCM Utilisateur multisession 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 la version de votre navigateur Chrome est la 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

Pour activer FedCM, évaluer l'impact potentiel de la migration et, si nécessaire, apporter des modifications à votre application Web existante, procédez comme suit:

1. Ajoutez un indicateur booléen pour activer FedCM lors de l'initialisation à l'aide des éléments suivants:

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 aucune notification de moment d'affichage dans l'objet PromptMomentNotication. Supprimez tout code qui dépend des méthodes lié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 de désactivation, isSkippedMoment(), soit toujours appelé à partir du rappel google.accounts.id.prompt dans l'objet PromptMomentNotication, la raison détaillée ne serait pas fournie. Supprimez tout code qui dépend de la méthode getSkippedReason().

Notez que la notification de moment ignoré, isDismissedMoment(), et la méthode de raison détaillée associée, getDismissedReason(), ne changent pas lorsque FedCM est activé.

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

Le navigateur contrôle la taille et la position des requêtes utilisateur. Les positions personnalisées ne sont pas acceptées pour One Tap sur ordinateur.

5. Modifiez la mise en page de la page si nécessaire.

Le navigateur contrôle la taille et la position des invites utilisateur. En fonction de la mise en page de chaque page, certains contenus peuvent être superposés, car les positions personnalisées pour le paiement en un clic sur ordinateur ne sont pas acceptées, comme l'attribut style, data-prompt_parent_id, intermediate_iframes, l'iFrame personnalisée et d'autres méthodes créatives.

Modifiez la mise en page pour améliorer l'expérience utilisateur lorsque des informations importantes sont dissimulées. Ne basez pas votre expérience utilisateur sur l'invite "One Tap", même si vous supposez qu'elle se trouve dans la position par défaut. Étant donné que l'API FedCM est gérée par le navigateur, la position de l'invite peut varier légèrement selon les fournisseurs de navigateurs.

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

Un iframe est considéré comme inter-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'éléments iframes inter-origines, vous devez ajouter l'attribut allow="identity-credentials-get" dans chaque balise iframe de frame parent:

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

    Si votre application utilise une iFrame contenant une autre iFrame, vous devez vous assurer que l'attribut est ajouté à chaque iFrame, y compris à toutes les sous-iFrames.

    Prenons les exemples suivants :

  • Le document supérieur (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 à son tour une page (https://onetap.example2.com) qui héberge One Tap.

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

    Préparez-vous aux demandes concernant 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 dans leurs iFrames. Vous pouvez recevoir un nombre accru de demandes d'assistance de la part d'utilisateurs finaux ou d'autres propriétaires de sites concernant l'absence de One Tap. Bien que les mises à jour ne puissent être effectuées que par les propriétaires de sites sur leurs pages, vous pouvez prendre les mesures suivantes 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 votre page de questions fréquentes pour les développeurs, le cas échéant.

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

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

7. Ajoutez ces directives à votre stratégie de sécurité du contenu (CSP).

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

  • Si CSP n'est pas utilisé sur votre site Web, aucune modification n'est nécessaire.

  • Si votre CSP fonctionne avec One Tap actuel 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. Sans configuration correcte de CSP, FedCM One Tap ne s'affichera pas sur le site.

8. Supprimez la compatibilité avec Accelerated Mobile Pages (AMP) pour la connexion.

La prise en charge de la connexion des utilisateurs pour AMP est une fonctionnalité facultative de GIS que votre application Web peut avoir implémentée. Dans ce 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 requêtes de connexion à partir d'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 effectué les modifications nécessaires en fonction des étapes précédentes, vous pouvez vérifier que la migration a bien 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 "Un appui" s'affiche et se superpose de manière sécurisée au contenu sous-jacent.

  4. Vérifiez qu'un identifiant correct est renvoyé à votre point de terminaison ou à votre méthode de rappel lorsque vous vous connectez à votre application avec One Tap.

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

Période d'attente de One Tap

Cliquez sur One Tap en haut à droite pour fermer l'invite et entrer dans la période de refroidissement, 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 de silence pour la connexion automatique

Lorsque vous testez la connexion automatique One Tap à l'aide de FedCM, une période de silence de 10 minutes est appliquée 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 le test afin de déclencher à nouveau la connexion automatique.

Ressources utiles

Privacy Sandbox Analysis Tool (PSAT) est une extension des outils pour les développeurs Chrome qui facilite l'adoption d'autres API telles que FedCM. Il analyse votre site pour détecter les fonctionnalités affectées et fournit une liste de modifications recommandées.