如何检测浏览器是否支持webauthn

Question

目前只有有限数量的设备支持 Webauthn https://caniuse.com/#search=webauthn。

在 JavaScript 中，我希望能够在向用户提供登录或加入表单之前检测用户浏览器是否支持。

检查 navigator.credentials 似乎有效，但这是检查此支持的正确方法吗？

if(!navigator.credentials) {
  alert('fail');
}

Answer 1

通过检查 navigator.credentials you're checking that the browser supports Credentials Management API，这不仅仅是 WebAuthn。

凭据管理 API 目前支持 3 种类型的凭据，FederatedCredential, PasswordCredential and PublicKeyCredential。

WebAuthn 建立在 PublicKeyCredential 界面之上。参见 https://www.w3.org/TR/webauthn/#iface-pkcredential。

所以你需要的是：

 if (typeof(PublicKeyCredential) == "undefined") {
   alert('fail');
 }

这就是为什么当您要求浏览器创建 "WebAuthn credential" 时，您需要指定 public 键类型：navigator.credentials.create({ "publicKey": { ... } })，请参阅 https://developer.mozilla.org/en-US/docs/Web/API/CredentialsContainer/create#Parameters。

How to detect if the browser has support for webauthn