Credential Management API 功能检测检查

Eiji Kitamura

摘要

WebAuthn 通过将基于公钥凭据的身份验证引入 Web 来帮助提高安全性，并且很快将在 Chrome、Firefox 和 Edge 中得到支持（使用更新后的规范）。 它添加了一种新的 Credential 对象，但可能会破坏使用 Credential Management API 且未对其使用的特定凭据类型进行功能检测的网站。

如果您目前正在执行此操作以进行特征检测

if (navigator.credentials && navigator.credentials.preventSilentAccess) {
    // use CM API
}

请改为执行以下操作

if (window.PasswordCredential || window.FederatedCredential) {
    // Call navigator.credentials.get() to retrieve stored
    // PasswordCredentials or FederatedCredentials.
}

if (window.PasswordCredential) {
    // Get/Store PasswordCredential
}

if (window.FederatedCredential) {
    // Get/Store FederatedCredential
}

if (navigator.credentials && navigator.credentials.preventSilentAccess) {
    // Call navigator.credentials.preventSilentAccess()
}

如需查看示例，请参阅对示例代码所做的更改。

请阅读下文，了解详情。

什么是 Credential Management API

Credential Management API (CM API) 允许网站以程序化方式访问用户代理的凭证存储空间，以便存储/检索调用方的用户凭据。

基本 API 包括：

  • navigator.credentials.get()
  • navigator.credentials.store()
  • navigator.credentials.create()
  • navigator.credentials.preventSilentAccess()

原始 CM API 规范定义了 2 种凭证类型：

  • PasswordCredential
  • FederatedCredential

PasswordCredential 是包含用户 ID 和密码的凭据。FederatedCredential 是包含用户 ID 和表示身份提供方的字符串的凭据。

借助这 2 种凭证，网站可以：

  • 让用户在进入应用后立即使用之前保存的基于密码的凭据或联合凭据登录（自动登录），
  • 存储用户登录时使用的基于密码的凭据或联合凭据，
  • 让用户的登录凭据保持最新状态（例如在密码更改后）

什么是 WebAuthn

WebAuthn（Web 身份验证）向 CM API 添加了公钥凭证。例如，它为网站提供了一种标准化方法，以便使用符合 FIDO 2.0 标准的身份验证器设备实现双重身份验证。

在技术层面，WebAuthn 通过 PublicKeyCredential 接口扩展了 CM API。

具体问题

之前，我们一直引导开发者使用以下代码来检测 CM API：

if (navigator.credentials && navigator.credentials.preventSilentAccess) {
  // Use CM API
}

But as you can see from the descriptions above, the `navigator.credentials` is
now expanded to support public-key credentials in addition to password
credentials and federated credentials.

The problem is that user agents don't necessarily support all kinds of
credentials. If you continue feature detect using `navigator.credentials`, your
website may break when you are using a certain credential type not supported by
the browser.

**Supported credential types by browser<s**
table class="properties with-head><ing-t><in>t<&q><uot>;<tb>odytr
th/th
thPasswordCredential / Feder<ate>d<Cr>edential/th
thPubli<cKe>y<Cre><de><nt>ial/th
</tr><tr>thChrome
/<tht><dA>vailable
/tdtdI<n d><eve><lo><pm>ent
/td/<trt><rt>hFir<efo><x<>/span>
/thtdN/A
/tdtdAiming <to ><shi><p ><on> 60
/<td/><tr>trth<Edg><e<>/span>
/thtdN/A
/tdtdImp<lemented with a href="https://blogs.windows.com/msedgedev/2016/04/12/a-world-without-passwords-windows-hello->in-micros<of>t-edge/"older API/a. New API (navigator.cr<ede><nti><als) c><oming >soon.
/td/tr/tbody/table


## The solution
You can avoid this by modifying feature detection code as follows to explicitly
test for the credential type that you intend to use.

```js
if (window.PasswordCredential || window.FederatedCredential) {
    // Call navigator.credentials.get() to retrieve stored
    // PasswordCredentials or FederatedCredentials.
}

if (window.PasswordCredential) {
    // Get/Store PasswordCredential
}

if (window.FederatedCredential) {
    // Get/Store FederatedCredential
}

if&& (navigator.credentials  navigator.credentials.preventSilentAccess) {
    // Call navigator.credentials.preventSilentAccess()
}

如需查看示例，请参阅对示例代码所做的实际更改。

作为参考，以下是检测 WebAuthn 中添加的 PublicKeyCredential 的方法：

if (window.PublicKeyCredential) {
    // use CM API with PublicKeyCredential added in the WebAuthn spec
}

时间表

最早实现 WebAuthn 的是 Firefox，计划于 2018 年 5 月初左右稳定运行。

最后

如果您有任何疑问，请发送至 @agektmr 或 agektmr@chromium.org。