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

Mises à jour FedCM: API IdP Sign-In Status, indice de connexion, etc.

Chrome 116 intègre des fonctionnalités FedCM telles que l'API Login Hint, l'API User Info et l'API RP Context, et lance la phase d'évaluation pour l'API IdP Sign-In Status.

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

API Login Hint: spécifiez un compte utilisateur préféré avec lequel vous connecter.
API User Info: extrayez les informations de l'utilisateur connu afin que le fournisseur d'identité (IdP) puisse afficher un bouton de connexion personnalisé dans un iFrame.
API RP Context: utilisez un titre différent de "Connexion" dans la boîte de dialogue FedCM.

De plus, Chrome lance une évaluation d'origine pour l'API IdP Sign-In Status. L'API IdP Sign-In Status est obligatoire et constituera une modification destructive lorsqu'elle sera disponible. Si vous disposez déjà d'une implémentation de FedCM, assurez-vous de participer à la phase d'évaluation.

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

Boîte de dialogue FedCM affichant plusieurs comptes utilisateur. — Boîte de dialogue FedCM montrant plusieurs comptes utilisateur

Une fois l'utilisateur connecté, le tiers de confiance lui demande parfois de s'authentifier de nouveau. Toutefois, l'utilisateur peut ne pas savoir avec certitude quel compte il a utilisé. Si le tiers assujetti à des restrictions peut spécifier le compte avec lequel se connecter, il sera plus facile pour l'utilisateur de choisir un compte. L'indice de connexion indique la livraison dans Chrome 116. Grâce à lui, le tiers assujetti à des restrictions peut réduire la liste à un seul élément.

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 le fournisseur d'identité. Par exemple, la réponse "accounts" peut se présenter comme suit lorsqu'un fournisseur d'identité accepte le filtrage par adresse e-mail et par 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 tiers assujetti à des restrictions peut appeler navigator.credentials.get() avec la propriété loginHint, comme indiqué dans l'exemple de code suivant, pour afficher le compte spécifié de manière sélective:

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 d'ajouter des boutons de connexion ornés du logo du fournisseur d'identité, qui permettent aux utilisateurs de se connecter via 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 est encore plus intuitive, en particulier lorsqu'un utilisateur s'est déjà inscrit sur ce site Web avec le fournisseur d'identité.

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

Bouton Se connecter avec Google personnalisé. — Bouton Se connecter avec Google personnalisé

La difficulté réside dans le fait que, dans un iFrame, le bouton personnalisé dépend des cookies tiers sur le domaine de l'IdP pour identifier l'utilisateur connecté pour afficher le bouton. Par conséquent, il ne sera plus disponible une fois que les cookies tiers seront obsolètes.

L'API User Info, disponible dans Chrome 116, permet au fournisseur d'identité d'obtenir sur le serveur les informations sur l'utilisateur connu sans dépendre des cookies tiers.

L'API doit être appelée par le fournisseur d'identité à partir d'un iFrame intégré au site Web de la RP, afin qu'elle puisse récupérer les informations sur l'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 dans la même instance de navigateur et les données n'ont pas été effacées.
L'utilisateur est connecté à l'IdP dans la même instance du 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() depuis un iFrame ayant la même origine que le fournisseur d'identité, le code HTML d'intégration doit l'autoriser explicitement à l'aide de 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 RP Context, disponible dans Chrome 116, permet à une RP de modifier la chaîne dans l'interface utilisateur de la boîte de dialogue FedCM afin de l'adapter à des contextes d'authentification prédéfinis. Les captures d'écran suivantes présentent différentes options:

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

L'utilisation est simple. Indiquez pour identity.context la propriété "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 démarre une évaluation de l'origine de l'API IdP Sign-In Status sur ordinateur à partir de Chrome 116, suivi de Chrome pour Android par la suite. Les phases d'évaluation vous permettent d'accéder à une fonctionnalité nouvelle ou expérimentale afin de créer une fonctionnalité que vos utilisateurs pourront tester pendant une durée limitée avant qu'elle ne soit mise à la disposition de tous.

L'API IdP Sign-In Status est un mécanisme par lequel un fournisseur d'identité informe le navigateur de l'état de connexion de l'utilisateur sur le fournisseur d'identité. Avec cette API, le navigateur peut réduire les requêtes inutiles adressées au fournisseur d'identité et limiter les attaques de synchronisation potentielles.

Remarque:FedCM introduit une requête avec identifiants au point de terminaison de la liste des comptes. Cette requête n'envoie pas de données identifiant le demandeur et n'autorise pas non plus la transmission des données fournies par le RP. Toutefois, le navigateur effectue séparément une requête sans identifiant contenant les informations de la RP à client_metadata_endpoint. Le serveur IdP peut ensuite corréler la requête sans identifiant avec la requête avec identification (de manière stochastique) à l'aide de données temporelles 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 d'IdP. Le navigateur enregistre l'un des états suivants: "sign-in", "sign-out" ou "unknown" (par défaut).

Pour signaler 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 du fournisseur d'identité:

IdentityProvider.login()

Cela permet d'enregistrer l'état de connexion de l'utilisateur comme "connexion". Lorsque l'état de connexion de l'utilisateur est défini sur "sign-in", le PR appelant à FedCM envoie des requêtes au point de terminaison de la liste des comptes de l'IdP et affiche les comptes disponibles à l'utilisateur dans la boîte de dialogue FedCM.

Pour signaler que l'utilisateur est déconnecté de tous ses comptes, envoyez l'en-tête HTTP IdP-SignIn-Status: action=signout-all dans une requête de navigation de premier niveau 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 du fournisseur d'identité:

IdentityProvider.logout()

L'état de connexion de l'utilisateur est alors "déconnecté". Lorsque l'état de connexion de l'utilisateur est "déconnecté", l'appel à FedCM échoue sans envoyer de requête au point de terminaison de la liste des comptes du fournisseur d'identité.

Par défaut, l'état de connexion du fournisseur d'identité est défini sur "inconnu". Cet état est utilisé avant que le fournisseur d'identité n'envoie un signal à l'aide de l'API IdP Sign-In Status. Nous introduisons cet état pour faciliter la transition, car il est possible qu'un utilisateur s'est déjà connecté au fournisseur d'identité lors de l'envoi de cette API, et que le fournisseur d'identité n'ait pas la possibilité d'en informer le navigateur au moment où FedCM est appelé pour la première fois. Dans ce cas, nous envoyons une requête au point de terminaison de la liste des comptes du fournisseur d'identité et mettons à jour l'état en fonction de la réponse du point de terminaison de la liste des 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 arrive à expiration ? 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 est possible qu'il ne soit pas synchronisé, par exemple à l'expiration de la session. Le navigateur tente d'envoyer une requête avec identifiant au point de terminaison de la liste des comptes lorsque l'état de connexion est "sign-in", mais le serveur la refuse, car la session n'est plus disponible. Dans un tel scénario, le navigateur peut autoriser de manière dynamique l'utilisateur à se connecter au fournisseur d'identité via une fenêtre pop-up.

La boîte de dialogue FedCM affiche un message, comme illustré ci-dessous:

Boîte de dialogue FedCM suggérant de se connecter à l'IdP.

Lorsque vous cliquez sur le bouton Continue (Continuer), le navigateur ouvre une fenêtre pop-up redirigeant l'utilisateur vers la page de connexion du fournisseur d'identité.

L'URL de la page de connexion (qui doit être l'origine du fournisseur d'identité) 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. Ce qui se passe dans la fenêtre de contenu dépend du fournisseur d'identité, mais aucun handle de fenêtre n'est disponible pour envoyer une requête de communication multi-origine à la page du RP. 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 a été 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é à l'IdP via FedCM

Remarque:Cette expérience de connexion dynamique est conçue lorsqu'une session d'IdP a expiré sans déconnexion explicite, ce qui entraîne une contradiction entre l'état de connexion du navigateur et l'état réel. Il ne se déclenche pas 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 du 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 IdP Sign-In Status est 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é dans le point de terminaison de la liste des comptes. Aucun flux de connexion dynamique ne sera déclenché.
Si un utilisateur s'est connecté au fournisseur d'identité dans le navigateur ("connexion"), puis s'est explicitement déconnecté du fournisseur d'identité ("déconnexion"), le flux de connexion dynamique ne se déclenchera pas.
Si un utilisateur s'est connecté au fournisseur d'identité dans le navigateur ("connexion"), mais que la session expire sans déconnexion explicite, le flux 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" pour les utilisateurs qui ne sont pas connectés à l'IdP. Il s'agit d'une fonctionnalité distincte qui pourra être ajoutée ultérieurement.

Vous pouvez tester le comportement de l'API IdP Sign-In Status dans notre démonstration. La session expire trois minutes après que vous vous êtes connecté à 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 à la phase d'évaluation

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

Vous pouvez également activer l'API IdP Sign-In Status en enregistrant deux fois une phase d'évaluation:

Enregistrez une phase d'évaluation pour le fournisseur d'identité.
Enregistrez une phase d'évaluation tierce pour le 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 IdP Sign-In Status est disponible de Chrome 116 à Chrome 119.

Enregistrer une phase d'évaluation pour l'IdP

Accédez à la page d'inscription à la phase d'évaluation.
Cliquez sur le bouton Register (S'inscrire) et remplissez le formulaire pour demander un jeton.
Saisissez l'origine du fournisseur d'identité dans Web Origin (Origine Web).
Cliquez sur Envoyer.
Ajoutez une balise <meta> origin-trial à l'en-tête 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 fonctionnera pas pour cette API.

Enregistrer une phase d'évaluation tierce pour le RP

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

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

Interagir et donner votre avis

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

Photo de Dan Cristian Pădureț sur Unsplash