Cette page a été traduite par l'API Cloud Translation.

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 démarre un sur ordinateur. Avec l'API Button Mode, les fournisseurs d'identité peuvent utiliser API FedCM même si leurs utilisateurs n'ont pas de sessions IdP actives lors de l'appel d'API. Les utilisateurs peuvent alors se connecter à un site Web avec leur compte fédéré sans être j'ai accédé au site du fournisseur d'identité. L'interface utilisateur de FedCM en mode Bouton est plus proéminente. par rapport à celui du flux de widgets existant, car il est contrôlé par un utilisateur geste et reflète mieux l'intention de l'utilisateur de se connecter.

API Button Mode

L'interface utilisateur de FedCM était disponible sous la forme d'un widget affiché en haut à droite. dans un angle de l'écran sur un ordinateur ou sous la forme d'une bottom sheet sur un mobile, dès que l'API est appelée. qui peut se produire lorsque l'utilisateur accède au tiers de confiance (RP). C'est ce qu'on appelle mode widget. Pour afficher le widget, l'utilisateur doit être connecté à l'IdP avant de rejoindre le tiers assujetti à des restrictions. FedCM en lui-même ne disposait pas d'un moyen fiable l'utilisateur se connecte au fournisseur d'identité avant de pouvoir l'autoriser à se connecter au tiers assujetti à des restrictions à l'aide du compte disponible sur le fournisseur d'identité. FedCM va ajouter une méthode pour cela.

En mode Widget, une boîte de dialogue s'affiche dans l'angle supérieur droit de Chrome pour ordinateur sans nécessiter d'activation par l'utilisateur.

La nouvelle API Button Mode ajoute un nouveau mode d'interface utilisateur appelé mode button (bouton). Contrairement au mode widget, le mode bouton n'est pas censé être appelé dès que l'utilisateur renvoie tiers assujetti à des restrictions Elle est plutôt conçue pour être appelée lorsque l'utilisateur lance un flux de connexion. par exemple en appuyant sur "Se connecter avec un fournisseur d'identité" .

Dès que l'utilisateur appuie sur le bouton, FedCM vérifie si l'utilisateur est connecté IdP via une extraction vers les comptes point de terminaison ou un état de connexion stocké navigateur. Si le utilisateur n'est pas encore connecté, FedCM demande à l'utilisateur de se connecter au fournisseur d'identité à l'aide du login_url fournies par l'IdP 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 IdP. pour vous connecter. En sélectionnant un compte, l'utilisateur peut se connecter à la RP à l'aide du compte d'IdP.

Dans l'interface utilisateur en mode Bouton, la boîte de dialogue de connexion affichée est plus grande que mode Widget, et l'icône de marque doit également être utilisée pour garantir une cohérence visuelle. Bien que la taille minimale de l'icône en mode widget soit de 25 x 25 pixels, la taille minimale pour l'icône en mode bouton mesure 40 x 40 pixels. Le protocole bien connu de l'IdP fichier permet en spécifiant 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 pour ordinateur. — En mode Bouton, une boîte de dialogue modale s'affiche en haut au centre de Chrome pour ordinateur, avec une icône plus grande.

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

</ph>

Un utilisateur se connecte au tiers assujetti à des restrictions à l'aide de l'API Button Mode.

Pour utiliser l'API Button Mode:

Activer la fonctionnalité expérimentale FedCmButtonMode dans chrome://flags
Veillez à appeler l'API via une activation utilisateur temporaire. 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 à l'assertion d'ID point de terminaison 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 de caractéristiques

Pour déterminer si le navigateur peut utiliser le mode Bouton, vous pouvez Examinez-le à l'aide du 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 tiers assujetti à des restrictions peut autoriser les utilisateurs à "utiliser d'autres comptes" dans le sélecteur de compte, lorsque les fournisseurs d'identité acceptent plusieurs comptes ou remplacent le compte existant.

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

Activer la fonctionnalité expérimentale FedCmUseOtherAccount dans chrome://flags ou inscrivez-vous à la phase d'évaluation de l'API Button Mode.
Le fournisseur d'identité spécifie les éléments suivants dans la configuration du fournisseur d'identité. fichier :

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

Participer à la phase d'évaluation

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

Les fournisseurs d'identité peuvent également activer le mode bouton en enregistrant une phase d'évaluation:

Enregistrer une phase d'évaluation tierce pour le tiers assujetti à des restrictions.

Les essais Origin Trial vous permettent de tester de nouvelles fonctionnalités et de donner votre avis la facilité d'utilisation, l'aspect pratique et l'efficacité à la communauté des normes du Web. Pour Pour en savoir plus, consultez le Guide des phases d'évaluation pour le Web Développeurs

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

Accédez à la page d'inscription à la phase d'évaluation. .
Cliquez sur le bouton Register (S'inscrire), puis remplissez le formulaire pour demander un jeton.
Saisissez l'origine du fournisseur d'identité (IdP) sur Web Origin (Origine Web).
Cochez la case "Correspondance tierce" pour injecter le jeton avec JavaScript sur d'autres origines.
Cliquez sur Envoyer.
Intégrez le jeton émis à un site Web tiers.

Pour intégrer le jeton sur un site Web tiers, ajoutez le code suivant au fichier Bibliothèque JavaScript ou SDK diffusé à partir de 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 requis dans Chrome 125

CORS

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

Le CORS (Cross-Origin-Resource-Sharing) est un système qui consiste à transmettre En-têtes HTTP, qui déterminent si les navigateurs bloquent le code JavaScript de l'interface d'accéder aux réponses aux requêtes multi-origines. Le point de terminaison d'assertion d'ID le serveur IdP doit répondre à la requête avec des en-têtes supplémentaires. La Voici un exemple d'en-tête de réponse à une demande provenant https://fedcm-rp-demo.glitch.me:

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

SameSite=None

Cookie's SameSite indique si le cookie est limité à un contexte propriétaire ou issu du même site. En le spécifiant sur None, le cookie peut être envoyé à un domaine tiers.

Dans FedCM, Chrome envoie des cookies aux comptes point de terminaison, l'assertion d'ID point de terminaison et la déconnexion via un point de terminaison unique. À partir de Chrome 125, Chrome n'enverra ces requêtes avec identifiants qu'avec des cookies explicitement marqué comme SameSite=None.