Credential Management API 功能偵測檢查

Eiji Kitamura

摘要

WebAuthn 可以在網路中提供公開金鑰憑證的驗證機制，藉此提升安全性。Chrome、Firefox 和 Edge 很快就會支援這項功能 (搭配最新的規格)。這個 API 新增一種新的 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 和代表識別資訊提供者字串的憑證。

有了這兩種憑證，網站就能：

  • 讓使用者在到達後立即使用先前儲存的密碼或聯合憑證登入 (自動登入)。
  • 儲存使用者登入時使用的密碼或聯合憑證。
  • 將使用者的登入憑證維持在最新狀態 (例如密碼變更後)

什麼是 WebAuthn

WebAuthn (網路驗證) 會將公開金鑰憑證新增至 CM API。舉例來說，它可讓網站使用符合 FIDO 2.0 規範的驗證器裝置，執行雙重驗證的標準化做法。

在技術層面上，WebAuthn 會將 CM API 擴充為 PublicKeyCredential 介面。

有什麼問題？

我們之前已引導開發人員使用下列程式碼來偵測 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 browsers**
<table class="properties with-heading-tint"><tbody><tr>
<th></th>
<th>PasswordCredential / FederatedCredential</th>
<th>PublicKeyCredential</th>
</tr><tr><th>Chrome
</th><td>Available
</td><td>In development
</td></tr><tr><th>Firefox
</th><td>N/A
</td><td>Aiming to ship on 60
</td></tr><tr><th>Edge
</th><td>N/A
</td><td>Implemented with <a href="https://blogs.windows.com/msedgedev/2016/04/12/a-world-without-passwords-windows-hello-in-microsoft-edge/">older API</a>. New API (navigator.credentials) coming 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。