Migrer vers FedCM

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

Lorsque FedCM est activé, le navigateur affiche les invites des utilisateurs et aucun tiers sont utilisés.

Présentation

FedCM offre des flux de connexion plus privés sans nécessiter l'utilisation aux cookies tiers. Le navigateur contrôle les paramètres utilisateur, affiche les invites et contacte un fournisseur d'identité tel que Google uniquement le consentement est donné.

Pour la plupart des sites Web, la migration s'effectue facilement grâce à la rétrocompatibilité de la bibliothèque JavaScript Google Identity Services.

Informations sur la fonctionnalité de connexion automatique

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 et de précieux commentaires.

L'une des réponses que les développeurs Google nous ont fournies concerne la connexion automatique à FedCM l'exigence de geste de l'utilisateur du flux. Pour une confidentialité renforcée, Chrome demande aux utilisateurs confirmer de nouveau qu'ils souhaitent se connecter au site Web avec un compte Google une instance de Chrome, même si l'utilisateur a approuvé le site Web avant l'approbation de FedCM ; déploiement. Cette reconfirmation, ponctuelle, est obtenue en un seul clic Invite One Tap pour démontrer l'intention de l'utilisateur à se connecter. Cette modification peut entraîner perturbation initiale des taux de conversion de connexion automatique pour certains sites Web.

Dans M121, Chrome a récemment modifié la connexion automatique à FedCM l'expérience utilisateur fluide. La reconfirmation n'est requise que lorsque les cookies tiers sont restreintes. Ainsi :

  1. La connexion automatique à FedCM ne nécessite pas de nouvelle confirmation pour les utilisateurs connus. Si les utilisateurs confirment de nouveau les données via l'interface utilisateur de FedCM, Exigence des gestes de l'utilisateur à l'ère post-3PCD.

  2. La connexion automatique à FedCM permet de vérifier l'état de reconfirmation lorsque le les cookies tiers sont limités manuellement par les utilisateurs aujourd'hui, ou par défaut à venir dans Chrome.

Avec ce changement, nous recommandons à tous les développeurs avec connexion automatique de migrer vers FedCM. dès que possible, afin de limiter la perturbation des taux de conversion de connexion automatique.

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

Différences du parcours utilisateur

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

Nouvel utilisateur ayant effectué une seule session

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

Utiliser FedCM Sans FedCM
Nouvel utilisateur qui n'a utilisé qu'une seule session FedCM Nouvel utilisateur ayant effectué une seule session sans FedCM

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

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

Utiliser FedCM Sans FedCM
Parcours utilisateur connu en une seule session avec FedCM (avec connexion automatique désactivée) Parcours utilisateur connu en une seule session sans FedCM (avec connexion automatique désactivée)

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

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

Utiliser FedCM Sans FedCM
Parcours utilisateur connu en une seule session avec FedCM (avec connexion automatique activée) Parcours utilisateur connu en une seule session sans FedCM (avec connexion automatique activée)

Plusieurs sessions

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

Utiliser FedCM Sans FedCM
Utilisateur ayant effectué plusieurs sessions à l'aide de 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, il est recommandé d'installer 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 vous disposez de la version 119 ou d'une version antérieure du navigateur Chrome, ouvrez chrome://flags et activer la fonctionnalité expérimentale FedCmWithoutThirdPartyCookies ; Cette étape n'est pas nécessaire avec la version 120 ou une version ultérieure du navigateur Chrome.

Migrer votre application Web

Suivez ces étapes pour activer FedCM, évaluer l'impact potentiel de la migration et si nécessaire pour 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 "no" renvoie une notification de moment d'affichage dans le objet PromptMomentNotication. Supprimez tout code qui dépend de la d'afficher des méthodes liées au moment. Il s'agit de 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 de la Rappel google.accounts.id.prompt dans PromptMomentNotication , la raison détaillée ne serait pas fournie. Supprimez tout code qui dépend de la méthode getSkippedReason() de votre code.

Notez que la notification indiquant que le moment a été ignoré, isDismissedMoment() et la méthode de motif détaillé associée, getDismissedReason(), reste inchangée 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 invites utilisateur, les positions personnalisées pour One Tap sur ordinateur ne sont pas pris en charge.

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 de pages individuelles, une partie du contenu peut être superposée pour One Tap sur ordinateur ne sont en aucun cas compatibles : attribut de style, data-prompt_parent_id, intermediate_iframes, le cadre iFrame personnalisé et d'autres méthodes créatives.

Modifiez la mise en page pour améliorer l'expérience utilisateur lorsque des informations importantes est masquée. Ne développez pas votre expérience utilisateur autour de l'invite One Tap, même si vous supposez elle est à la position par défaut. Étant donné que l'API FedCM utilise la médiation du navigateur, les 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 s'il origin n'est pas exactement identique à la valeur 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 allow="identity-credentials-get" dans chaque balise iframe du cadre parent:

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

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

    Prenons le 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 supplémentaire (https://onetap.example2.com) qui héberge One Tap.

    Pour que One Tap puisse s'afficher correctement, l'attribut doit être ajouté aux tags iFrame A et 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 cadres iFrame. Il se peut que vous receviez plus de demandes d'assistance liés au problème de One Tap des utilisateurs finaux ou d'autres propriétaires du site. Alors que les mises à jour ne peuvent être effectuées que par les propriétaires du site, vous pouvez suivantes pour en atténuer l'impact:

  • Mettre à jour la documentation destinée aux développeurs afin d'inclure la procédure de configuration de l'iFrame correctement pour appeler votre site. Vous trouverez un lien vers cette page dans la documentation.

  • Le cas échéant, mettez à jour la page des questions fréquentes pour les développeurs.

  • Informez votre équipe d'assistance de ce changement à venir et préparez-vous à y répondre à l'enquête à l'avance.

  • Contactez de manière proactive les partenaires, les clients ou les propriétaires de sites concernés pour obtenir une transition fluide avec 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 CSP n'est pas utilisé sur votre site Web, aucune modification n'est requise.

  • 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 ne subissent aucune modification nécessaires.

  • Sinon, suivez ce guide pour configurer votre CSP. Sans CSP appropriée l'application FedCM One Tap n'apparaîtra pas sur le site.

8. Suppression de la compatibilité avec le format AMP (Accelerated Mobile Pages) pour la connexion

La prise en charge de la connexion utilisateur pour AMP est une fonctionnalité facultative des SIG de votre application Web. que vous avez pu mettre en œuvre. Dans ce cas,

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

  • l'élément personnalisé amp-onetap-google et

  • <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 des pages AMP vers la page de connexion HTML de votre site Web le flux de travail. Notez que le Intermediate Iframe Support API associé est non concernées.

Tester et vérifier votre migration

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

  1. Vérifiez que votre navigateur est compatible avec FedCM et que vous disposez déjà d'un compte Session du compte.

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

  3. Vérifiez que l'invite One Tap s'affiche et se superpose en toute sécurité sous-jacente contenus.

  4. Confirmer que des identifiants corrects sont renvoyés à 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 qu'elle est correcte 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 . (situé dans l'angle supérieur droit), ferme l'invite et entre dans la période de stabilisation empêche l'affichage temporaire de l'invite One Tap. Dans Chrome, si vous que l'invite One Tap s'affiche à nouveau avant la fin de la période d'attente, vous pouvez réinitialiser l'état de la période d'attente en cliquant sur l'icône en forme de cadenas dans la barre d'adresse et en cliquant sur le bouton Réinitialiser l'autorisation.

Connexion automatique en période silencieuse

Lorsque vous testez la connexion automatique à One Tap à l'aide de FedCM, un délai de 10 minutes une période silencieuse entre chaque tentative de connexion automatique. La période silencieuse ne peut pas être réinitialisés. Vous devrez patienter 10 minutes ou utiliser un autre compte Google. à des fins de 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 pour faciliter l'adoption d'autres API telles que FedCM. Elle fonctionne par recherche les fonctionnalités affectées sur votre site, et fournit une liste des recommandations des modifications.