如何在Javascript中判断设备是否可以使用Webauthn指纹登录？

Question

我为我的网站创建了 Webauthn 身份验证。现在我正在尝试创建一个良好的界面以获得最佳的用户体验。我的用户不是技术人员。

我对指纹验证选项感兴趣。通过 Yubico 2 或 Google Titan 密钥进行 webauthn 在我的用户中非常罕见。当用户使用电子邮件和密码登录时，我想显示一条消息，例如“您想为下次访问注册指纹吗？[立即注册]”。

我想向正确的用户显示该消息。那么，如何决定在哪些情况下显示该消息呢？

根据https://caniuse.com/#search=PublicKeyCredential，首先我可以使用这样的测试：

var support_webauthn = (typeof window['PublicKeyCredential'] !== "undefined")

这个测试确定浏览器是否支持公钥认证，但也通过测试不知道硬件是否有指纹传感器。

我知道 Android 设备允许 Webauthn 指纹身份验证（而不是 iPhone）。因此，除此之外我还可以检查操作系统是否是 Android isAndroid = /android/i.test(navigator.userAgent);

但在这种情况下，我无法向使用其他支持的设备的用户显示该消息 - 例如使用 Macbook pro（指纹传感器工作）。

我该如何处理这个问题？

Answer 1

简短的回答： WebAuthn 不允许您在创建凭证之前执行诸如预先探测 Authenticator 是否具有指纹传感器之类的操作。

但是，您可以使用PublicKeyCredential来检测用户是否具有内置身份验证器，例如 Windows Hello、TouchID、带有指纹传感器的 Android 设备（即使没有指纹传感器，屏幕锁定也可以提供等效的用户验证功能） PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable 。​ 因此，此函数返回一个布尔值，您可以使用 JavaScript 检查用户是否有内置身份验证器，如果经过处理，您将能够使用指纹传感器或屏幕锁定来注册用户，否则不会提示用户很简单。我个人从未看过 Android，但总的来说，这对于检测内置身份验证器很有用。

从 chrome 版本 77开始更新，您可以使用PublicKeyCredentialCreationOptions.extensions可选对象提供的扩展，开发人员可以通过在创建凭证扩展对象期间指定并将 UVM 布尔值设置为 true 来使用它。

extensions : {
    uvi: true,
    uvm: true
},

创建凭证后，客户端输出一个包含 3 个值的数组，其中包含有关如何验证用户的信息（例如指纹、密码、图案）和其他信息。但请记住，开发人员无法探测设备是否具有指纹传感器。请访问developer.mozilla.org了解更多说明。

然而，要使用 android 示例项目来玩 webAuthn 可以在这里找到：

https://fidoalliance.org/developer-tutorial-webauthn-web-fido2-android/ https://codelabs.developers.google.com/codelabs/webauthn-reauth/#0