Kiểm tra để phát hiện tính năng của API Quản lý thông tin xác thực

Tóm tắt

WebAuthn giúp tăng cường bảo mật bằng cách đưa phương thức xác thực dựa trên thông tin xác thực khoá công khai vào Web và sẽ sớm được hỗ trợ trong Chrome, Firefox và Edge (với thông số kỹ thuật mới cập nhật). Tuy nhiên, tính năng này có thể làm hỏng các trang web sử dụng API Quản lý thông tin xác thực mà không phát hiện được tính năng các loại thông tin xác thực cụ thể mà họ đang sử dụng.

Nếu bạn đang làm việc này để phát hiện tính năng

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

Thay vào đó, hãy thực hiện những thao tác này

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()
}

Hãy xem các thay đổi đối với mã mẫu dưới đây.

Hãy đọc tiếp để tìm hiểu thêm.

Credential Manager API là gì

API Quản lý thông tin xác thực (API CM) cấp cho các trang web quyền truy cập có lập trình vào kho lưu trữ thông tin xác thực của tác nhân người dùng để lưu trữ/truy xuất thông tin xác thực của người dùng cho nguồn gốc của lệnh gọi.

Các API cơ bản là:

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

Quy cách API CM ban đầu xác định 2 loại thông tin xác thực:

  • PasswordCredential
  • FederatedCredential

PasswordCredential là thông tin xác thực chứa mã nhận dạng và mật khẩu của người dùng. FederatedCredential là thông tin xác thực chứa mã nhận dạng của người dùng và một chuỗi đại diện cho trình cung cấp danh tính.

Với 2 thông tin xác thực này, trang web có thể:

  • Cho phép người dùng đăng nhập bằng thông tin xác thực liên kết hoặc dựa trên mật khẩu đã lưu trước đó ngay khi họ truy cập (tự động đăng nhập),
  • Lưu trữ thông tin xác thực liên kết hoặc dựa trên mật khẩu mà người dùng đã đăng nhập bằng,
  • Cập nhật thông tin đăng nhập của người dùng (ví dụ: sau khi thay đổi mật khẩu)

WebAuthn là gì

WebAuthn (Xác thực web) thêm thông tin xác thực khoá công khai vào API CM. Ví dụ: tiêu chuẩn này cung cấp cho các trang web một cách thức chuẩn hoá để triển khai quy trình xác thực hai yếu tố bằng các thiết bị trình xác thực tuân thủ FIDO 2.0.

Ở cấp độ kỹ thuật, WebAuthn mở rộng API CM bằng giao diện PublicKeyCredential.

Vấn đề là gì?

Trước đây, chúng tôi đã hướng dẫn nhà phát triển phát hiện tính năng API CM bằng mã sau:

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()
}

Hãy xem các thay đổi thực tế được thực hiện đối với mã mẫu làm ví dụ.

Để tham khảo, sau đây là cách phát hiện PublicKeyCredential được thêm vào WebAuthn:

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

Dòng thời gian

Phương thức triển khai WebAuthn sớm nhất hiện có là Firefox và dự kiến sẽ ổn định vào đầu tháng 5 năm 2018.

Cuối cùng

Nếu bạn có câu hỏi, hãy gửi câu hỏi đó đến @agektmr hoặc agektmr@chromium.org.