Publié le 15 juillet 2026
Bien que les clés d'accès soient simples à implémenter, leurs fonctionnalités et leurs bonnes pratiques continuent d'évoluer. Il faut du temps pour comprendre pourquoi elles sont nécessaires et comment les utiliser. Pour simplifier ce processus, l'équipe Chrome présente les compétences de clé d'accès Modern Web Guidance afin de vous aider, vous et vos agents, à créer des expériences de connexion modernes et sécurisées à l'aide de clés d'accès.
Pourquoi utiliser les compétences de clé d'accès ?
Modern Web Guidance est un ensemble de compétences conçu pour guider les agents de codage IA, tels qu'Anti Gravity ou Claude Code. Grâce aux compétences de clé d'accès, vous pouvez implémenter l'enregistrement, l'authentification, la gestion et la réauthentification à l'aide des dernières API et des bonnes pratiques. L'agent de codage génère de manière autonome l'implémentation pour l'interface utilisateur frontend et la logique backend.
Une évaluation montre qu'une implémentation utilisant les compétences de clé d'accès est plus performante qu'une implémentation sans ces compétences sur Claude Code Opus 4.8. Cette évaluation utilise l'application de démonstration et les invites décrites dans ce document.
| Sans compétences de clé d'accès | Avec compétences de clé d'accès | |
|---|---|---|
| PASS | 47 | 80 |
| ÉCHEC | 32 | 0 |
| N/A | 12 | 11 |
| Total | 91 | 91 |
La différence la plus visible est l'écran de gestion des clés d'accès, qui affiche une liste des clés d'accès créées en fonction d'une liste de fournisseurs de clés d'accès organisée par la communauté, conformément aux bonnes pratiques de gestion des clés d'accès.
Les compétences de clé d'accès offrent également à votre agent de codage des fonctionnalités puissantes et moins visibles :
getClientCapabilities: effectuez une détection moderne des fonctionnalités.- Sérialisation JSON : sérialisez la charge utile encodée avec un seul appel JavaScript.
- Gestion des erreurs : affichez un message ou ignorez-le en fonction du type d'erreur.
- Médiation conditionnelle : permettez aux utilisateurs de se connecter directement à partir des suggestions de saisie automatique du navigateur.
- API Signal : synchronisez la liste des identifiants entre le fournisseur et votre serveur.
- Création conditionnelle : créez automatiquement une clé d'accès pour les utilisateurs qui se sont récemment connectés avec un mot de passe.
Étape 1 : Cloner le dépôt de démonstration
Essayez les compétences de clé d'accès avec le passkey skills demo projet. Clonez le dépôt :
git clone git@github.com:GoogleChromeLabs/passkey-skills-demo.git
Étape 2 : Installer Modern Web Guidance
Exécutez l'assistant de configuration interactif dans le répertoire de votre projet pour installer Modern Web Guidance :
npx modern-web-guidance@latest install
Cet assistant ajoute les fichiers nécessaires à la mise en page de votre projet, ce qui permet à votre agent IA de comprendre les exigences relatives aux clés d'accès.
Étape 3 : Utiliser des invites
Une fois l'installation terminée, utilisez ces invites pour créer vos fonctionnalités. Ces exemples couvrent les quatre cas d'utilisation couverts par la compétence de clé d'accès et sont spécifiquement conçus pour le projet de bac à sable.
Inscription
Permettez aux utilisateurs d'enregistrer une clé d'accès pour leur compte. Pour implémenter cette fonctionnalité, essayez l'invite suivante :
Implement passkey registration at /settings page under start directory
Exemple d'exécution de l'agent : l'agent génère ou modifie de manière autonome l' interface utilisateur frontend et la logique backend pour enregistrer une nouvelle clé d'accès.
Authentification
Permettez aux utilisateurs qui reviennent de se connecter rapidement à l'aide d'identifiants détectables, via des déclencheurs de boutons explicites ou des suggestions de saisie automatique du navigateur. Pour implémenter cette fonctionnalité, essayez l'invite suivante :
Implement passkey authentication at the top page under start directory
Exemple d'exécution de l'agent : l'agent gère la boucle de connexion et de validation de manière autonome sur la page de destination principale ou sur la route de connexion.
Gestion
Permettez aux utilisateurs d'afficher, de renommer et de supprimer leurs clés d'accès enregistrées tout en synchronisant les identifiants entre le serveur et les gestionnaires de mots de passe du navigateur. Pour implémenter cette fonctionnalité, essayez l'invite suivante :
Implement passkey management at /settings page under start directory
Exemple d'exécution de l'agent : l'agent crée des choix structurels permettant aux utilisateurs d' afficher, d'ajouter ou de révoquer des clés d'accès existantes.
Réauthentification
Vérifiez l'identité d'un utilisateur connecté à l'aide de ses clés d'accès existantes avant d'autoriser des actions sensibles telles que des modifications de sécurité ou des transferts financiers. Pour implémenter cette fonctionnalité, essayez l'invite suivante :
Implement passkey reauthentication at /reauth under start directory
Exemple d'exécution de l'agent : l'agent configure une sécurité renforcée pour les actions utilisateur sensibles.
/modern-web-guidance
Ou la commande suivante pour Codex :
$modern-web-guidance
Si vous n'êtes pas sûr de la procédure à suivre, consultez la documentation de votre agent ou demandez-lui comment appeler directement la compétence modern-web-guidance.
Intégrer le côté serveur
Bien que les agents de codage puissent générer du code de clé d'accès côté serveur, ils peuvent ne pas utiliser les dernières versions de la bibliothèque. Le dépôt de démonstration des compétences de clé d'accès inclut la
simplewebauthn compétence, qui est une compétence pour la bibliothèque côté serveur recommandée
pour JavaScript et TypeScript : SimpleWebAuthn.
Cette compétence complète le comportement de l'agent de codage.
Pour les autres langages de programmation côté serveur, Google recommande d'intégrer des clés d'accès à l'aide d'une bibliothèque de clés d'accès, FIDO2 ou WebAuthn spécifique à un langage, ainsi qu'une compétence permettant d'utiliser ses dernières API. Les auteurs de la bibliothèque écrivent leurs propres compétences afin que les agents de codage puissent toujours utiliser les dernières API.
Avis de non-responsabilité et commentaires
Modern Web Guidance et les compétences de clé d'accès sont en mode Aperçu. Ces compétences ont été développées et testées à l'aide du projet de démonstration des compétences de clé d'accès avec des agents tels qu'Antigravity et Claude Code. Bien qu'elles aient été testées sur d'autres bases de code, les compétences peuvent nécessiter des ajustements au-delà des exemples d'invites fournis. Vérifiez le code généré pour vous assurer qu'il répond à vos attentes et fournissez des invites supplémentaires si nécessaire.
L'équipe Chrome met à jour ces compétences et ajoute d'autres fonctionnalités d'identité et d'authentification à Modern Web Guidance au fil du temps. Si vous avez des commentaires ou des demandes de fonctionnalités, envoyez-les au modern-web-guidance-src.
Essayez-les dès maintenant pour simplifier l'adoption des clés d'accès.