Guide du d�veloppeur de l'API�Federated�Credential�Management

D�couvrez comment utiliser FedCM pour la f�d�ration d'identit� prot�geant la confidentialit�.

FedCM (Federated Credential Management) est un service approche des services d'identit� f�d�r�e (comme "Se connecter avec...") o� les utilisateurs peuvent se connecter � des sites sans partager leurs informations personnelles avec le le service d'identit� ou le site.

Pour en savoir plus sur les cas d'utilisation de FedCM, les parcours utilisateur et la feuille de route des API, consultez le pr�sentation de l'API FedCM.

Environnement de d�veloppement FedCM

Vous avez besoin d'un contexte s�curis� (HTTPS ou localhost) � la fois sur l'IdP et la RP dans Chrome pour utiliser FedCM.

D�boguer du code dans Chrome sur Android

Configurez et ex�cutez un serveur localement pour d�boguer votre code FedCM. Vous pouvez acc�der � ce serveur dans Chrome sur un appareil Android connect� � l'aide d'un c�ble USB avec port le transfert.

Vous pouvez utiliser les outils de d�veloppement sur ordinateur pour d�boguer Chrome sur Android en suivant la instructions dans l'article D�bogage � distance d'Android appareils mobiles.

Bloquer les cookies tiers sur Chrome

<ph type="x-smartling-placeholder">
</ph> Simuler la suppression progressive des cookies tiers en configurant Chrome pour les bloquer
Simuler la suppression progressive des cookies tiers en configurant Chrome pour les bloquer
.

Vous pouvez tester le fonctionnement de FedCM sans cookies tiers sur Chrome avant r�ellement appliqu�es.

Pour bloquer les cookies tiers, utilisez la navigation priv�e mode ou s�lectionnez "Bloquer" "Cookies tiers" dans les param�tres de votre ordinateur, sur chrome://settings/cookies ou sur mobile en acc�dant � Param�tres > Param�tres des sites > Cookies :

Utiliser l'API FedCM

Vous int�grez FedCM en cr�ant un fichier connu, fichier de configuration et points de terminaison pour les comptes list, �mission d'assertion et et �ventuellement des m�tadonn�es client.

Ensuite, FedCM propose des API JavaScript que les tiers peuvent utiliser pour signer avec le fournisseur d'identit�.

Cr�er un fichier connu

Pour emp�cher les outils de suivi d'utiliser abusivement les API, un fichier bien connu doit �tre diffus� � partir de /.well-known/web-identity des l'eTLD+1 du IdP :

Par exemple, si les points de terminaison de l'IdP https://accounts.idp.example/, ils doivent diffuser un fichier connu � l'adresse https://idp.example/.well-known/web-identity ainsi qu'une configuration d'IdP fichier. Voici un exemple de contenu de fichier connu:

{
  "provider_urls": ["https://accounts.idp.example/config.json"]
}

Le fichier JSON doit contenir la propri�t� provider_urls avec un tableau des IdP fichier de configuration qui peut �tre sp�cifi�e en tant que partie chemin d'acc�s configURL en navigator.credentials.get par les tiers assujettis � des restrictions. Le nombre de Le nombre de cha�nes d'URL dans le tableau est limit� � une, mais cela peut varier des commentaires � l'avenir.

Cr�er un fichier de configuration IdP et des points de terminaison

Le fichier de configuration de l'IdP fournit la liste des points de terminaison requis pour le navigateur. IdPs h�bergera ce fichier de configuration, ainsi que les points de terminaison et les URL requis. Tous les fichiers JSON doivent �tre diffus�es avec le type de contenu application/json.

L'URL du fichier de configuration est d�termin�e par les valeurs fournies au Appel navigator.credentials.get ex�cut� sur un tiers assujetti � des restrictions

const credential = await navigator.credentials.get({
  identity: {
    context: 'signup',
    providers: [{
      configURL: 'https://accounts.idp.example/config.json',
      clientId: '********',
      nonce: '******'
    }]
  }
});
const { token } = credential;

Indiquez l'URL compl�te de l'emplacement du fichier de configuration de l'IdP en tant que configURL. Quand ? navigator.credentials.get() est appel� sur la RP, le navigateur r�cup�re le fichier de configuration avec une requ�te GET sans l'en-t�te Origin ni le Referer. La requ�te n'a pas de cookies et ne suit pas les redirections. Cela emp�che efficacement l'IdP de savoir qui a effectu� la requ�te et quels Le tiers assujetti � des restrictions tente de se connecter. Exemple�:

GET /config.json HTTP/1.1
Host: accounts.idp.example
Accept: application/json
Sec-Fetch-Dest: webidentity
<ph type="x-smartling-placeholder">

Le navigateur attend une r�ponse JSON de l'IdP, qui inclut les �l�ments suivants : propri�t�s:

Propri�t� Description
accounts_endpoint (obligatoire) URL du point de terminaison des comptes.
client_metadata_endpoint (facultatif) URL du point de terminaison des m�tadonn�es client.
id_assertion_endpoint (obligatoire) URL du point de terminaison d'assertion d'ID.
disconnect (facultatif) URL du point de terminaison de d�connexion.
login_url (obligatoire) URL de la page de connexion permettant � l'utilisateur de se connecter au fournisseur d'identit�.
branding (facultatif) Objet contenant diff�rentes options de branding.
branding.background_color (facultatif) Option de branding qui d�finit la couleur d'arri�re-plan du bouton "Continuer en tant que" . Utilisez la syntaxe CSS appropri�e : hex-color, hsl(), rgb() ou named-color.
branding.color (facultatif) Option de branding qui d�finit la couleur du texte de la mention "Continuer en tant que..." . Utilisez la syntaxe CSS appropri�e : hex-color, hsl(), rgb() ou named-color.
branding.icons (facultatif) Option de marque qui d�finit l'objet ic�ne, affich� dans la bo�te de dialogue de connexion. L'objet icon est un tableau avec deux param�tres: <ph type="x-smartling-placeholder">
    </ph>
  • url (obligatoire): URL de l'image de l'ic�ne. Cette option n'est pas compatible avec les images SVG.
  • size (facultatif): dimensions de l'ic�ne, cens�es �tre carr�es et de r�solution unique. Ce nombre doit �tre sup�rieur ou �gal � 25.

Le tiers assujetti � des restrictions peut modifier la cha�ne dans l'interface utilisateur de la bo�te de dialogue FedCM via la valeur identity.context pour navigator.credentials.get() afin de prendre en charge l'authentification pr�d�finie diff�rents contextes. La propri�t� facultative peut �tre "signin" (par d�faut), "signup", "use" ou "continue".

<ph type="x-smartling-placeholder">
</ph> Application du branding dans la bo�te de dialogue FedCM
Comment le branding est-il appliqu� � la bo�te de dialogue FedCM ?
.

Voici un exemple de corps de r�ponse provenant du fournisseur d'identit�:

{
  "accounts_endpoint": "/accounts.php",
  "client_metadata_endpoint": "/client_metadata.php",
  "id_assertion_endpoint": "/assertion.php",
  "disconnect_endpoint": "/disconnect.php",
  "login_url": "/login",
  "branding": {
    "background_color": "green",
    "color": "#FFEEAA",
    "icons": [{
      "url": "https://idp.example/icon.ico",
      "size": 25
    }]
  }
}

Une fois que le navigateur a r�cup�r� le fichier de configuration, il envoie les requ�tes suivantes au Points de terminaison du fournisseur d'identit�:

<ph type="x-smartling-placeholder">
</ph> Points de terminaison IdP
Points de terminaison du fournisseur d'identit�
.

Point de terminaison des comptes

Le point de terminaison des comptes du fournisseur d'identit� renvoie la liste des comptes dont l'utilisateur actuellement connect� au fournisseur d'identit�. Si le fournisseur d'identit� prend en charge plusieurs comptes, renvoie tous les comptes connect�s.

Le navigateur envoie une requ�te GET avec des cookies avec SameSite=None, mais sans un param�tre client_id, l'en-t�te Origin ou l'en-t�te Referer. Ce emp�che efficacement le fournisseur d'identit� d'identifier le tiers assujetti � des restrictions que l'utilisateur tente de signer dans votre projet. Exemple�:

GET /accounts.php HTTP/1.1
Host: accounts.idp.example
Accept: application/json
Cookie: 0x23223
Sec-Fetch-Dest: webidentity

� la r�ception de la requ�te, le serveur doit:

  1. V�rifiez que la requ�te contient un en-t�te HTTP Sec-Fetch-Dest: webidentity.
  2. Faites correspondre les cookies de session avec les ID des comptes d�j� connect�s.
  3. R�pondez en fournissant la liste des comptes.

Le navigateur attend une r�ponse JSON incluant une propri�t� accounts. avec un tableau d'informations sur le compte, avec les propri�t�s suivantes:

Propri�t� Description
id (obligatoire) Identifiant unique de l'utilisateur.
name (obligatoire) Pr�nom et nom de famille de l'utilisateur.
email (obligatoire) Adresse e-mail de l'utilisateur.
given_name (facultatif) Pr�nom de l'utilisateur.
picture (facultatif) URL de l'avatar de l'utilisateur.
approved_clients (facultatif) Tableau des ID client des tiers assujettis � des restrictions aupr�s desquels l'utilisateur s'est inscrit.
login_hints (facultatif) Tableau de tous les types de filtres possibles que le fournisseur d'identit� prend en charge pour sp�cifier un compte. Le tiers assujetti � des restrictions peut appeler navigator.credentials.get() avec la propri�t� loginHint pour de mani�re s�lective le compte sp�cifi�.
domain_hints (facultatif) Tableau r�pertoriant l'ensemble des domaines auxquels le compte est associ�. Le tiers assujetti � des restrictions peut appeler navigator.credentials.get() avec une domainHint pour filtrer les Google Cloud.

Exemple de corps de r�ponse:

{
  "accounts": [{
    "id": "1234",
    "given_name": "John",
    "name": "John Doe",
    "email": "john_doe@idp.example",
    "picture": "https://idp.example/profile/123",
    "approved_clients": ["123", "456", "789"],
    "login_hints": ["demo1", "demo1@idp.example"]
  }, {
    "id": "5678",
    "given_name": "Johnny",
    "name": "Johnny",
    "email": "johnny@idp.example",
    "picture": "https://idp.example/profile/456",
    "approved_clients": ["abc", "def", "ghi"],
    "login_hints": ["demo2", "demo2@idp.example"],
    "domain_hints": ["corp.example"]
  }]
}

Si l'utilisateur n'est pas connect�, r�pondez avec le code HTTP 401 (Non autoris�).

La liste de comptes renvoy�e est utilis�e par le navigateur et ne sera pas accessible aux le tiers assujetti � des restrictions.

Point de terminaison des m�tadonn�es client

Le point de terminaison des m�tadonn�es client du fournisseur d'identit� renvoie les m�tadonn�es du tiers de confiance : les r�gles de confidentialit� et les conditions d'utilisation du tiers assujetti � des restrictions. Les tiers assujettis � des restrictions doivent fournir des liens vers leurs r�gles de confidentialit� et conditions d'utilisation au fournisseur d'identit�. Ces liens sont affich� dans la bo�te de dialogue de connexion lorsque l'utilisateur ne s'est pas inscrit aupr�s du tiers assujetti � des restrictions avec le fournisseur d'identit�.

Le navigateur envoie une requ�te GET � l'aide de client_id. navigator.credentials.get sans cookies. Exemple�:

GET /client_metadata.php?client_id=1234 HTTP/1.1
Host: accounts.idp.example
Origin: https://rp.example/
Accept: application/json
Sec-Fetch-Dest: webidentity

� la r�ception de la requ�te, le serveur doit:

  1. D�terminez le tiers assujetti � des restrictions pour client_id.
  2. R�pondre avec les m�tadonn�es du client

Les propri�t�s du point de terminaison des m�tadonn�es du client incluent:

Propri�t� Description
privacy_policy_url (facultatif) URL des r�gles de confidentialit� du tiers assujetti � des restrictions.
terms_of_service_url (facultatif) URL des conditions d'utilisation du RP.

Le navigateur attend une r�ponse JSON du point de terminaison:

{
  "privacy_policy_url": "https://rp.example/privacy_policy.html",
  "terms_of_service_url": "https://rp.example/terms_of_service.html",
}

Les m�tadonn�es client renvoy�es sont utilis�es par le navigateur et ne sont pas mis � la disposition du tiers assujetti � des restrictions.

Point de terminaison de l'assertion d'ID

Le point de terminaison d'assertion d'ID du fournisseur d'identit� renvoie une assertion pour l'utilisateur connect�. Lorsque l'utilisateur se connecte � un site Web de tiers assujetti � des restrictions avec navigator.credentials.get() , le navigateur envoie une requ�te POST contenant des cookies SameSite=None et un type de contenu application/x-www-form-urlencoded pour ce point de terminaison avec les informations suivantes:

Propri�t� Description
client_id (obligatoire) Identifiant client du tiers assujetti � des restrictions.
account_id (obligatoire) Identifiant unique de l'utilisateur qui se connecte.
nonce (facultatif) Nonce de la requ�te, fourni par la RP.
disclosure_text_shown Il en r�sulte une cha�ne de "true" ou "false" (plut�t qu'une valeur bool�enne). Le r�sultat est "false" si le texte de la mention n'a pas �t� affich�. Cela se produit lorsque l'ID client du tiers assujetti � des restrictions a �t� inclus dans la liste de propri�t�s approved_clients de la r�ponse du point de terminaison des comptes ou si le navigateur a observ� un moment d'inscription par le pass� en l'absence de approved_clients.
is_auto_selected Si la r�authentification automatique est effectu�e sur le tiers assujetti � des restrictions, is_auto_selected indique "true". Sinon, "false". Cela est utile pour prendre en charge davantage de fonctionnalit�s li�es � la s�curit�. Par exemple, certains utilisateurs peuvent pr�f�rer un niveau de s�curit� plus �lev� qui n�cessite une m�diation explicite de l'utilisateur pour l'authentification. Si un IdP re�oit une requ�te de jeton sans cette m�diation, il peut traiter la requ�te diff�remment. Par exemple, renvoyez un code d'erreur permettant au tiers assujetti � des restrictions d'appeler � nouveau l'API FedCM avec mediation: required.

Exemple d'en-t�te HTTP:

POST /assertion.php HTTP/1.1
Host: accounts.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=true

� la r�ception de la requ�te, le serveur doit:

  1. R�pondre � la requ�te avec CORS (Cross-Origin Resource) Partage).
  2. V�rifiez que la requ�te contient un en-t�te HTTP Sec-Fetch-Dest: webidentity.
  3. Faites correspondre l'en-t�te Origin avec l'origine de la RP d�termin�e par le client_id. Si ce n'est pas le cas, refusez-les.
  4. Faites correspondre account_id avec l'ID du compte d�j� connect�. Refuser si elles ne correspondent pas.
  5. R�pondre avec un jeton. Si la demande est rejet�e, r�pondez par un message d'erreur r�ponse.

La mani�re dont le jeton est �mis d�pend de l'IdP, mais en g�n�ral, il est sign� avec telles que l'ID de compte, l'ID client, l'origine de l'�metteur, nonce, afin que la RP peut v�rifier que le jeton est authentique.

Le navigateur attend une r�ponse JSON qui inclut la propri�t� suivante:

Propri�t� Description
token (obligatoire) Un jeton est une cha�ne qui contient des revendications concernant l'authentification.
{
  "token": "***********"
}

Le navigateur transmet le jeton renvoy� au tiers assujetti � des restrictions afin que celui-ci puisse valider l'authentification.

Renvoyer une r�ponse d'erreur

Le id_assertion_endpoint peut �galement renvoyer une "erreur" qui comporte deux champs facultatifs:

  • code: le fournisseur d'identit� peut choisir l'une des erreurs connues dans le protocole OAuth 2.0 erreur sp�cifi�e liste (invalid_request, unauthorized_client, access_denied, server_error et temporarily_unavailable) ou utiliser n'importe quelle cha�ne arbitraire. Dans ce dernier cas, Chrome affiche l'interface utilisateur d'erreur avec un message d'erreur g�n�rique et transmet le code au tiers assujetti � des restrictions.
  • url: identifie une page Web intelligible et contenant des informations sur la pour fournir aux utilisateurs des informations suppl�mentaires � son sujet. Ce champ est utile pour les utilisateurs, car les navigateurs ne peuvent pas afficher de messages d'erreur d�taill�s dans un une interface utilisateur native. Par exemple, des liens vers les �tapes suivantes, les coordonn�es du service client des informations, etc. Si un utilisateur souhaite en savoir plus sur les d�tails de l'erreur et comment y rem�dier, il peut consulter la page fournie � partir de l'interface utilisateur du navigateur pour plus de d�tails. L'URL doit correspondre au m�me site que l'IdP configURL.
// id_assertion_endpoint response
{
  "error" : {
     "code": "access_denied",
     "url" : "https://idp.example/error?type=access_denied"
  }
}

D�connecter le point de terminaison

En appelant IdentityCredential.disconnect(), le navigateur envoie une requ�te multi-origine Requ�te POST avec des cookies avec SameSite=None et un type de contenu de application/x-www-form-urlencoded � ce point de terminaison de d�connexion avec le les informations suivantes:

Propri�t� Description
account_hint Indice pour le compte IdP.
client_id Identifiant client du tiers assujetti � des restrictions.
POST /disconnect.php HTTP/1.1
Host: idp.example
Origin: rp.example
Content-Type: application/x-www-form-urlencoded
Cookie: 0x123
Sec-Fetch-Dest: webidentity

account_hint=account456&client_id=rp123

� la r�ception de la requ�te, le serveur doit:

  1. R�pondre � la requ�te avec CORS (Cross-Origin Resource) Partage).
  2. V�rifiez que la requ�te contient un en-t�te HTTP Sec-Fetch-Dest: webidentity.
  3. Faites correspondre l'en-t�te Origin avec l'origine de la RP d�termin�e par le client_id. Si ce n'est pas le cas, refusez-les.
  4. Faites correspondre account_hint avec les ID des comptes d�j� connect�s.
  5. D�connectez le compte utilisateur du tiers assujetti � des restrictions.
  6. R�pondre au navigateur avec les informations de compte utilisateur identifi�es dans un fichier JSON .

Voici un exemple de charge utile JSON de r�ponse:

{
  "account_id": "account456"
}

Si le fournisseur d'identit� souhaite que le navigateur d�connecte tous les comptes associ�s � le tiers assujetti � des restrictions, transmettez une cha�ne qui ne correspond � aucun ID de compte, par exemple "*".

URL de connexion

Avec l'API Login Status, le fournisseur d'identit� doit informer l'utilisateur l'�tat de connexion au navigateur. Il se peut toutefois que l'�tat ne soit pas synchronis�, par exemple Lorsque la session expire. Dans un tel sc�nario, le le navigateur peut permettre � l'utilisateur de se connecter � l'IdP de fa�on dynamique via la page de connexion URL sp�cifi�e avec la valeur login_url du fichier de configuration idp.

La bo�te de dialogue FedCM affiche un message sugg�rant de se connecter, comme illustr� dans le l'image suivante.

<ph type="x-smartling-placeholder">
</ph> A
Bo�te de dialogue FedCM sugg�rant de se connecter � l'IdP.

Lorsque l'utilisateur clique sur le bouton Continuer, le navigateur ouvre une fen�tre pop-up. pour la page de connexion de l'IdP.

<ph type="x-smartling-placeholder">
</ph> Une
Exemple de bo�te de dialogue qui s'affiche lorsque l'utilisateur clique sur le bouton de connexion au fournisseur d'identit�

La bo�te de dialogue est une fen�tre de navigateur standard contenant des cookies propri�taires. Peu importe se produit dans la bo�te de dialogue d�pend de l'IdP, et aucun traitement de fen�tre n'est disponible pour envoyer une demande de communication multi-origines � la page du tiers assujetti � des restrictions. Une fois que l'utilisateur connect�, le fournisseur d'identit� doit:

  • Envoyez l'en-t�te Set-Login: logged-in ou appelez la m�thode navigator.login.setStatus("logged-in") pour informer le navigateur que utilisateur a �t� connect�.
  • Appelez IdentityProvider.close() pour fermer la bo�te de dialogue.
<ph type="x-smartling-placeholder">
</ph> A
Un utilisateur se connecte � un tiers assujetti � des restrictions apr�s s'�tre connect� � l'IdP via FedCM.

Informer le navigateur de l'�tat de connexion de l'utilisateur aupr�s du fournisseur d'identit�

L'API Login Status est un m�canisme Lorsqu'un site Web, en particulier un fournisseur d'identit�, informe le navigateur de l'�tat de connexion de l'utilisateur sur le fournisseur d'identit�. Gr�ce � cette API, le navigateur peut r�duire le nombre de requ�tes inutiles adress�es au IdP et r�duisez les potentielles attaques temporelles.

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� sur le fournisseur d'identit� ou lorsque le l'utilisateur est d�connect� de tous ses comptes IdP. Pour chaque IdP (identifi� par son URL de configuration), le navigateur conserve une variable � trois �tats repr�sentant l'�tat de connexion avec les valeurs possibles logged-in, logged-out et unknown. L'�tat par d�faut est unknown.

Pour signaler que l'utilisateur est connect�, envoyez un en-t�te HTTP Set-Login: logged-in. dans une navigation de premier niveau ou une requ�te de sous-ressource sur le m�me site au niveau de l'IdP origine:

Set-Login: logged-in

Vous pouvez �galement appeler l'API JavaScript navigator.login.setStatus("logged-in") depuis l'origine de l'IdP dans une navigation de premier niveau:

navigator.login.setStatus("logged-in")

Ces appels enregistrent l'�tat de connexion de l'utilisateur comme logged-in. Lorsque l'utilisateur se connecte si l'�tat est d�fini sur logged-in, la RP appelant FedCM envoie des requ�tes au fournisseur d'identit� le point de terminaison des comptes de service et affiche les comptes disponibles � l'utilisateur dans le .

Pour signaler que l'utilisateur est d�connect� de tous ses comptes, envoyez l'en-t�te HTTP Set-Login: logged-out dans une navigation de premier niveau ou une sous-ressource du m�me site � l'origine du fournisseur d'identit�:

Set-Login: logged-out

Vous pouvez �galement appeler l'API JavaScript navigator.login.setStatus("logged-out") depuis l'origine de l'IdP dans une navigation de premier niveau:

navigator.login.setStatus("logged-out")

Ces appels enregistrent l'�tat de connexion de l'utilisateur comme logged-out. Lorsque �tat de connexion est logged-out, l'appel � FedCM �choue automatiquement au point de terminaison des comptes du fournisseur d'identit�.

L'�tat unknown est d�fini avant que le fournisseur d'identit� n'envoie un signal via l'�tat de connexion API. Unknown a �t� introduit pour faciliter la transition, car un utilisateur peut avoir d�j� connect�s au fournisseur d'identit� lors de l'exp�dition de cette API. Il se peut que le fournisseur d'identit� ne dispose pas d'envoyer un message au navigateur au moment o� FedCM est appel� pour la premi�re fois. Dans ce Chrome envoie une requ�te au point de terminaison des comptes du fournisseur d'identit� et met � jour en fonction de la r�ponse du point de terminaison des comptes:

  • Si le point de terminaison renvoie la liste des comptes actifs, d�finissez l'�tat sur logged-in, puis 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 logged-out, puis �chouer � l'appel FedCM.
<ph type="x-smartling-placeholder">

Permettre � l'utilisateur de 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 susceptible d'�tre d�synchronis�, par exemple � l'expiration de la session. Le navigateur tente envoyez une requ�te avec identifiants au point de terminaison du compte lorsque l'�tat de connexion est logged-in, mais le serveur ne renvoie aucun compte, car la session n'est plus disponibles. Dans un tel sc�nario, le navigateur peut permettre � l'utilisateur de se connecter de mani�re dynamique. � l'IdP via une fen�tre pop-up.

<ph type="x-smartling-placeholder">

Se connecter au tiers de confiance avec le fournisseur d'identit�

Une fois la configuration et les points de terminaison du fournisseur d'identit� disponibles, les tiers assujettis � des restrictions peuvent appeler navigator.credentials.get() pour demander l'autorisation des utilisateurs � se connecter au tiers assujetti � des restrictions avec le fournisseur d'identit�.

Avant d'appeler l'API, vous devez v�rifier que [FedCM est disponible sur le navigateur de l'utilisateur]. Pour v�rifier si FedCM est disponible, entourez ce code Impl�mentation dans FedCM:

if ('IdentityCredential' in window) {
  // If the feature is available, take action
}

Pour demander � autoriser les utilisateurs � se connecter � l'IdP depuis le RP, proc�dez comme suit : Par exemple:

const credential = await navigator.credentials.get({
  identity: {
    providers: [{
      configURL: 'https://accounts.idp.example/config.json',
      clientId: '********',
      nonce: '******'
    }]
  }
});
const { token } = credential;

La propri�t� providers accepte un tableau de IdentityProvider d'objets comportant les propri�t�s suivantes:

Propri�t� Description
configURL (obligatoire) Chemin d'acc�s complet au fichier de configuration de l'IdP.
clientId (obligatoire) Identifiant client de la RP, �mis par le fournisseur d'identit�.
nonce (facultatif) Cha�ne al�atoire garantissant l'�mission de la r�ponse pour cette demande sp�cifique. Emp�che les attaques par rejeu.
loginHint (facultatif) En sp�cifiant l'une des valeurs login_hints fournies par les points de terminaison des comptes, le gestionnaire affiche de mani�re s�lective le compte sp�cifi�.
domainHint (facultatif) En sp�cifiant l'une des valeurs domain_hints fournies par les points de terminaison des comptes, le gestionnaire la bo�te de dialogue affiche de mani�re s�lective le compte sp�cifi�.

Le navigateur g�re les cas d'utilisation des processus d'inscription et de connexion diff�remment selon les Pr�sence de approved_clients dans la r�ponse de la liste des comptes point de terminaison. Le navigateur n'affichera pas de communiqu� Envoyez "Pour continuer avec..." si l'utilisateur s'est d�j� inscrit au tiers assujetti � des restrictions.

L'�tat d'inscription est d�termin� si les conditions suivantes sont satisfaites ou non:

  • Si approved_clients inclut le clientId du tiers assujetti � des restrictions.
  • Si le navigateur se souvient que l'utilisateur s'est d�j� inscrit au tiers assujetti � des restrictions.
<ph type="x-smartling-placeholder">
</ph>
Un utilisateur se connecte � un tiers assujetti � des restrictions � l'aide de FedCM.

Lorsque le tiers assujetti � des restrictions appelle navigator.credentials.get(), les activit�s suivantes prennent lieu:

  1. Le navigateur envoie des requ�tes et r�cup�re plusieurs documents: <ph type="x-smartling-placeholder">
      </ph>
    1. Le fichier well-known et une configuration d'IdP qui d�clare les points de terminaison.
    2. Une liste de comptes :
    3. Facultatif: URL des r�gles de confidentialit� et des conditions d'utilisation du tiers assujetti � des restrictions r�cup�r� � partir du point de terminaison des m�tadonn�es du client.
  2. Le navigateur affiche la liste des comptes que l'utilisateur peut utiliser pour se connecter, ainsi que les conditions d'utilisation et les r�gles de confidentialit�, le cas �ch�ant.
  3. Une fois que l'utilisateur a choisi un compte avec lequel se connecter, une demande point de terminaison d'assertion est envoy� � l'IdP pour r�cup�rer � partir d'un jeton d'acc�s.
  4. La RP peut valider le jeton pour authentifier l'utilisateur.
<ph type="x-smartling-placeholder">
</ph> appel d&#39;API login
appel d'API login

Les tiers assujettis � des restrictions doivent prendre en charge les navigateurs qui ne sont pas compatibles avec FedCM. Par cons�quent, les utilisateurs doivent pouvoir se connecter � l'aide d'une proc�dure de connexion non FedCM existante. Jusqu'au les cookies tiers sont compl�tement abandonn�s, sans probl�me.

Une fois le jeton valid� par le serveur de la RP, celle-ci peut enregistrer l'utilisateur ou permettez-lui de se connecter et de d�marrer une nouvelle session.

API Login Hint

Une fois l'utilisateur connect�, il arrive que le tiers de confiance lui demande de s'authentifier � nouveau. Toutefois, l'utilisateur ne sait peut-�tre pas avec certitude quel compte il a utilis�. Si le tiers assujetti � des restrictions peut sp�cifier le compte avec lequel se connecter, il est plus facile pour le de choisir un compte.

Les tiers assujettis � des restrictions peuvent s�lectionner un compte sp�cifique en appelant navigator.credentials.get() avec la propri�t� loginHint avec l'une des valeurs suivantes : Valeurs login_hints extraites de la liste des comptes point de terminaison, comme illustr� dans l'exemple de code suivant:

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

Si aucun compte ne correspond � l'loginHint, la bo�te de dialogue FedCM affiche une invite de connexion, qui permet � l'utilisateur de se connecter � un compte d'IdP correspondant � l'indice demand� par le tiers assujetti � des restrictions. Lorsque l'utilisateur appuie sur l'invite, une fen�tre pop-up s'ouvre avec l'option l'URL de connexion sp�cifi�e dans le fichier de configuration. Le lien est alors avec l'indice de connexion et les param�tres de requ�te de l'optimisation du domaine.

API Domain Hint

Dans certains cas, le tiers assujetti � des restrictions sait d�j� que seuls les comptes associ�s � certains domaines sont autoris�s � se connecter au site. Cela est particuli�rement courant dans sc�narios d'entreprise o� l'acc�s au site est restreint � une entreprise domaine. Afin d'am�liorer l'exp�rience utilisateur, l'API FedCM autorise uniquement les tiers assujettis � des restrictions indiquent les comptes qui peuvent �tre utilis�s pour se connecter au tiers assujetti � des restrictions. Cela permet d'�viter les sc�narios Lorsqu'un utilisateur tente de se connecter au tiers assujetti � des restrictions � l'aide d'un compte ext�rieur � l'entreprise domaine, pour �tre diffus� ult�rieurement avec un message d'erreur (ou �tre mis sous silence en cas de connexion n'a pas fonctionn�), car vous n'avez pas utilis� le bon type de compte.

Les tiers assujettis � des restrictions peuvent afficher de mani�re s�lective uniquement les comptes correspondants en appelant navigator.credentials.get() avec la propri�t� domainHint avec l'une des valeurs suivantes : Valeurs domain_hints extraites de la liste des comptes point de terminaison, comme illustr� dans l'exemple de code suivant:

return await navigator.credentials.get({
  identity: {
    providers: [{
      configURL: "https://idp.example/manifest.json",
      clientId: "abc",
      nonce: nonce,
      domainHint : "corp.example"
    }]
  }
});
<ph type="x-smartling-placeholder">

Si aucun compte ne correspond à l'domainHint, la boîte de dialogue FedCM affiche une invite de connexion, qui permet à l'utilisateur de se connecter à un compte d'IdP correspondant à l'indice demandé par le tiers assujetti à des restrictions. Lorsque l'utilisateur appuie sur l'invite, une fenêtre pop-up s'ouvre avec l'option l'URL de connexion spécifiée dans le fichier de configuration. Le lien est alors avec l'indice de connexion et les paramètres de requête de l'optimisation du domaine.

<ph type="x-smartling-placeholder">
</ph> Exemple d&#39;invite de connexion lorsqu&#39;aucun compte ne correspond à domainHint.
Exemple d'invite de connexion lorsqu'aucun compte ne correspond à domainHint.

Afficher un message d'erreur

Parfois, l'IdP peut ne pas être en mesure d'émettre un jeton pour des raisons légitimes, telles que comme lorsque le client n'est pas autorisé, le serveur est temporairement indisponible. Si l'IdP renvoie une erreur le tiers assujetti à des restrictions peut l'intercepter, et Chrome avertit l'utilisateur en affichant une interface de navigateur avec les informations d'erreur fournies par le fournisseur d'identité.

<ph type="x-smartling-placeholder">
</ph> A
Boîte de dialogue FedCM affichant le message d'erreur après l'échec de la tentative de connexion de l'utilisateur. La chaîne est associée au type d'erreur.
try {
  const cred = await navigator.credentials.get({
    identity: {
      providers: [
        {
          configURL: "https://idp.example/manifest.json",
          clientId: "1234",
        },
      ],
    }
  });
} catch (e) {
  const code = e.code;
  const url = e.url;
}

Réauthentifier automatiquement les utilisateurs après l'authentification initiale

Réauthentification automatique FedCM ("réauthentification automatique") peuvent permettre aux utilisateurs de se réauthentifier automatiquement lorsqu'ils revenir après leur authentification initiale à l’aide de FedCM. « Le début "Authentification unique" que l'utilisateur crée un compte ou se connecte site Web en appuyant sur le bouton Continuer en tant que dans la boîte de dialogue de connexion de FedCM pour la première fois sur la même instance de navigateur.

Si l'expérience utilisateur explicite a du sens avant que l'utilisateur ait créé la fédéré pour empêcher le suivi (qui est l'un des principaux objectifs de FedCM), elle devient inutilement fastidieuse après que l'utilisateur l'a passée une fois: après l'utilisateur accorde l'autorisation d'autoriser la communication entre le RP et le IdP, il n'y a aucun avantage en termes de confidentialité ou de sécurité à appliquer l'autorisation d'un autre utilisateur explicite une confirmation pour quelque chose qu’il a déjà confirmé.

Avec la réauthentification automatique, le navigateur change de comportement en fonction de l'option que vous spécifiez pour mediation lorsque vous appelez navigator.credentials.get().

const cred = await navigator.credentials.get({
  identity: {
    providers: [{
      configURL: "https://idp.example/fedcm.json",
      clientId: "1234",
    }],
  },
  mediation: 'optional', // this is the default
});

// `isAutoSelected` is `true` if auto-reauthn was performed.
const isAutoSelected = cred.isAutoSelected;

mediation est une propriété de la page Gestion des identifiants l'API, son comportement est le même de manière que pour PasswordCredential et FederatedCredential et il est partiellement pris en charge par PublicKeyCredential . La propriété accepte les quatre valeurs suivantes:

  • 'optional'(par défaut): réauthentification automatique si possible. Une médiation est requise dans le cas contraire. Mer nous vous recommandons de choisir cette option sur la page de connexion.
  • 'required': une médiation est toujours nécessaire pour pouvoir continuer, par exemple en cliquant sur le bouton "Continuer" de l'interface utilisateur. Choisissez cette option si vos utilisateurs sont censés accorder explicitement l'autorisation chaque fois qu'ils doivent être authentifiés.
  • 'silent': réauthentification automatique si possible, échec silencieux sans nécessiter de si ce n'est pas le cas. Nous vous recommandons de choisir cette option sur les pages autres que la page de connexion d�di�e, mais sur laquelle vous souhaitez que les utilisateurs restent connect�s, Il peut s'agir, par exemple, d'une page d'article sur un site Web de livraison ou d'une page d'article sur un site d'actualit�s. sur votre site Web.
  • 'conditional': utilis� pour WebAuthn et non disponible pour FedCM pour le moment.

Avec cet appel, la r�authentification automatique s'effectue dans les conditions suivantes:

  • FedCM est disponible. Par exemple, l'utilisateur n'a pas d�sactiv� FedCM. soit de mani�re globale, soit pour le tiers assujetti � des restrictions dans les param�tres.
  • L'utilisateur n'a utilis� qu'un seul compte avec l'API FedCM pour se connecter au site Web sur ce navigateur.
  • L'utilisateur est connect� au fournisseur d'identit� avec ce compte.
  • La r�authentification automatique ne s'est pas produite au cours des 10 derni�res minutes.
  • Le tiers assujetti � des restrictions n'a pas appel� Puis navigator.credentials.preventSilentAccess() la pr�c�dente connexion.

Lorsque ces conditions sont remplies, une tentative de r�authentification automatique L'utilisateur d�marre d�s que l'navigator.credentials.get() FedCM est appel�.

Si la valeur est mediation: optional, la r�authentification automatique peut �tre non disponible pour les raisons suivantes : seul le navigateur conna�t ; le tiers assujetti � des restrictions peut v�rifier si en examinant la propri�t� isAutoSelected.

Cela permet d'�valuer les performances de l'API et d'am�liorer l'exp�rience utilisateur en cons�quence. De plus, lorsqu'il est indisponible, l'utilisateur peut �tre invit� � se connecter avec la m�diation des utilisateurs, qui est un flux avec mediation: required.

<ph type="x-smartling-placeholder">
</ph>
Un utilisateur se r�authentifie automatiquement via FedCM.

Appliquer la m�diation avec preventSilentAccess()

La r�authentification automatique des utilisateurs imm�diatement apr�s leur d�connexion n'est pas tr�s bonne exp�rience utilisateur. C'est pourquoi FedCM dispose d'une p�riode silencieuse de 10 minutes apr�s une r�authentification automatique pour �viter ce comportement. La r�authentification automatique a donc lieu au maximum toutes les 10 minutes, sauf si l'utilisateur se reconnecte sous 10 minutes. Le tiers assujetti � des restrictions doit appeler navigator.credentials.preventSilentAccess() pour demander explicitement au navigateur de d�sactiver la r�authentification automatique lorsqu'un utilisateur se d�connecte le tiers assujetti � des restrictions explicitement, par exemple en cliquant sur un bouton de d�connexion.

function signout() {
  navigator.credentials.preventSilentAccess();
  location.href = '/signout';
}

Les utilisateurs peuvent d�sactiver la r�authentification automatique dans les param�tres

Les utilisateurs peuvent d�sactiver la r�authentification automatique dans le menu des param�tres:

  • Dans Chrome pour ordinateur, acc�dez � chrome://password-manager/settings > Se connecter automatiquement.
  • Dans Chrome pour Android, acc�dez � Param�tres > Gestionnaire de mots de passe > Appuyez sur un roue dent�e en haut � droite > Connexion automatique.

En d�sactivant l'option, l'utilisateur peut d�sactiver la r�authentification automatique ensemble. Ce param�tre est stock� et synchronis� sur tous les appareils, si l'utilisateur connect� � un compte Google sur l'instance Chrome, et la synchronisation est est activ�.

D�connecter l'IdP du tiers assujetti � des restrictions

Si un utilisateur s'est d�j� connect� au tiers assujetti � des restrictions � l'aide du fournisseur d'identit� via FedCM, le relation est m�moris�e par le navigateur localement comme la liste des Google Cloud. Le tiers assujetti � des restrictions peut d�clencher une d�connexion en appelant la m�thode fonction IdentityCredential.disconnect(). Cette fonction peut �tre appel�e � partir d'un cadre RP de premier niveau. Le tiers assujetti � des restrictions doit transmettre un configURL, le clientId qu'il utilise sous le fournisseur d'identit� et un accountHint pour que celui-ci soit d�connect�. Un compte L'indice peut �tre une cha�ne arbitraire tant que le point de terminaison de d�connexion peut identifier le compte, par exemple une adresse e-mail ou un ID utilisateur qui n'est pas n�cessairement correspondent � l'ID de compte fourni par le point de terminaison de la liste de comptes:

// Disconnect an IdP account "account456" from the RP "https://idp.com/". This is invoked on the RP domain.
IdentityCredential.disconnect({
  configURL: "https://idp.com/config.json",
  clientId: "rp123",
  accountHint: "account456"
});

IdentityCredential.disconnect() renvoie un Promise. Cette promesse peut g�n�rer pour les raisons suivantes:

  • L'utilisateur ne s'est pas connect� au tiers assujetti � des restrictions � l'aide du fournisseur d'identit� via FedCM.
  • L'API est appel�e depuis un iFrame sans r�gle d'autorisation FedCM.
  • La configURL n'est pas valide ou ne contient pas de point de terminaison de d�connexion.
  • �chec de la v�rification de la CSP (Content Security Policy).
  • Une demande de dissociation est en attente.
  • L'utilisateur a d�sactiv� FedCM dans les param�tres du navigateur.

Lorsque le point de terminaison de d�connexion du IdP renvoie une , le RP et l'IdP sont d�connect�s sur le navigateur et la promesse est faite. L'ID des comptes dissoci�s est sp�cifi� dans la r�ponse de la d�connexion, point de terminaison unique.

Appeler FedCM depuis un iFrame d'origine diff�rente

FedCM peut �tre appel� depuis un iFrame multi-origine � l'aide d'un R�gle d'autorisation identity-credentials-get, si le cadre parent le permet. � ajoutez l'attribut allow="identity-credentials-get" au tag iFrame. comme suit:

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

Pour le voir en action, consultez un exemple.

Si le frame parent veut limiter les origines � l'appel de FedCM, envoyez un en-t�te Permissions-Policy avec une liste d'origines autoris�es.

Permissions-Policy: identity-credentials-get=(self "https://fedcm-cross-origin-iframe.glitch.me")

Pour en savoir plus sur le fonctionnement de cette r�gle, consultez la page Contr�ler fonctionnalit�s de navigateur avec autorisations R�glement.