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

Eiji Kitamura

Tóm tắt

WebAuthn giúp tăng cường bảo mật bằng cách đưa thông tin xác thực dựa trên thông tin đăng nhập khoá công khai lên web. Tính năng này sẽ sớm được hỗ trợ trên Chrome, Firefox và Edge (với thông số kỹ thuật mới). Tuy nhiên, tính năng này bổ sung một loại đối tượng Credential mới. Tuy nhiên, các đối tượng này có thể làm hỏng những 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ủa các loại thông tin xác thực cụ thể mà chúng đang sử dụng.

Nếu bạn hiệ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
}

Thực hiện những việ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()
}

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

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

API Quản lý thông tin xác thực là gì

API Quản lý thông tin xác thực (CM API) cho phép các trang web truy cập theo phương thứ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 đăng nhập của người dùng đối với nguồn gốc gọi.

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

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

Thông số kỹ thuật ban đầu của API CM 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 đăng nhập này, các trang web có thể:

  • Cho phép người dùng đăng nhập bằng thông tin đăng nhập dựa trên mật khẩu hoặc liên kết đã 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 dựa trên mật khẩu hoặc liên kết mà người dùng đã đăng nhập,
  • Luôn 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 khóa công khai vào API CM. Ví dụ: nó cung cấp cho các trang web một cách chuẩn hoá để triển khai xác thực yếu tố thứ hai bằng cách sử dụng thiết bị 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 các nhà phát triển tính năng phát hiện 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 những thay đổi thực tế đối với mã mẫu làm ví dụ.

Để tham khảo, dưới đâ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
}

Lịch trình

Phiên bản triển khai cũ nhất của WebAuthn là Firefox và theo kế hoạch sẽ ổn định vào khoảng đầ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ác câu hỏi đó đến @agektmr hoặcagektmr@chromium.org.