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 sur ordinateur. Avec l'API Button Mode, les fournisseurs d'identité peuvent utiliser l'API FedCM, même si leurs utilisateurs ne disposent pas de sessions IdP actives lors de l'appel de l'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 limitée par un geste utilisateur et reflète mieux l'intention de l'utilisateur de se connecter.

API Button Mode

L'interface utilisateur FedCM est disponible en tant que widget affiché en haut à droite sur ordinateur ou en tant que bottom sheet sur mobile dès que l'API est appelée, par exemple 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é à l'IDP avant d'accéder à la RP. FedCM n'avait pas de moyen fiable de permettre à l'utilisateur de se connecter à l'IdP avant de lui permettre de se connecter au RP à l'aide du compte disponible sur l'IdP. FedCM va bientôt proposer une solution pour ce faire.

Avec le mode widget, une boîte de dialogue s'affiche en haut à droite dans Chrome pour ordinateur sans activation par l'utilisateur.

La nouvelle API Button Mode ajoute un nouveau mode d'interface utilisateur appelé mode bouton. 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 destination. Il doit plutôt être appelé 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 le bouton est enfoncé, FedCM vérifie si l'utilisateur est connecté à l'IDP via une récupération au 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é via 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 à la RP à l'aide du compte du fournisseur d'identité.

Dans l'interface utilisateur en mode bouton, la boîte de dialogue de connexion affichée est plus grande que dans le mode widget. L'icône de la marque doit donc l'être également pour assurer la cohérence visuelle. La taille minimale de l'icône pour le mode widget est de 25 x 25 pixels, tandis que la taille minimale de l'icône en mode bouton est de 40 x 40 pixels. Le fichier connu de l'IDP permet de spécifier plusieurs URL d'icône comme suit:

{
  // ... Other settings (like endpoints) here
  "branding": {
    "icons": [
      {
        "url": "https://size-25px-image",
        "size": 25,
      },
      {
        "url": "https://size-40px-image",
        "size": 40
      }
    ]
  }
}

Avec le mode bouton, une boîte de dialogue modale s'affiche en haut au centre dans Chrome pour ordinateur, avec une icône plus grande.

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

Un utilisateur se connecte à la 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 l'activation temporaire de l'utilisateur, 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"
    }
  });

Remarque :Pour le moment, Chrome n'accepte que "button" dans la nouvelle propriété mode. D'autres propriétés telles que "widget" seront ajoutées lorsque Chrome déploiera cette fonctionnalité.

Le navigateur envoie un nouveau paramètre au point de terminaison d'assertion d'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 de l'API FedCM à l'aide du mode bouton répond immédiatement, tandis qu'avec le mode widget, il retarde intentionnellement la réponse. En effet, l'état de connexion de l'utilisateur au fournisseur d'identité est considéré comme une information privée. L'envoi d'un signal d'erreur donne rapidement à l'RP un indice sur l'état de connexion de l'utilisateur au fournisseur d'identité. Avec le mode bouton, l'utilisateur est invité à se connecter à l'IDP. Il n'y a donc pas de risque d'exposer l'état de connexion de l'utilisateur à l'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 Mode Bouton, 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.

Détection de fonctionnalités

Pour déterminer si le navigateur peut utiliser le 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 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 IdP 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 inscrivez-vous au test de l'origine 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 à l'essai de l'origine

Vous pouvez tester l'API Button Mode localement en activant un indicateur Chrome chrome://flags#fedcm-button-mode dans Chrome 125 ou version ultérieure.

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

• Enregistrez une phase d'évaluation de l'origine tierce pour le RP.

Les essais Origin Trial vous permettent de tester de nouvelles fonctionnalités et de faire part de vos commentaires sur leur facilité d'utilisation, leur praticité et leur efficacité à la communauté des normes Web. Pour en savoir plus, consultez le guide des essais Origin pour les développeurs Web.

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

1. Accédez à la page d'inscription à la phase d'évaluation de Topics.
2. Cliquez sur le bouton Register (S'inscrire) et remplissez le formulaire pour demander un jeton.
3. Saisissez Web Origin (Origine Web) comme origine du fournisseur d'identité.
4. Vérifiez la mise en 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 de l'IDP diffusé à partir de l'origine de l'IDP.

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 le RP, et non par le script chargé à partir de l'IDP, le RP doit enregistrer lui-même son origine et exécuter son test d'origine first party.

CORS et SameSite=None seront obligatoires dans Chrome 125

CORS

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

Le partage de ressources entre origines multiples (CORS, Cross-Origin-Resource-Sharing) est un système qui consiste à transmettre des en-têtes HTTP et qui détermine si les navigateurs empêchent le code JavaScript de la page de destination d'accéder aux réponses des requêtes inter-origines. Le point de terminaison d'assertion d'identité sur le serveur de l'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 de https://fedcm-rp-demo.glitch.me:

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

Remarque :Étant donné que Access-Control-Allow-Credentials est défini sur "true", Access-Control-Allow-Origin doit renvoyer un domaine explicitement et ne peut pas utiliser d'expression générique indiquée par *.

SameSite=None

Le paramètre SameSite du cookie indique si le cookie est limité à un contexte propriétaire ou SameSite. En spécifiant 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 de l'assertion d'identité et au point de terminaison de la déconnexion. À partir de Chrome 125, Chrome n'enverra ces requêtes avec identifiants que si les cookies sont explicitement marqués comme SameSite=None.