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 les invites utilisateur et aucun cookie tiers n'est utilisé.

Présentation

La Privacy Sandbox pour le Web et la suppression par Chrome des cookies tiers sur le Web apportent des modifications importantes aux services Google Identity et à la procédure de connexion des utilisateurs.

FedCM permet des flux de connexion plus privés sans avoir à utiliser de cookies tiers. Le navigateur contrôle les paramètres utilisateur, affiche les invites utilisateur 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 s'effectue facilement grâce à des mises à jour rétrocompatibles de la bibliothèque JavaScript Google Identity Services.

Avant de commencer

Vérifiez que la version de votre navigateur et sa version sont compatibles avec l'API FedCM. Passez à une version plus récente si nécessaire.

Avant de tester les flux de connexion avec les cookies tiers bloqués, ouvrez chrome://flags et activez la fonctionnalité expérimentale FedCmWithoutThirdPartyCookies. Cette étape n'est nécessaire que jusqu'à ce qu'elle devienne la valeur par défaut. En outre, le paramètre Connexion tierce doit être activé dans Chrome.

Migrer votre application Web

Suivez ces étapes pour activer FedCM, évaluer l'impact potentiel de la migration et, si nécessaire, apporter des modifications à 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 Display Moment dans l'objet PromptMomentNotication. Supprimez tout code qui dépend des méthodes associées aux moments 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 ignoré, isSkippedMoment(), soit toujours appelé à partir du rappel google.accounts.id.prompt dans l'objet PromptMomentNotication, le motif détaillé ne serait pas fourni. Supprimez de votre code tout code qui dépend de la méthode getSkippedReason().

Notez que la notification de moment ignoré, isDismissedMoment(), et la méthode de motif détaillé associée, getDismissedReason(), restent inchangées 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 ne sont pas compatibles avec One Tap sur ordinateur.

5. Si nécessaire, mettez à jour la mise en page.

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 en tant que positions personnalisées pour One Tap sur ordinateur (comme les attributs de style, data-prompt_parent_id, intermediate_iframes, les cadres iFrame personnalisés 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 créez pas votre expérience utilisateur autour de 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 choisie 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 frame 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 identique à 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 à nouveau une page (https://onetap.example2.com) hébergeant 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 recevrez peut-être une augmentation du nombre de demandes d'assistance liées à l'absence de One Tap 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 des sites sur leurs pages, vous pouvez procéder comme suit pour en limiter 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 créer 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 FedCM.

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

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. Sans configuration appropriée de CSP, l'option One Tap de FedCM ne s'afficherait pas sur le site.

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

La prise en charge de la connexion utilisateur pour les pages 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 d'AMP vers le flux de connexion HTML de votre site Web. Notez que le Intermediate Iframe Support API associé n'est pas affecté.