Mises à jour FedCM: Phase d'évaluation de l'API en mode Bouton, CORS et SameSite

Eiji Kitamura

À partir de Chrome 125, l'API en mode Bouton commence une phase d'évaluation sur ordinateur. Avec l'API en mode bouton, les fournisseurs d'identité peuvent utiliser l'API FedCM même si leurs utilisateurs n'ont pas de sessions IdP actives lors de l'appel d'API. Les utilisateurs peuvent ensuite se connecter à un site Web avec leur compte fédéré sans accéder au site du fournisseur d'identité. L'interface utilisateur FedCM en mode bouton est plus proéminente que celle du flux de widget existant, car elle est contrôlée par un geste de l'utilisateur et reflète mieux l'intention de l'utilisateur de se connecter.

API Button Mode

L'interface utilisateur FedCM était disponible sous la forme d'un widget affiché en haut à droite sur ordinateur ou d'une bottom sheet sur mobile, dès que l'API est appelée, ce qui peut se produire lorsque l'utilisateur est redirigé vers le tiers de confiance (RP). Il s'agit du mode widget. Pour afficher le widget, l'utilisateur doit être connecté à l'IdP avant d'arriver sur la RP. FedCM ne disposait pas d'un moyen fiable pour permettre à l'utilisateur de se connecter au fournisseur d'identité avant de l'autoriser à se connecter au RP à l'aide du compte disponible sur le fournisseur d'identité. FedCM va bientôt ajouter une solution pour y parvenir.

En mode Widget, une boîte de dialogue s'affiche en haut à droite dans Chrome pour ordinateur sans que l'utilisateur ne soit activé.

La nouvelle API Mode bouton ajoute un nouveau mode d'interface utilisateur appelé mode bouton. Contrairement au mode Widget, le mode Bouton n'est pas censé être appelé dès que l'utilisateur accède à la RP. Elle doit être appelée lorsque l'utilisateur lance un flux de connexion, par exemple en appuyant sur un bouton "Se connecter avec un fournisseur d'identité".

Dès que vous appuyez sur le bouton, FedCM vérifie si l'utilisateur est connecté à l'IdP via une exploration du point de terminaison des comptes ou un état de connexion stocké dans le navigateur. Si l'utilisateur n'est pas encore connecté, FedCM lui demande de se connecter au fournisseur d'identité à l'aide du login_url fourni par le fournisseur d'identité via une fenêtre pop-up. Si le navigateur sait que l'utilisateur est déjà connecté au fournisseur d'identité ou dès qu'il s'y connecte via la fenêtre pop-up, FedCM ouvre une boîte de dialogue modale permettant à l'utilisateur de choisir un compte d'IdP avec lequel se connecter. En sélectionnant un compte, l'utilisateur peut se connecter au tiers assujetti à des restrictions à l'aide du compte du fournisseur d'identité.

En mode bouton, une boîte de dialogue modale s'affiche en haut au centre de Chrome pour ordinateur.

Essayez par vous-même avec Chrome 125 sur https://fedcm-rp-demo.glitch.me/button_flow.

Un utilisateur se connecte à la RP à l'aide de l'API en mode Bouton.

Pour utiliser l'API en mode Bouton:

• Activer la fonctionnalité expérimentale FedCmButtonMode dans chrome://flags
• Veillez à appeler l'API derrière une activation temporaire de l'utilisateur, par exemple un clic sur un bouton.
• Appelez l'API avec le paramètre mode comme suit:

  return await navigator.credentials.get({
    identity: {
      providers: [{
        configURL: "https://idp.example/config.json",
        clientId: "123",
        nonce:"456",
      }],
      mode: "button"
    }
  });

Remarque :Pour le moment, Chrome n'est compatible qu'avec "button" dans la nouvelle propriété mode. D'autres propriétés, comme "widget", seront ajoutées lorsque cette fonctionnalité sera disponible dans Chrome.

Le navigateur envoie un nouveau paramètre au point de terminaison d'assertion de l'ID représentant le type de requête en incluant mode=button:

POST /fedcm_assertion_endpoint HTTP/1.1
Host: idp.example
Origin: https://rp.example/
Content-Type: application/x-www-form-urlencoded
Cookie: 0x23223
Sec-Fetch-Dest: webidentity
account_id=123&client_id=client1234&nonce=Ct60bD&disclosure_text_shown=true&is_auto_selected=false&mode=button

Remarque :En cas de problème, l'appel d'API FedCM à l'aide du mode bouton répond immédiatement, tandis qu'en mode Widget, il retarde la réponse intentionnellement. En effet, l'état de connexion de l'utilisateur au fournisseur d'identité est considéré comme une information privée, et l'envoi d'un signal d'erreur donne rapidement au RP un indice sur l'état de connexion de l'IdP. Avec le mode bouton, l'utilisateur est invité à se connecter à l'IdP. Il n'est pas nécessaire d'exposer son état de connexion IdP au RP.

Remarque :Les utilisateurs peuvent désactiver le mode Widget FedCM dans les paramètres de Chrome. Cela n'affecte pas l'API Button Mode, car la requête de connexion est lancée par un geste de l'utilisateur et le navigateur doit aider les utilisateurs à terminer le flux de connexion.

Utiliser une autre option de compte

Le RP peut autoriser les utilisateurs à "utiliser d'autres comptes" dans le sélecteur de compte, par exemple lorsque les fournisseurs d'identité acceptent plusieurs comptes ou remplacent le compte existant.

Pour activer l'option permettant d'utiliser un autre compte:

• Activez la fonctionnalité expérimentale FedCmUseOtherAccount dans chrome://flags ou enregistrez la phase d'évaluation de l'API Button Mode.
• Le fournisseur d'identité spécifie les éléments suivants dans le fichier de configuration de l'IdP:

{
  "accounts_endpoint" : ...,
  "modes: {
    "button": {
      "supports_use_other_account": true,
    }
  }
}

Participer à la phase d'évaluation

Vous pouvez essayer l'API en mode bouton localement en activant un indicateur Chrome chrome://flags#fedcm-button-mode sur Chrome 125 ou une version ultérieure.

Les IdP peuvent également activer le mode Bouton en enregistrant une phase d'évaluation:

• Enregistrez une phase d'évaluation tierce pour la RP.

Les phases d'évaluation vous permettent d'essayer de nouvelles fonctionnalités et de donner votre avis sur leur facilité d'utilisation, leur praticité et leur efficacité à la communauté des standards Web. Pour en savoir plus, consultez le guide sur les phases d'évaluation pour les développeurs Web.

La phase d'évaluation de l'API en mode Bouton est disponible de Chrome 125 à Chrome 127.

1. Accédez à la page d'inscription à la phase d'évaluation.
2. Cliquez sur le bouton Register (S'inscrire) et remplissez le formulaire pour demander un jeton.
3. Saisissez l'origine du fournisseur d'identité dans Web Origin (Origine Web).
4. Cochez la case "Tiers en correspondance" pour injecter du code JavaScript dans le jeton sur d'autres origines.
5. Cliquez sur Envoyer.
6. Intégrez le jeton émis à un site Web tiers.

Pour intégrer le jeton à un site Web tiers, ajoutez le code suivant à la bibliothèque JavaScript ou au SDK du fournisseur d'identité diffusé à partir de l'origine de celui-ci.

const tokenElement = document.createElement('meta');
tokenElement.httpEquiv = 'origin-trial';
tokenElement.content = 'TOKEN_GOES_HERE';
document.head.appendChild(tokenElement);

Remplacez TOKEN_GOES_HERE par votre propre jeton.

Remarque :Si l'API FedCM est appelée par la RP, et non via un script chargé à partir du fournisseur d'identité, le RP doit enregistrer lui-même son origine et lancer sa phase d'évaluation first party.

CORS et SameSite=None seront requis dans Chrome 125

CORS

Chrome appliquera CORS sur le point de terminaison d'assertion de l'ID à partir de Chrome 125.

CORS (Cross-Origin-Resource-Sharing) est un système, qui consiste à transmettre des en-têtes HTTP, qui détermine si les navigateurs empêchent le code JavaScript d'interface d'accéder aux réponses aux requêtes multi-origines. Le point de terminaison d'assertion d'ID sur le serveur du fournisseur d'identité doit répondre à la requête avec des en-têtes supplémentaires. Voici un exemple d'en-tête de réponse à une requête envoyée par https://fedcm-rp-demo.glitch.me:

Access-Control-Allow-Origin: https://fedcm-rp-demo.glitch.me
Access-Control-Allow-Credentials: true

Remarque :Comme Access-Control-Allow-Credentials est défini sur "true", Access-Control-Allow-Origin doit renvoyer un domaine explicitement et ne peut pas utiliser de caractère générique indiqué par *.

SameSite=Aucun

Le paramètre SameSite du cookie indique si le cookie est limité à un contexte propriétaire ou sur un même site. Si vous spécifiez None, le cookie pourra être envoyé à un domaine tiers.

Dans FedCM, Chrome envoie des cookies au point de terminaison des comptes, au point de terminaison d'assertion d'ID et au point de terminaison de déconnexion. À partir de Chrome 125, Chrome enverra ces requêtes authentifiées avec uniquement les cookies explicitement marqués comme SameSite=None.