Giúp người dùng sử dụng khoá truy cập một cách liền mạch hơn

Ngày xuất bản: 9 tháng 5 năm 2025

Khoá truy cập cung cấp phương thức xác thực mạnh mẽ và chống lừa đảo. Tuy nhiên, việc yêu cầu người dùng áp dụng các tính năng này có thể gây ra sự bất tiện. Với tính năng tự động tạo khoá truy cập, bạn có thể tạo khoá truy cập cho người dùng vào đúng thời điểm, miễn là họ đã lưu mật khẩu cho trang web của bạn. Conditional Create (Tạo có điều kiện) cho phép tự động tạo khoá truy cập và là một phần của quy cách WebAuthn.

Cách hoạt động

Để giúp người dùng sử dụng khoá truy cập một cách thuận tiện hơn, hãy sử dụng một tính năng API WebAuthn có tên là Conditional Create (Tạo có điều kiện). Conditional Create cho phép trang web của bạn yêu cầu khoá truy cập cho người dùng mà không yêu cầu họ làm gì cả.

Quy trình này hoạt động khi đáp ứng các điều kiện sau:

  • Người dùng có mật khẩu đã lưu trong trình quản lý mật khẩu mặc định.
  • Mật khẩu này đã được sử dụng gần đây. Tốt nhất là bạn nên gọi Conditional Create ngay sau khi đăng nhập thành công bằng mật khẩu.

Nếu đáp ứng cả hai điều kiện, bạn có thể yêu cầu trình quản lý mật khẩu tạo khoá truy cập cho người dùng bằng cách gọi Conditional Create. Sau khi tạo khoá truy cập thành công, người dùng sẽ nhận được thông báo tuỳ thuộc vào trình quản lý mật khẩu.

Quy trình yêu cầu khoá truy cập có điều kiện tạo.

Khả năng tương thích

Safari trên macOS và tất cả trình duyệt trên iOS đều hỗ trợ Conditional Create, cũng như Chrome trên máy tínhChrome trên Android.

Triển khai tính năng Tạo có điều kiện

Tính năng tạo khoá truy cập tự động dựa trên một tính năng API WebAuthn có tên là Tạo có điều kiện. Đây là các yêu cầu WebAuthn create() thông thường với tham số mediation được đặt thành "conditional". Tham số này hoạt động tương tự như tính năng tự động điền khoá truy cập cho các yêu cầu get().

Sử dụng Conditional Create sau khi người dùng đăng nhập bằng mật khẩu. Việc tạo có thành công hay không phụ thuộc vào trình quản lý mật khẩu và việc đáp ứng một số điều kiện nhất định. Các điều kiện này có thể khác nhau tuỳ theo trình quản lý mật khẩu và có thể thay đổi theo thời gian. Ví dụ: trong Chrome có Trình quản lý mật khẩu của Google (GPM), người dùng phải đăng nhập gần đây bằng mật khẩu đã lưu cho trang web.

Nếu tạo khoá truy cập thành công, trình duyệt sẽ trả về một thông tin đăng nhập khoá công khai. Gửi thông tin đăng nhập này đến phần phụ trợ của bạn để hoàn tất quy trình đăng ký và cho phép xác thực sau này.

Phát hiện đối tượng

Bạn có thể xác định xem Conditional Create có dùng được trên trình duyệt hay không bằng cách gọi PublicKeyCredential.getClientCapabilities(). Xem đối tượng được trả về có chứa true cho thuộc tính conditionalCreate hay không.

if (window.PublicKeyCredential && PublicKeyCredential.getClientCapabilities) {
  const capabilities = await PublicKeyCredential.getClientCapabilities();
  if (capabilities.conditionalCreate) {
    // Conditional create is available
  }
}

Nếu getClientCapabilities không có sẵn, thì Conditional Create cũng không có sẵn.

Tạo khoá truy cập có điều kiện

Để thực hiện quy trình tự động tạo khoá truy cập, hãy gọi navigator.credentials.create() nhưng có mediation: "conditional" như sau.

const cred = await navigator.credentials.create({
  publicKey: options,
  // Request conditional creation
  mediation: 'conditional'
});

Bạn nên sử dụng tính năng tự động tạo khoá truy cập ngay sau khi người dùng đăng nhập để có cơ hội tốt nhất đáp ứng các tiêu chí của trình quản lý mật khẩu về việc tự động tạo.

Bạn có thể gửi thông tin đăng nhập khoá công khai thu được đến máy chủ để xác minh và đăng ký khoá truy cập. Trên máy chủ, hãy đảm bảo rằng người dùng đã đăng nhập.

Chú ý

Bản thân Conditional Create không khó triển khai, nhưng có một số điểm cần lưu ý khi thực sự tích hợp tính năng này vào một hệ thống hiện có.

Bỏ qua trạng thái hiện diện và quy trình xác minh người dùng trên máy chủ

Phản hồi đăng ký trả về cả "User Presence" (Sự hiện diện của người dùng) và "User Verified" (Người dùng đã xác minh) dưới dạng false, vì vậy máy chủ sẽ bỏ qua các cờ này trong quá trình xác minh thông tin đăng nhập.

Huỷ lệnh gọi WebAuthn đang diễn ra trước khi thực hiện quy trình tự động tạo khoá truy cập

Khi RP yêu cầu người dùng đăng nhập bằng khoá truy cập hoặc mật khẩu, thực hiện thao tác get có điều kiện là lựa chọn tốt nhất. Điều này có thể khiến lệnh gọi get có điều kiện bị huỷ trước khi thực hiện lệnh tạo có điều kiện.

Để làm như vậy, bạn cần sử dụng AbortController và gọi .abort().

// To abort a WebAuthn call, instantiate an AbortController.
const controller = new AbortController();

const cred = await navigator.credentials.get({
  publicKey: options,
  signal: controller.signal,
  // Request conditional get
  mediation: 'conditional'
});

// Abort the call
controller.abort();

Bỏ qua các trường hợp ngoại lệ một cách thích hợp

Khi thực hiện quy trình tạo khoá truy cập có điều kiện, bạn nên bỏ qua các trường hợp ngoại lệ sau:

  • InvalidStateError: Đã có một khoá truy cập trong trình cung cấp khoá truy cập (Đừng quên chỉ định excludeCredentials).
  • NotAllowedError: Việc tạo khoá truy cập không đáp ứng điều kiện.
  • AbortError: Lệnh gọi WebAuthn bị huỷ.

Việc hiển thị lỗi trong những trường hợp này có thể khiến người dùng nhầm lẫn vì trình duyệt xử lý lỗi một cách âm thầm: trình duyệt chỉ hiển thị thông báo khi thành công và lỗi không kích hoạt thông báo hiển thị.

Đưa ra tín hiệu khi đăng ký khoá truy cập không thành công

Khi khoá truy cập được tạo nhưng không đăng ký được trên máy chủ, người dùng sẽ gặp phải một lần đăng nhập không thành công. Điều này có thể xảy ra khi danh sách khoá truy cập không nhất quán giữa nhà cung cấp khoá truy cập và máy chủ.

Để tránh những trường hợp như vậy, hãy sử dụng Signal API để duy trì tính nhất quán.

Không hỗ trợ nâng cấp từ tính năng đăng nhập không cần mật khẩu

Tại thời điểm này, việc tạo khoá truy cập có điều kiện sẽ bị hạn chế khi người dùng nhập mật khẩu hợp lệ. Điều này có nghĩa là các phương pháp đăng nhập không cần mật khẩu như đường liên kết truy cập một lần, xác minh số điện thoại hoặc liên kết danh tính sẽ không đáp ứng điều kiện này.

Tóm tắt

Tính năng tự động tạo khoá truy cập có thể đẩy nhanh quá trình áp dụng khoá truy cập trên trang web của bạn, giúp người dùng trang web của bạn chuyển từ mật khẩu sang một phương thức xác thực an toàn hơn.

Để tìm hiểu thêm về khoá truy cập, hãy bắt đầu từ bài viết Đăng nhập không cần mật khẩu bằng khoá truy cập.