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

Eiji Kitamura

À partir de Chrome 125, l'API Button Mode commence une phase d'évaluation Origin Trial sur ordinateur. Avec l'API Button Mode, 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 être redirigés vers le site de l'IdP. L'UI FedCM en mode bouton est plus visible que celle du flux de widget existant, car elle est déclenchée par un geste de l'utilisateur et reflète mieux son intention de se connecter.

API Button Mode

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

En mode widget, une boîte de dialogue s'affiche en haut à droite de Chrome sur ordinateur, sans activation de l'utilisateur.
En mode widget, une boîte de dialogue s'affiche en haut à droite de Chrome sur ordinateur sans activation de l'utilisateur.

La nouvelle API Button Mode ajoute un mode UI appelé button. Contrairement au mode widget, le mode bouton n'est pas conçu pour être appelé dès que l'utilisateur accède à la page de paiement. Elle est plutôt destinée à ê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 l'utilisateur appuie sur le bouton, FedCM vérifie s'il est connecté au fournisseur d'identité via une récupération 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 de l'login_url fourni par le fournisseur d'identité dans une fenêtre pop-up. Si le navigateur sait que l'utilisateur est déjà connecté à l'IdP ou dès que l'utilisateur se connecte à l'IdP avec la fenêtre pop-up, FedCM ouvre une boîte de dialogue modale permettant à l'utilisateur de choisir un compte IdP avec lequel se connecter. En sélectionnant un compte, l'utilisateur peut se connecter au RP à l'aide du compte IdP.

Dans l'UI en mode bouton, la boîte de dialogue de connexion affichée est plus grande que dans le mode widget. L'icône de branding doit donc l'être aussi pour maintenir la cohérence visuelle. La taille minimale de l'icône en mode widget est de 25 x 25 px, tandis qu'elle est de 40 x 40 px en mode bouton. Le fichier well-known de l'IdP permet de spécifier plusieurs URL d'icônes comme suit :

{
  // ... Other settings (like endpoints) here
  "branding": {
    "icons": [
      {
        "url": "https://size-25px-image",
        "size": 25,
      },
      {
        "url": "https://size-40px-image",
        "size": 40
      }
    ]
  }
}
En mode bouton, une boîte de dialogue modale s'affiche en haut au centre de Chrome sur ordinateur.
En mode bouton, une boîte de dialogue modale s'affiche en haut au centre de Chrome sur ordinateur, avec une icône plus grande.

Essayez-le vous-même avec Chrome 125 sur https://fedcm-demo-rp.dev/active-mode.

Un utilisateur se connecte au RP à l'aide de l'API Button Mode.

Pour utiliser l'API Button Mode :

  • Activez la fonctionnalité expérimentale FedCmButtonMode dans chrome://flags.
  • Veillez à appeler l'API derrière une activation utilisateur éphémère, comme 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"
    }
  });

Le navigateur enverra un nouveau paramètre au point de terminaison d'assertion d'identité 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

Détection des fonctionnalités

Pour déterminer si le navigateur est éligible à l'utilisation du mode bouton, vous pouvez examiner le code suivant :

let supportsFedCmMode = false;
try {
  navigator.credentials.get({
    identity: Object.defineProperty(
      {}, 'mode', {
        get: function () { supportsFedCmMode = true; }
      }
    )
  });
} catch(e) {}

if (supportsFedCmMode) {
  // The button mode is supported.
}

Utiliser l'option "Utiliser un autre compte"

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

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

  • Activez la fonctionnalité expérimentale FedCmUseOtherAccount dans chrome://flags ou inscrivez-vous à l'origin trial de l'API Button Mode.
  • L'IdP 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 de l'origine

Vous pouvez essayer l'API Button Mode en local en activant un flag Chrome chrome://flags#fedcm-button-mode sur Chrome 125 ou version ultérieure.

Les IdP peuvent également activer le mode bouton en enregistrant un test d'origine :

Les essais Origin Trial 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 normes Web. Pour en savoir plus, consultez le Guide des versions d'essai d'origine pour les développeurs Web.

La phase d'évaluation de l'API Button Mode est disponible de Chrome 125 à Chrome 130.

  1. Accédez à la page d'inscription à l'Origin Trial.
  2. Cliquez sur le bouton Register (S'inscrire) et remplissez le formulaire pour demander un jeton.
  3. Saisissez l'origine du fournisseur d'identité en tant qu'origine Web.
  4. Cochez "Correspondance tierce" pour injecter le jeton avec JavaScript sur d'autres origines.
  5. Cliquez sur Envoyer.
  6. Intégrez le jeton émis sur un site Web tiers.

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

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.

CORS et SameSite=None seront obligatoires dans Chrome 125

CORS

Chrome appliquera CORS au point de terminaison d'assertion d'identité à partir de Chrome 125.

CORS (Cross-Origin Resource Sharing) est un système qui consiste à transmettre des en-têtes HTTP. Il détermine si les navigateurs empêchent le code JavaScript du frontend d'accéder aux réponses des requêtes cross-origin. Le point de terminaison d'assertion d'identité sur le serveur IdP 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 provenant de https://fedcm-rp-demo.glitch.me :

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

SameSite=None

Le paramètre SameSite d'un cookie indique si le cookie est limité à un contexte propriétaire ou SameSite. En spécifiant la valeur None, le cookie peut être envoyé à un domaine tiers.

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