Essai Origin : médiation immédiate WebAuthn pour une connexion fluide

José Luis Zapata

Publié le : 19 août 2025

La médiation immédiate WebAuthn est une nouvelle fonctionnalité Web conçue pour simplifier les processus de connexion des utilisateurs. Cet essai d'origine présente la fonctionnalité, ses avantages et les détails de son implémentation. Il vous invite à participer et à contribuer à façonner l'avenir de l'authentification Web.

Arrière-plan

L'authentification sur le Web introduit souvent des frictions, ce qui complique la connexion des utilisateurs. Les flux WebAuthn existants, bien que puissants, ont du mal à gérer les boutons "Se connecter", en particulier lorsque les identifiants ne sont pas immédiatement disponibles, ce qui entraîne des retours aux formulaires standards.

Cette nouvelle fonctionnalité introduit un processus de connexion simple, semblable aux API preferImmediatelyAvailableCredentials sur mobile. Elle simplifie la connexion, souvent avant les formulaires de connexion standards, en réduisant les frictions et en améliorant l'expérience utilisateur.

Fonctionnement

La médiation immédiate WebAuthn permet une expérience de connexion plus directe et efficace. Il permet au navigateur de proposer instantanément les identifiants disponibles ou de signaler immédiatement leur absence sans demander d'authentification multi-appareil ou par clé de sécurité, ce qui simplifie l'implémentation pour les développeurs.

Type de médiation immediate

Nous introduisons un type de médiation immediate pour les demandes navigator.credentials.get(). Lorsque cette option est définie, la promesse est rejetée avec NotAllowedError si aucun identifiant disponible localement n'est trouvé. Si des identifiants sont présents, le navigateur gère le processus d'authentification normalement.

Cette flexibilité permet aux sites d'adapter leur parcours de connexion et de proposer des méthodes alternatives lorsque les identifiants immédiats ne sont pas disponibles.

Il est important de noter que les navigateurs peuvent toujours renvoyer NotAllowedError pour préserver la confidentialité et la sécurité des utilisateurs, et éviter les problèmes tels que l'empreinte numérique ou le suivi.

Détection de caractéristiques

Vous pouvez détecter si la médiation immédiate est disponible à l'aide de PublicKeyCredential.getClientCapabilities(). Les développeurs peuvent rechercher la fonctionnalité immediateGet dans l'objet capabilities renvoyé.

async function checkImmediateMediationAvailability() {
  try {
    const capabilities = await PublicKeyCredential.getClientCapabilities();
    if (capabilities.immediateGet && window.PasswordCredential) {
      console.log("Immediate Mediation with passwords supported.");
    } else if (capabilities.immediateGet) {
      console.log("Immediate Mediation without passwords supported.");
    } else { console.log("Immediate Mediation unsupported."); }
  } catch (error) {
    console.error("Error getting client capabilities:", error);
  }
}

Remarque : Pour une compatibilité plus large avec les navigateurs, un polyfill pour getClientCapabilities() est disponible dans le dépôt GitHub WebAuthn Polyfills.

Exemple d'implémentation

Pour utiliser l'API, appelez navigator.credentials.get() avec mediation: 'immediate'. Nous vous recommandons d'inclure password: true dans la requête, car la plupart des utilisateurs ont probablement un mot de passe enregistré aujourd'hui et peuvent immédiatement bénéficier de cette expérience.

button.addEventListener('click', async (event) => {
  event.preventDefault();
  event.stopPropagation();
  const cred = await navigator.credentials.get({
    password: true,
    publicKey: {
      challenge, // Your server-generated challenge
      rpId: 'example.com' // Your Relying Party ID
    },
    mediation: 'immediate',
  });
});

Les développeurs doivent gérer NotAllowedError dans un bloc catch pour offrir une expérience de connexion de remplacement fluide.

Flux par étapes pour la médiation immédiate

La médiation immédiate WebAuthn prend en charge deux cas d'utilisation principaux pour simplifier la connexion des utilisateurs : l'activation d'un bouton dédié "Se connecter avec une clé d'accès" qui supprime les options de secours indésirables, et la facilitation d'un flux de connexion dynamique qui propose des identifiants de manière proactive avant une action critique pour l'utilisateur.

Cas d'utilisation 1 : Connexion explicite avec le bouton de connexion

Ce scénario se concentre sur la fourniture d'un bouton de connexion dédié, garantissant une expérience utilisateur claire sans invites inattendues ni passage par une page de connexion.

1. L'utilisateur lance la connexion : l'utilisateur clique sur un bouton "Se connecter". La partie de confiance appelle ensuite navigator.credentials.get() avec mediation: "immediate".
2. Invites du navigateur pour la sélection des identifiants (le cas échéant) : le navigateur recherche les clés d'accès ou les mots de passe demandés disponibles localement. Si des comptes sont trouvés, une UI modale s'affiche immédiatement pour permettre à l'utilisateur d'en choisir un. Les comptes sont classés par ordre chronologique de dernière utilisation, puis par ordre alphabétique. Remarque : Si des mots de passe et des clés d'accès provenant de plusieurs gestionnaires de mots de passe sont trouvés pour le même compte, le navigateur donne la priorité aux clés d'accès. Lorsqu'il existe plusieurs clés d'accès pour le même compte provenant de différents fournisseurs, la dernière clé d'accès utilisée est prioritaire.
3. Connexion réussie : l'utilisateur sélectionne la clé d'accès dans l'interface utilisateur du navigateur. Si le navigateur exige une validation, il invite l'utilisateur à valider son identité à l'aide de la méthode qu'il a configurée précédemment (par exemple, un code, une saisie biométrique ou un schéma). La connexion est établie.
4. Chemin de repli : pas de clé d'accès ni d'annulation par l'utilisateur : si aucune clé d'accès locale ni aucun mot de passe demandé n'est disponible pour le site, ou si l'utilisateur ferme l'UI du navigateur, le navigateur génère une NotAllowedError pour la partie de confiance et n'affiche aucune UI pour les options inter-appareils ou de clé de sécurité. La partie de confiance peut ensuite poursuivre avec sa page de connexion standard ou proposer d'autres mécanismes d'authentification.

Cas d'utilisation 2 : Flux de connexion implicite avant une action de l'utilisateur

Ce scénario permet une expérience de connexion proactive, offrant des clés d'accès et des mots de passe avant qu'un utilisateur n'effectue une action nécessitant un état authentifié, comme le paiement.

1. L'utilisateur lance une action nécessitant une connexion : l'utilisateur clique sur un bouton pour une action qui nécessite qu'il soit connecté (par exemple, un bouton "Payer"). La partie de confiance appelle ensuite navigator.credentials.get() avec mediation: "immediate".

2. Invites du navigateur pour la sélection des identifiants (si disponibles) : le navigateur recherche les clés d'accès ou les mots de passe disponibles localement. S'il les trouve, il présente immédiatement une interface utilisateur modale permettant à l'utilisateur de choisir un compte. Les comptes sont classés par date et heure de dernière utilisation, puis par ordre alphabétique. Les doublons sont supprimés pour n'afficher qu'une seule entrée par compte. Remarque : Lorsque des mots de passe et des clés d'accès provenant de plusieurs gestionnaires de mots de passe sont trouvés pour le même compte, le navigateur donne la priorité aux clés d'accès. Lorsqu'il existe plusieurs clés d'accès pour le même compte provenant de différents fournisseurs, la dernière clé d'accès utilisée est prioritaire.

3. Connexion réussie : l'utilisateur sélectionne un identifiant dans l'UI du navigateur. Si le navigateur exige une validation, il invite l'utilisateur à valider son identité à l'aide de la méthode qu'il a configurée précédemment (code, saisie biométrique ou schéma, par exemple). La connexion est établie.

4. Chemin de secours : pas d'identifiants ou refus de l'utilisateur : si aucun identifiant local n'est disponible pour le site ou si l'utilisateur ferme l'interface utilisateur du navigateur, le navigateur génère une NotAllowedError pour la partie de confiance et n'affiche aucune interface utilisateur. L'expérience de connexion de l'utilisateur reste inchangée. La partie de confiance peut ensuite demander à l'utilisateur plus de détails (par exemple, son adresse e-mail) ou afficher d'autres mécanismes d'authentification tels qu'un formulaire de mot de passe, une validation par SMS ou une demande modale WebAuthn qui prend en charge les authentificateurs multi-appareils.

Avantages

La médiation immédiate WebAuthn offre plusieurs avantages clés aux développeurs et aux utilisateurs :

• Connexion fluide : elle offre une expérience de connexion plus fluide et plus simple aux utilisateurs qui disposent immédiatement de clés d'accès ou de mots de passe enregistrés dans leur navigateur ou leur gestionnaire de mots de passe.
• Connexion intelligente : l'API permet un flux de connexion lorsque l'utilisateur souhaite effectuer des activités qui nécessitent qu'il soit connecté. Elles s'adaptent intelligemment à l'état des identifiants de l'utilisateur. Il offre une authentification immédiate lorsque cela est possible, ce qui évite les redirections inutiles et simplifie le flux.
• Gestion améliorée des identifiants : lorsque plusieurs gestionnaires de mots de passe proposent des identifiants pour le même compte, le navigateur sélectionne intelligemment l'option la plus appropriée, ce qui simplifie la gestion des identifiants pour les utilisateurs.
• Moins de confusion pour les utilisateurs : en présentant directement les identifiants connus, la fonctionnalité minimise la confusion des utilisateurs souvent associée à plusieurs options de connexion ou à des formulaires standards.
• Retour fluide : il garantit un retour fluide aux pages de connexion standards pour les utilisateurs sans identifiants immédiats, ce qui signifie que leur expérience reste inchangée par rapport aux flux actuels.

Confidentialité et sécurité

La médiation immédiate WebAuthn permet aux sites d'identifier la présence d'identifiants immédiatement disponibles avant qu'un utilisateur n'autorise explicitement une tentative de connexion. Pour protéger la confidentialité des utilisateurs et éviter toute utilisation abusive potentielle, nous mettons en place plusieurs mesures essentielles :

• Nécessité d'un geste de l'utilisateur : l'appel d'API nécessite un geste de l'utilisateur (toute activation temporaire de l'utilisateur). Cela rend difficile l'analyse silencieuse et l'empreinte numérique pour les sites.
• Sessions privées et de navigation privée : dans les sessions privées ou de navigation privée, toute demande de médiation immédiate génère NotAllowedError.
• Restrictions concernant les listes allowCredentials : les requêtes utilisant les listes allowCredentials génèrent NotAllowedError. Cela empêche les sites d'inférer l'historique des interactions des utilisateurs ou de les suivre d'une session à l'autre.
• Annulation : il n'est pas possible de définir le paramètre signal sur une requête avec médiation immédiate. Cela empêche les sites de fermer par programmation toute interface utilisateur du navigateur.

Essayer

Nous vous encourageons à tester la médiation immédiate WebAuthn.

État dans Chrome

Cette fonctionnalité progresse dans le cycle de développement Chromium :

• Ordinateur : essai en développement dans Chrome 136, avec une phase d'évaluation des origines de Chrome 139 à 141.
• Android : version d'essai pour les développeurs dans Chrome 140.

Pour les tests locaux

Pour tester la médiation immédiate WebAuthn en local :

1. Téléchargez Chrome 139 : obtenez et ouvrez la dernière version de Chrome sur votre ordinateur.
2. Activez l'indicateur de médiation immédiate : accédez à chrome://flags/#web-authentication-immediate-get dans la barre d'adresse et activez l'indicateur "Web Authentication Immediate Get".
3. Préparez vos identifiants : assurez-vous d'avoir des clés d'accès et des mots de passe utilisables enregistrés :
   • Mots de passe enregistrés dans le Gestionnaire de mots de passe de Google.
   • Clés d'accès enregistrées dans le Gestionnaire de mots de passe de Google (nécessite de se connecter et de synchroniser Chrome avec un compte Google), Windows Hello ou le trousseau iCloud.

Pour les tests publics (essai Origin Trial)

Pour tester la médiation immédiate WebAuthn avec l'essai Origin Trial dans un environnement public :

1. Inscrivez-vous : accédez à la page Chrome Origin Trials et inscrivez-vous à l'essai "WebAuthn immediate mediation".
2. Ajoutez le jeton aux en-têtes HTTP : incluez le jeton d'évaluation de l'origine fourni dans les en-têtes HTTP de votre site : HTML Origin-Trial: [YOUR_TRIAL_TOKEN]

Remarque : Vous pouvez également fournir vos jetons de manière programmatique avec JavaScript.

Scénarios de test

Nous fournissons une implémentation de référence et vous encourageons à créer votre propre prototype pour tester différents scénarios.

• Démonstration de référence : vous pouvez essayer l'implémentation de référence sur https://deephand.github.io/webauthn-immediate-demo/.
  • Implémenter un prototype : lorsque vous implémentez un prototype sur votre site, assurez-vous d'effectuer l'appel navigator.credentials.get() avec mediation: 'immediate' après un clic de l'utilisateur (par exemple, sur un bouton "Se connecter" ou sur toute interaction nécessitant que l'utilisateur soit connecté).
• Flux 1 : Se connecter sans mot de passe ni clé d'accès : si vous n'avez aucune clé d'accès ni aucun mot de passe disponible pour le site, le fait de cliquer sur "Se connecter" vous redirige directement vers votre page de connexion standard, sans qu'aucune interface utilisateur du navigateur ne s'affiche.
• Flux 2 : Se connecter avec une clé d'accès locale immédiatement disponible : si vous avez enregistré une clé d'accès pour le site, le fait de cliquer sur "Se connecter" devrait déclencher l'UI de médiation immédiate, qui propose la clé d'accès à sélectionner.
• Flux 3 : Se connecter avec une clé d'accès ou un mot de passe local : si vous avez enregistré à la fois des clés d'accès et des mots de passe, activez l'option "Demander un mot de passe" (en définissant password: true dans votre code). En cliquant sur "Se connecter", les options de clé d'accès et de mot de passe devraient s'afficher dans l'UI de médiation immédiate.