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

Mises à jour FedCM: API IdP Sign-In Status, indice de connexion, etc.
bookmark_border Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Chrome 116 propose des fonctionnalités FedCM telles que l'API Login Hint, l'API User Info et l'API RP Context, et lance un essai d'origine pour l'API IdP Sign-In Status.

Dans Chrome 116, Chrome propose les trois nouvelles fonctionnalités de gestion des identifiants fédérés (FedCM) suivantes:

API Login Hint: spécifiez le compte utilisateur préféré à utiliser pour la connexion.
API User Info: récupérez les informations de l'utilisateur qui revient afin que le fournisseur d'identité (IdP) puisse afficher un bouton de connexion personnalisé dans une iframe.
API Contexte RP: utilisez un titre différent de "Se connecter" dans la boîte de dialogue FedCM.

De plus, Chrome lance un essai d'origine pour l'API IdP Sign-In Status. L'API IdP Sign-in Status est obligatoire et sera un changement majeur lorsqu'elle sera publiée. Si vous avez déjà implémenté FedCM, assurez-vous de participer à l'essai de l'origine.

Lorsque FedCM est appelé, le navigateur affiche le compte connecté du fournisseur d'identité (IdP) spécifié. Lorsque l'IDP accepte plusieurs comptes, il liste tous les comptes connectés.

Boîte de dialogue FedCM affichant plusieurs comptes utilisateur

Une fois que l'utilisateur se connecte, le tiers de confiance (RP) lui demande parfois de se réauthentifier. Toutefois, l'utilisateur peut ne pas être sûr du compte qu'il a utilisé. Si le RP peut spécifier le compte avec lequel se connecter, l'utilisateur pourra choisir plus facilement un compte. Le indice de connexion est disponible dans Chrome 116. Grâce à lui, le RP peut réduire la liste à une seule.

Cette extension ajoute un tableau de login_hints dans la réponse du point de terminaison de la liste des comptes de l'IDP, avec tous les types de filtres possibles compatibles avec l'IDP. Par exemple, la réponse des comptes peut se présenter comme suit lorsqu'un IdP prend en charge le filtrage par adresse e-mail et ID:

{
  "accounts": [{
    "id": "demo1",
    "email": "demo1@example.com",
    "name": "John Doe",
    "login_hints": ["demo1", "demo1@example.com"],
    ...
  }, {
    "id": "demo2",
    "email": "demo2@example.com",
    "name": "Jane Doe",
    "login_hints": ["demo2", "demo2@example.com"],
    ...
  }, ...]
}

En transmettant login_hints dans la liste des comptes, le RP peut appeler navigator.credentials.get() avec la propriété loginHint, comme illustré dans l'exemple de code suivant, pour afficher de manière sélective le compte spécifié:

return await navigator.credentials.get({
  identity: {
    providers: [{
      configURL: "https://idp.example/manifest.json",
      clientId: "123",
      nonce: nonce,
      loginHint : "demo1@example.com"
    }]
  }
});

API User Info

Il est désormais courant de voir des boutons de connexion ornés du logo de l'IDP permettant aux utilisateurs de se connecter avec la fédération d'identité. Toutefois, la décoration du bouton à l'aide de l'icône de profil de l'utilisateur et de ses informations permet une connexion encore plus intuitive, en particulier lorsqu'un utilisateur s'est déjà inscrit sur ce site Web avec l'IDP.

Bouton "Se connecter avec Google". — Bouton Se connecter avec Google

Bouton personnalisé "Se connecter avec Google". — Bouton de connexion personnalisée avec Google

Le problème est que, comme le bouton personnalisé dépend des cookies tiers sur le domaine de l'IDP dans un iframe pour identifier l'utilisateur connecté afin d'afficher le bouton, il ne sera plus disponible une fois que les cookies tiers seront abandonnés.

L'API User Info, disponible dans Chrome 116, permet à l'IDP d'obtenir les informations de l'utilisateur qui revient sur le serveur sans dépendre des cookies tiers.

L'API doit être appelée par l'IDP à partir d'un iframe intégré au site Web de la RP afin qu'elle puisse récupérer les informations utilisateur et afficher un bouton personnalisé comme s'il faisait partie de la surface de la RP. Avec l'appel d'API, le navigateur envoie une requête au point de terminaison de la liste des comptes, puis renvoie un tableau d'informations utilisateur si:

L'utilisateur s'est déjà connecté à la RP avec l'IdP via FedCM sur la même instance de navigateur, et les données n'ont pas été effacées.
L'utilisateur est connecté à l'IDP sur la même instance de navigateur.

// Iframe displaying a page from the https://idp.example origin
const user_info = await IdentityProvider.getUserInfo({
    configUrl: "https://idp.example/fedcm.json",
    clientId: "client1234"
});

// IdentityProvider.getUserInfo returns an array of user information.
if (user_info.length > 0) {
  // Chrome puts returning accounts first, so the first account received is guaranteed to be a returning account.
  const name = user_info[0].name;
  const given_name = user_info[0].given_name;
  const display_name = given_name ? given_name : name;
  const picture = user_info[0].picture;
  const email = user_info[0].email;
  // Renders the personalized sign-in button with the information above.
}

Notez que pour autoriser l'appel de IdentityProvider.getUserInfo() à partir d'un iframe ayant la même origine que l'IDP, le code HTML d'intégration doit l'autoriser explicitement avec la règle d'autorisation identity-credentials-get.

<iframe src="https://fedcm-idp-demo.glitch.me" allow="identity-credentials-get"></iframe>

Vous pouvez le voir en action sur https://fedcm-rp-demo.glitch.me/button.

API RP Context

L'API Contexte RP, disponible dans Chrome 116, permet à un RP de modifier la chaîne dans l'UI de la boîte de dialogue FedCM afin qu'elle puisse prendre en charge des contextes d'authentification prédéfinis. Pour voir les différentes options, consultez les captures d'écran suivantes:

Boîte de dialogue FedCM affichée avec — Fenêtre de dialogue FedCM affichée avec "Se connecter à ****". Il s'agit de l'option par défaut si le contexte RP n'est pas spécifié.

L'utilisation est simple. Indiquez la propriété identity.context parmi "signin" (par défaut), "signup", "use" ou "continue".

const credential = await navigator.credentials.get({
  identity: {
    // "signin" is the default, "signup", "use" and "continue" 
    // can also be used
    context: "signup", 
    providers: [{
      configURL: "https://idp.example/fedcm.json",
      clientId: "1234",
    }],
  }
});

Chrome lance une phase d'évaluation de l'origine de l'API d'état de connexion de l'IDP sur ordinateur à partir de Chrome 116, puis sur Android Chrome. Les essais Origin vous donnent accès à une fonctionnalité nouvelle ou expérimentale pour créer une fonctionnalité que vos utilisateurs peuvent essayer pendant une durée limitée avant qu'elle ne soit disponible pour tous.

L'API d'état de connexion de l'IdP est un mécanisme par lequel un IdP informe le navigateur de l'état de connexion de l'utilisateur sur l'IdP. Avec cette API, le navigateur peut réduire les requêtes inutiles à l'IDP et atténuer les attaques par cassage de chiffrement.

Remarque:FedCM introduit une requête authentifiée au point de terminaison de la liste des comptes. Cette requête n'envoie pas de données permettant d'identifier le demandeur et ne permet pas non plus de transmettre les données fournies par le RP. Toutefois, le navigateur effectue séparément une requête non authentifiée contenant les informations du RP à l'client_metadata_endpoint. Le serveur IdP peut ensuite mettre en corrélation la requête non authentifiée avec la requête authentifiée (de manière stochastique) à l'aide de la synchronisation ou d'autres données d'empreinte. Pour en savoir plus, consultez ces diapositives.

Informer le navigateur de l'état de connexion de l'utilisateur

Les fournisseurs d'identité peuvent signaler l'état de connexion de l'utilisateur au navigateur en envoyant un en-tête HTTP ou en appelant une API JavaScript, lorsque l'utilisateur est connecté au fournisseur d'identité ou lorsqu'il est déconnecté de tous ses comptes de fournisseur d'identité. Le navigateur enregistre l'état comme l'un des suivants: "connexion", "déconnexion" ou "inconnu" (par défaut).

Pour indiquer que l'utilisateur est connecté, envoyez un en-tête HTTP IdP-SignIn-Status: action=signin dans une navigation de premier niveau ou une requête de sous-ressource de même origine:

IdP-SignIn-Status: action=signin

Vous pouvez également appeler l'API JavaScript IdentityProvider.login() à partir de l'origine de l'IDP:

IdentityProvider.login()

L'état de connexion de l'utilisateur sera enregistré sous la valeur "sign-in". Lorsque l'état de connexion de l'utilisateur est défini sur "Se connecter", la PR appelant FedCM envoie des requêtes au point de terminaison de la liste de comptes de l'IDP et affiche les comptes disponibles à l'utilisateur dans la boîte de dialogue FedCM.

Pour indiquer que l'utilisateur est déconnecté de tous ses comptes, envoyez l'en-tête HTTP IdP-SignIn-Status: action=signout-all dans une navigation de niveau supérieur ou une requête de sous-ressource de même origine:

IdP-SignIn-Status: action=signout-all

Vous pouvez également appeler l'API JavaScript IdentityProvider.logout() à partir de l'origine de l'IDP:

IdentityProvider.logout()

L'état de connexion de l'utilisateur sera enregistré comme "déconnexion". Lorsque l'état de connexion de l'utilisateur est "Déconnexion", l'appel de FedCM échoue de manière silencieuse sans envoyer de requête au point de terminaison de la liste de comptes de l'IDP.

Par défaut, l'état de connexion de l'IDP est défini sur "inconnu". Cet état est utilisé avant que l'IdP n'envoie un signal à l'aide de l'API d'état de connexion de l'IdP. Nous introduisons cet état pour une meilleure transition, car il se peut qu'un utilisateur se soit déjà connecté au fournisseur d'identité lorsque nous déployons cette API, et que le fournisseur d'identité n'ait pas eu la possibilité de le signaler au navigateur au moment de l'appel initial de FedCM. Dans ce cas, nous envoyons une requête au point de terminaison de la liste de comptes de l'IDP et mettons à jour l'état en fonction de la réponse du point de terminaison de la liste de comptes:

Si le point de terminaison renvoie une liste de comptes actifs, définissez l'état sur "connexion" et ouvrez la boîte de dialogue FedCM pour afficher ces comptes.
Si le point de terminaison ne renvoie aucun compte, définissez l'état sur "déconnexion" et échouez l'appel FedCM.

Que se passe-t-il si la session utilisateur expire ? Autoriser l'utilisateur à se connecter via un flux de connexion dynamique

Même si le fournisseur d'identité continue d'informer le navigateur de l'état de connexion de l'utilisateur, il peut être désynchronisé, par exemple lorsque la session expire. Le navigateur tente d'envoyer une requête authentifiée au point de terminaison de la liste des comptes lorsque l'état de connexion est "connexion", mais le serveur la rejette, car la session n'est plus disponible. Dans ce cas, le navigateur peut permettre à l'utilisateur de se connecter dynamiquement à l'IDP via une fenêtre pop-up.

La boîte de dialogue FedCM affiche un message, comme illustré dans l'image suivante:

Boîte de dialogue FedCM suggérant de se connecter à l'IDP. — Boîte de dialogue FedCM suggérant de se connecter au fournisseur d'identité.

En cliquant sur le bouton Continue (Continuer), le navigateur ouvre une fenêtre pop-up qui redirige l'utilisateur vers la page de connexion de l'IDP.

L'URL de la page de connexion (qui doit être l'origine de l'IDP) peut être spécifiée avec signin_url dans le fichier de configuration de l'IDP.

{
  "accounts_endpoint": "/auth/accounts",
  "client_metadata_endpoint": "/auth/metadata",
  "id_assertion_endpoint": "/auth/idtokens",
  "signin_url": "/signin"
  }
}

La fenêtre pop-up est une fenêtre de navigateur standard qui utilise des cookies propriétaires. Tout ce qui se passe dans la fenêtre de contenu dépend de l'IDP, mais aucune poignée de fenêtre n'est disponible pour envoyer une requête de communication inter-origine à la page du tiers de confiance. Une fois l'utilisateur connecté, le fournisseur d'identité doit:

Envoyez l'en-tête IdP-SignIn-Status: action=signin ou appelez l'API IdentityProvider.login() pour informer le navigateur que l'utilisateur s'est connecté.
Appelez IdentityProvider.close() pour se fermer (la fenêtre pop-up).

// User is signed in...
// Don't forget feature detection.
if (IdentityProvider) {
  // Signal to the browser that the user has signed in.
  IdentityProvider.close();
}

Un utilisateur se connecte à un RP après s'être connecté au fournisseur d'identité à l'aide de FedCM

Remarque:Cette expérience de connexion dynamique est destinée aux cas où une session d'IDP a expiré sans déconnexion explicite, ce qui entraîne un état de connexion du navigateur qui contredit l'état réel. Cette action ne sera pas déclenchée pour les utilisateurs qui ne se sont pas encore connectés à l'IDP. Ce nouveau flux est conçu pour couvrir les cas où l'état de connexion de l'utilisateur au fournisseur d'identité dans le navigateur est "Connexion", mais que le point de terminaison de la liste des comptes du fournisseur d'identité ne renvoie aucun compte.

En supposant que l'API d'état de connexion de l'IDP soit appelée rapidement, lorsque FedCM est appelé, l'un des scénarios suivants peut se produire:

Si le navigateur ne connaît pas l'état de connexion de l'utilisateur ("inconnu"), l'état est mis à jour ("connexion" ou "déconnexion") en fonction de la réponse du fournisseur d'identité à partir du point de terminaison de la liste des comptes. Aucun flux de connexion dynamique ne sera déclenché.
Si un utilisateur s'est connecté à l'IDP dans le navigateur ("sign-in"), puis s'est explicitement déconnecté de l'IDP ("sign-out"), le flux de connexion dynamique ne sera pas déclenché.
Si un utilisateur s'est connecté au fournisseur d'identité dans le navigateur ("connexion"), mais que la session expire sans déconnexion explicite, le parcours de connexion dynamique est déclenché.

L'API IdP Sign-In Status ne permet pas au RP d'afficher une boîte de dialogue "Se connecter à l'IDP" aux utilisateurs qui ne sont pas connectés à l'IDP. Il s'agit d'une fonctionnalité distincte qui pourra être ajoutée à l'avenir.

Vous pouvez tester le comportement de l'API IdP Sign-In Status dans notre démonstration. La session expire trois minutes après votre connexion à l'IDP de démonstration. Vous pouvez ensuite observer la connexion au fournisseur d'identité via le comportement de la fenêtre pop-up.

Participer à l'essai de l'origine

Vous pouvez essayer l'API IdP Sign-In Status localement en activant un indicateur
chrome://flags#fedcm-idp-signin-status-api dans Chrome 116 ou version ultérieure.

Vous pouvez également activer l'API IdP Sign-In Status en enregistrant un essai d'origine deux fois:

Enregistrez une phase d'évaluation de l'origine pour l'IDP.
Enregistrez un essai d'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 IdP Sign-In Status est disponible de Chrome 116 à Chrome 119.

Enregistrer un essai d'origine pour l'IDP

Accédez à la page d'enregistrement du test de l'origine.
Cliquez sur le bouton Register (S'inscrire) et remplissez le formulaire pour demander un jeton.
Saisissez Web Origin (Origine Web) comme origine du fournisseur d'identité.
Cliquez sur Envoyer.
Ajoutez une balise <meta> origin-trial au début des pages qui utilisent IdentityProvider.close(). Par exemple, cela peut ressembler à ceci:
<meta http-equiv="origin-trial" content="TOKEN_GOES_HERE">.

Avertissement:L'envoi d'un en-tête HTTP Origin-Trial ne fonctionne pas avec cette API.

Enregistrer une phase d'évaluation de l'origine tierce pour le RP

Accédez à la page d'enregistrement du test de l'origine.
Cliquez sur le bouton Register (S'inscrire) et remplissez le formulaire pour demander un jeton.
Saisissez Web Origin (Origine Web) comme origine du fournisseur d'identité.
Cochez Correspondance tierce pour injecter le jeton avec JavaScript sur d'autres origines.
Cliquez sur Envoyer.
Intégrez le jeton émis sur un site Web tiers.

Pour intégrer le jeton sur un site Web tiers, ajoutez le code suivant à votre bibliothèque JavaScript ou à votre SDK 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.

Interagir et envoyer des commentaires

Si vous avez des commentaires ou rencontrez des problèmes lors des tests, vous pouvez les partager sur crbug.com.

Photo de Dan Cristian Pădureț sur Unsplash