Migrer vers FedCM

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

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 des invites et ne contacte un fournisseur d'identité tel que Google qu'après avoir obtenu le consentement explicite de l'utilisateur.

Pour la plupart des sites Web, la migration se fait de manière transparente via des mises à jour rétrocompatibles de la bibliothèque JavaScript Google Identity Services.

Conseil :Lors des tests Google et des tests d'origine Chrome, un pourcentage du nombre total d'utilisateurs qui se connectent à votre site Web utilisera l'API FedCM. Le pourcentage exact varie et peut changer sans préavis. Avant que FedCM ne devienne obligatoire pour toutes les connexions, utilisez data-use_fedcm_for_prompt ou use_fedcm_for_prompt pour choisir le flux de connexion. Cela peut améliorer votre capacité à déboguer, à collecter des métriques ou à passer toutes les connexions à FedCM une fois la migration terminée.

Informations sur la fonctionnalité de connexion automatique

La version bêta de Federated Credential Management (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.

Google a reçu des commentaires de la part des développeurs concernant 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 obtenue en un seul clic sur l'invite "One Tap" ou le flux de bouton avec FedCM pour démontrer 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.

Récemment, dans M121, Chrome a modifié l'expérience utilisateur du parcours de connexion automatique FedCM. La confirmation n'est requise que lorsque les cookies tiers sont limités. Ainsi :

1. La connexion automatique FedCM ne nécessite pas de confirmation pour les utilisateurs qui reviennent. Si les utilisateurs confirment à nouveau avec l'UI FedCM, cette 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 de connexion automatique de migrer vers FedCM dès que possible afin de réduire les perturbations sur les taux de conversion de connexion automatique.

Pour le flux de connexion automatique, le code JavaScript GIS ne déclenche 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 de premier niveau au lieu du nom de l'application.

Utiliser FedCM	Sans FedCM

Utilisateur connu ayant effectué une seule session (connexion automatique désactivée)

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

Utiliser FedCM	Sans FedCM

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

Multisession

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

Utiliser FedCM	Sans FedCM

Consultez la page sur le bouton Se connecter avec Google pour connaître les principaux parcours utilisateur du flux du bouton 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. Ce paramètre ne concerne que le mode "Un appui" et n'a aucun impact sur le flux de bouton FedCM.

• 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 pour One Tap lors de l'initialisation à l'aide de:

• HTML, définissez l'attribut data-use_fedcm_for_prompt sur true.

• JavaScript, définissez use_fedcm_for_prompt sur true dans l'objet IdConfiguration.

2. Ajoutez un indicateur booléen pour activer FedCM pour le bouton lors de l'initialisation à l'aide de: {:#fedcm_button_flag} (facultatif)

• HTML : définissez l'attribut data-use_fedcm_for_button sur true pour activer le flux de bouton FedCM. Si vous n'activez que le flux de bouton FedCM, vous pouvez également définir l'attribut data-use_fedcm_for_button sur true pour activer la nouvelle fonctionnalité de sélection automatique.

• JavaScript, définissez use_fedcm_for_button sur true dans l'objet IdConfiguration pour activer le flux de bouton FedCM. Lorsque le flux de bouton FedCM est activé uniquement, vous pouvez également définir l'attribut button_auto_select sur true pour activer la nouvelle fonctionnalité de sélection automatique.

  Remarque : Cette étape est facultative. Si vous choisissez de ne pas activer FedCM pour le flux de bouton, il continuera d'utiliser le flux existant sans FedCM.

3. Supprimez l'utilisation des méthodes isDisplayMoment(), isDisplayed(), isNotDisplayed() et getNotDisplayedReason() pour le paiement sans contact 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 de l'affichage. Il s'agit des méthodes isDisplayMoment(), isDisplayed(), isNotDisplayed() et getNotDisplayedReason().

4. Supprimez l'utilisation de la méthode getSkippedReason() pour le paiement sans contact dans votre code.

Bien que le moment de saut, isSkippedMoment(), soit toujours appelé à partir du rappel google.accounts.id.prompt dans l'objet PromptMomentNotication, le motif détaillé ne sera pas fourni. 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é.

5. Supprimez les attributs de style position de data-prompt_parent_id et intermediate_iframes pour le mode Un appui.

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

6. Mettez à jour la mise en page de la page si nécessaire pour le paiement sans contact.

Le navigateur contrôle la taille et la position des requêtes de l'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 de la page pour améliorer l'expérience utilisateur lorsque des informations importantes sont masqué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 d'un fournisseur de navigateur à l'autre.

7. Ajoutez l'attribut allow="identity-credentials-get" au frame parent si votre application Web appelle l'API One Tap ou Button à 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

Lorsque vous utilisez One Tap dans un iframe inter-origine, les utilisateurs peuvent rencontrer une expérience déroutante. L'invite One Tap affiche le nom du domaine de premier niveau, et non celui de l'iframe, par mesure de sécurité pour éviter la collecte d'identifiants. Toutefois, les jetons d'ID sont émis à l'origine de l'iframe. Pour en savoir plus, consultez cette demande sur GitHub.

Étant donné que cette divergence peut être trompeuse, seule l'utilisation de One Tap dans les iframes multi-origines, mais sur le même site, est une méthode compatible. Par exemple, une page sur le domaine de premier niveau https://www.example.com qui utilise une iFrame pour intégrer une page avec un appui sur https://login.example.com. L'invite One Tap affiche "Se connecter à example.com avec google.com".

Les autres cas (domaines différents, par exemple) ne sont pas acceptés. À la place, envisagez d'autres méthodes d'intégration, par exemple:

• Implémentation du bouton Se connecter avec Google sans FedCM activé
• Implémenter le paiement sans contact sur le domaine de premier niveau
• Utilisation des points de terminaison OAuth 2.0 de Google pour une intégration plus personnalisée.
• Si vous incorporez un site tiers dans un iFrame et que vous ne pouvez pas modifier son implémentation de la fonctionnalité Un Tap, vous pouvez empêcher l'invite Un Tap d'apparaître dans l'iFrame. Pour ce faire, supprimez l'attribut allow="identity-credentials-get" de la balise iframe dans le frame parent. L'invite sera supprimée, et vous pourrez ensuite rediriger directement vos utilisateurs vers la page de connexion du site intégré.

Lorsque l'API One Tap ou Button est appelée à partir d'éléments iframes inter-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 contenant un autre iFrame, vous devez vous assurer que l'attribut est ajouté à chaque iFrame, y compris à tous 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 le bouton ou le geste "One Tap".

  Pour vous assurer que le bouton ou le bouton "One Tap" peut s'afficher correctement, l'attribut doit être ajouté aux balises iFrame A et iFrame B.

  Remarque :L'API Iframe intermédiaire est compatible avec les iframes inter-origines FedCM. Aucun attribut supplémentaire n'est nécessaire. Toutefois, si vous intégrez une page à l'aide de l'API Intermediate Iframe dans un autre iFrame, vous devez ajouter l'attribut allow="identity-credentials-get" à tous les iFrames parents. Activez FedCM pour tester et vous assurer que les règles d'autorisation sont correctement configurées à tous les niveaux.

  Préparez-vous à répondre aux questions concernant l'absence de l'invite ou du bouton de paiement sans contact. D'autres sites d'origines différentes peuvent intégrer vos pages hébergeant One Tap dans leurs iFrames. Vous pouvez recevoir un nombre croissant de demandes d'assistance concernant l'absence du bouton ou du mode Un Tap de la part d'utilisateurs finaux ou d'autres propriétaires de sites. 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 pour les développeurs afin d'inclure la procédure de configuration correcte de 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.

  Remarque :Sur la page concernée, le message d'erreur devrait s'afficher dans la console des outils pour les développeurs du navigateur Chrome : [GSI_LOGGER]: FedCM get() rejects with NotAllowedError: The 'identity-credentials-get' feature is not enabled in this document.

8. 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 vous n'utilisez pas de CSP sur votre site Web, aucune modification n'est nécessaire.

• Si votre CSP fonctionne pour le bouton ou le verrouillage par appui 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 appropriée du CSP, le bouton ou le mode "One Tap" FedCM ne s'afficherait pas sur le site.

  Remarque :Sur la page concernée, le message d'erreur devrait s'afficher dans la console des outils pour les développeurs du navigateur Chrome : [GSI_LOGGER]: FedCM get() rejects with NetworkError: Failed to execute 'get' on 'CredentialsContainer': Refused to connect to 'https://accounts.google.com/gsi/fedcm.json' because it violates the document's Content Security Policy.

9. 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 du SIG 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 valider 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 "Un appui" ou "Bouton" de votre application.

3. Vérifiez que l'invite ou le bouton d'un appui unique 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 à l'aide de la fonctionnalité One Tap ou du bouton.

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 pour One Tap

Cliquez sur Un appui  en haut à droite pour fermer l'invite et entrer dans la période de stabilisation, qui empêche l'invite d'un appui de s'afficher temporairement. Dans Chrome, si vous souhaitez que l'invite de paiement sans contact s'affiche de nouveau avant la fin de la période de blocage, vous pouvez réinitialiser l'état de blocage 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 de silence ne peut pas être réinitialisée. Vous devez attendre 10 minutes ou utiliser un autre compte Google pour les tests 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 permet d'adopter d'autres API telles que FedCM. Il analyse votre site à la recherche des fonctionnalités concernées et fournit une liste des modifications recommandées.