Thử nghiệm nguồn gốc: Dàn xếp ngay lập tức WebAuthn để đăng nhập dễ dàng

José Luis Zapata

Xuất bản: Ngày 19 tháng 8 năm 2025

WebAuthn immediate mediation là một tính năng mới trên web, được thiết kế để đơn giản hoá quy trình đăng nhập của người dùng. Thử nghiệm nguồn gốc này cung cấp thông tin tổng quan về tính năng, lợi ích và thông tin chi tiết về việc triển khai, đồng thời mời bạn tham gia và giúp định hình tương lai của quy trình xác thực trên web.

Thông tin khái quát

Việc xác thực trên web thường gây ra sự bất tiện, làm phức tạp quá trình đăng nhập của người dùng. Mặc dù mạnh mẽ, nhưng các luồng WebAuthn hiện có gặp khó khăn với nút "Đăng nhập", đặc biệt là khi thông tin đăng nhập không có sẵn ngay lập tức, dẫn đến các phương án dự phòng cho biểu mẫu tiêu chuẩn.

Tính năng mới này giới thiệu một quy trình đăng nhập có độ ma sát thấp, tương tự như API preferImmediatelyAvailableCredentials trên thiết bị di động. Tính năng này giúp đơn giản hoá quy trình đăng nhập, thường là trước các biểu mẫu đăng nhập tiêu chuẩn, bằng cách giảm sự phiền hà và nâng cao trải nghiệm người dùng.

Cách hoạt động

Tính năng trung gian tức thì WebAuthn mang đến trải nghiệm đăng nhập trực tiếp và hiệu quả hơn. API này cho phép trình duyệt cung cấp ngay thông tin đăng nhập có sẵn hoặc báo hiệu ngay sự vắng mặt của thông tin đăng nhập mà không cần nhắc xác thực trên nhiều thiết bị hoặc bằng khoá bảo mật, giúp đơn giản hoá việc triển khai cho nhà phát triển.

Loại dàn xếp immediate

Chúng tôi sẽ ra mắt một loại dàn xếp immediate cho các yêu cầu navigator.credentials.get(). Khi bạn đặt lựa chọn này, lời hứa sẽ từ chối bằng NotAllowedError nếu không tìm thấy thông tin xác thực có sẵn tại địa phương. Nếu có thông tin đăng nhập, trình duyệt sẽ xử lý quy trình xác thực như bình thường.

Nhờ tính linh hoạt này, các trang web có thể điều chỉnh quy trình đăng nhập, cung cấp các phương thức thay thế một cách linh hoạt khi không có thông tin đăng nhập ngay lập tức.

Điều quan trọng là các trình duyệt vẫn có thể trả về NotAllowedError để duy trì quyền riêng tư và bảo mật của người dùng, ngăn chặn các vấn đề như lấy dấu vân tay hoặc theo dõi.

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

Bạn có thể phát hiện xem tính năng dàn xếp ngay lập tức có hoạt động hay không bằng cách sử dụng PublicKeyCredential.getClientCapabilities(). Nhà phát triển có thể kiểm tra khả năng immediateGet trên đối tượng capabilities được trả về.

async function checkImmediateMediationAvailability() {
  try {
    const capabilities = await PublicKeyCredential.getClientCapabilities();
    if (capabilities.immediateGet && window.PasswordCredential) {
      console.log("Immediate Mediation with passwords supported.");
    } else if (capabilities.immediateGet) {
      console.log("Immediate Mediation without passwords supported.");
    } else { console.log("Immediate Mediation unsupported."); }
  } catch (error) {
    console.error("Error getting client capabilities:", error);
  }
}

Lưu ý: Để hỗ trợ nhiều trình duyệt hơn, bạn có thể dùng polyfill cho getClientCapabilities() trong kho lưu trữ WebAuthn Polyfills GitHub.

Ví dụ về cách triển khai

Để sử dụng API, hãy gọi navigator.credentials.get() bằng mediation: 'immediate'. Bạn nên thêm password: true vào yêu cầu, vì hầu hết người dùng hiện nay đều có mật khẩu đã lưu và có thể hưởng lợi ngay lập tức từ trải nghiệm này.

button.addEventListener('click', async (event) => {
  event.preventDefault();
  event.stopPropagation();
  const cred = await navigator.credentials.get({
    password: true,
    publicKey: {
      challenge, // Your server-generated challenge
      rpId: 'example.com' // Your Relying Party ID
    },
    mediation: 'immediate',
  });
});

Nhà phát triển nên xử lý NotAllowedError trong khối catch để mang lại trải nghiệm đăng nhập dự phòng mượt mà.

Quy trình từng bước để dàn xếp ngay lập tức

Cơ chế trung gian tức thì WebAuthn hỗ trợ 2 trường hợp sử dụng chính để đơn giản hoá quy trình đăng nhập của người dùng: cho phép một nút "Đăng nhập bằng khoá truy cập" chuyên dụng giúp loại bỏ các lựa chọn dự phòng không mong muốn và tạo điều kiện cho một quy trình đăng nhập linh hoạt cung cấp thông tin đăng nhập một cách chủ động trước khi người dùng thực hiện một hành động quan trọng.

Trường hợp sử dụng 1: Đăng nhập rõ ràng bằng nút đăng nhập

Trường hợp này tập trung vào việc cung cấp một nút đăng nhập chuyên dụng, đảm bảo trải nghiệm người dùng mượt mà mà không có lời nhắc không mong muốn hoặc phải chuyển qua trang đăng nhập.

1. Người dùng bắt đầu đăng nhập: Người dùng nhấp vào nút "Đăng nhập". Sau đó, bên tin cậy sẽ gọi navigator.credentials.get() bằng mediation: "immediate".
2. Trình duyệt nhắc chọn thông tin đăng nhập (nếu có): Trình duyệt sẽ kiểm tra xem có khoá truy cập hoặc mật khẩu được yêu cầu nào có sẵn trên thiết bị hay không. Nếu tìm thấy, nó sẽ ngay lập tức trình bày một giao diện người dùng phương thức để người dùng chọn một tài khoản. Các tài khoản được xếp hạng theo dấu thời gian sử dụng gần đây nhất, sau đó là theo thứ tự bảng chữ cái. Lưu ý: Nếu cả mật khẩu và khoá truy cập của nhiều trình quản lý mật khẩu đều được tìm thấy cho cùng một tài khoản, thì trình duyệt sẽ ưu tiên khoá truy cập. Khi có nhiều khoá truy cập cho cùng một tài khoản từ các nhà cung cấp khác nhau, khoá truy cập được dùng gần đây nhất sẽ được ưu tiên.
3. Đăng nhập thành công: Người dùng chọn khoá truy cập trong giao diện người dùng của trình duyệt. Nếu cần xác minh, trình duyệt sẽ nhắc người dùng xác minh danh tính bằng phương thức đã thiết lập trước đó (chẳng hạn như mã PIN, dữ liệu sinh trắc học hoặc hình mở khoá). Đăng nhập thành công.
4. Đường dẫn dự phòng: không có khoá truy cập hoặc người dùng đóng: Nếu không có khoá truy cập cục bộ hoặc mật khẩu được yêu cầu cho trang web, hoặc nếu người dùng đóng giao diện người dùng trình duyệt, thì trình duyệt sẽ gửi một NotAllowedError đến bên đáng tin cậy và trình duyệt không hiển thị bất kỳ giao diện người dùng nào cho các lựa chọn khoá bảo mật hoặc trên nhiều thiết bị. Sau đó, bên tin cậy có thể tiếp tục với trang đăng nhập tiêu chuẩn hoặc cung cấp các cơ chế xác thực thay thế.

Trường hợp sử dụng 2: Luồng đăng nhập ngầm trước một hành động của người dùng

Trường hợp này cho phép trải nghiệm đăng nhập chủ động, cung cấp khoá truy cập và mật khẩu trước khi người dùng thực hiện một hành động yêu cầu trạng thái đã xác thực, chẳng hạn như thanh toán.

1. Người dùng bắt đầu hành động yêu cầu đăng nhập: Người dùng nhấp vào một nút cho hành động yêu cầu họ phải đăng nhập (ví dụ: nút "Thanh toán"). Sau đó, bên thứ ba đáng tin cậy sẽ gọi navigator.credentials.get() bằng mediation: "immediate".

2. Trình duyệt nhắc chọn thông tin xác thực (nếu có): Trình duyệt kiểm tra xem có khoá truy cập hoặc mật khẩu nào có sẵn trên thiết bị hay không. Nếu tìm thấy, nó sẽ ngay lập tức hiển thị một giao diện người dùng phương thức để người dùng chọn một tài khoản. Các tài khoản được xếp hạng theo dấu thời gian sử dụng gần đây nhất, sau đó theo thứ tự bảng chữ cái và được loại bỏ các tài khoản trùng lặp để chỉ hiển thị một mục nhập cho mỗi tài khoản. Lưu ý: Khi tìm thấy cả mật khẩu và khoá truy cập từ nhiều trình quản lý mật khẩu cho cùng một tài khoản, trình duyệt sẽ ưu tiên khoá truy cập. Khi có nhiều khoá truy cập cho cùng một tài khoản từ nhiều nhà cung cấp, khoá truy cập được dùng gần đây nhất sẽ được ưu tiên.

3. Đăng nhập thành công: Người dùng chọn một thông tin đăng nhập trong giao diện người dùng của trình duyệt. Nếu trình duyệt yêu cầu xác minh, thì trình duyệt sẽ nhắc người dùng xác minh danh tính bằng phương thức mà họ đã thiết lập trước đó (chẳng hạn như mã PIN, dữ liệu sinh trắc học hoặc hình mở khoá). Đăng nhập thành công.

4. Đường dẫn dự phòng: không có thông tin đăng nhập hoặc người dùng đóng: Nếu không có thông tin đăng nhập cục bộ cho trang web hoặc nếu người dùng đóng giao diện người dùng trình duyệt, thì trình duyệt sẽ gửi một NotAllowedError đến bên đáng tin cậy và trình duyệt sẽ không hiển thị bất kỳ giao diện người dùng nào. Trải nghiệm đăng nhập của người dùng vẫn không thay đổi so với hiện tại. Sau đó, bên tin cậy có thể yêu cầu người dùng cung cấp thêm thông tin chi tiết (ví dụ: địa chỉ email) hoặc cho thấy các cơ chế xác thực thay thế, chẳng hạn như biểu mẫu mật khẩu, xác minh qua SMS hoặc yêu cầu phương thức WebAuthn hỗ trợ các trình xác thực trên nhiều thiết bị.

Lợi ích

Tính năng dàn xếp ngay lập tức WebAuthn mang lại một số lợi ích chính cho nhà phát triển và người dùng:

• Đăng nhập dễ dàng: Tính năng này mang đến trải nghiệm đăng nhập mượt mà và dễ dàng hơn cho những người dùng có sẵn khoá truy cập hoặc mật khẩu đã lưu trong trình duyệt hoặc trình quản lý mật khẩu.
• Đăng nhập thông minh: API này cho phép một luồng đăng nhập khi người dùng muốn thực hiện các hoạt động yêu cầu họ phải đăng nhập. Những nút này sẽ điều chỉnh một cách thông minh theo trạng thái thông tin đăng nhập của người dùng. Thư viện này cung cấp quy trình xác thực ngay lập tức (nếu có thể), tránh các lệnh chuyển hướng không cần thiết và đơn giản hoá quy trình.
• Cải thiện tính năng quản lý thông tin đăng nhập: Khi nhiều trình quản lý mật khẩu cung cấp thông tin đăng nhập cho cùng một tài khoản, trình duyệt sẽ chọn một cách thông minh lựa chọn phù hợp nhất, giúp người dùng đơn giản hoá việc quản lý thông tin đăng nhập.
• Giảm sự nhầm lẫn cho người dùng: Bằng cách trình bày trực tiếp thông tin đăng nhập đã biết, tính năng này giảm thiểu sự nhầm lẫn cho người dùng thường liên quan đến nhiều lựa chọn đăng nhập hoặc biểu mẫu tiêu chuẩn.
• Cơ chế dự phòng liền mạch: Cơ chế này đảm bảo người dùng không có thông tin đăng nhập ngay lập tức sẽ được chuyển hướng liền mạch đến các trang đăng nhập tiêu chuẩn, tức là trải nghiệm của họ vẫn không thay đổi so với các quy trình hiện tại.

Quyền riêng tư và bảo mật

Tính năng trung gian ngay lập tức của WebAuthn cho phép các trang web xác định sự hiện diện của thông tin xác thực có sẵn ngay lập tức trước khi người dùng uỷ quyền rõ ràng cho một lần đăng nhập. Để bảo vệ quyền riêng tư của người dùng và ngăn chặn hành vi sử dụng sai mục đích có thể xảy ra, chúng tôi triển khai một số biện pháp quan trọng:

• Yêu cầu về cử chỉ của người dùng: Lệnh gọi API yêu cầu cử chỉ của người dùng (mọi hoạt động kích hoạt tạm thời của người dùng). Điều này khiến các trang web khó thực hiện việc thăm dò và lấy dấu vân tay một cách âm thầm.
• Phiên ẩn danh và phiên riêng tư: Trong phiên ẩn danh hoặc phiên riêng tư, mọi yêu cầu dàn xếp ngay lập tức đều sẽ gửi NotAllowedError.
• Quy định hạn chế đối với danh sách allowCredentials: Các yêu cầu sử dụng danh sách allowCredentials sẽ gửi NotAllowedError. Điều này ngăn các trang web suy luận nhật ký tương tác của người dùng hoặc theo dõi người dùng trong các phiên.
• Huỷ: Việc đặt tham số signal trên một yêu cầu có hoạt động dàn xếp ngay lập tức là không hợp lệ. Điều này ngăn các trang web tự động loại bỏ mọi giao diện người dùng của trình duyệt.

Dùng thử

Bạn nên thử nghiệm tính năng hoà giải ngay lập tức WebAuthn.

Trạng thái trong Chrome

Tính năng này đang trong quá trình phát triển của Chromium:

• Máy tính: Thử nghiệm dành cho nhà phát triển trong Chrome 136, với Thử nghiệm theo nguyên gốc từ Chrome 139 đến 141.
• Android: Dev Trial trong Chrome 140.

Để kiểm thử cục bộ

Cách kiểm thử tính năng dàn xếp ngay lập tức của WebAuthn tại địa phương:

1. Tải Chrome 139 xuống: Tải và mở phiên bản Chrome mới nhất trên máy tính.
2. Bật cờ Hoà giải ngay lập tức: Chuyển đến chrome://flags/#web-authentication-immediate-get trong thanh địa chỉ rồi bật cờ "Web Authentication Immediate Get" (Xác thực web nhận ngay lập tức).
3. Chuẩn bị thông tin xác thực: Đảm bảo bạn đã lưu khoá truy cập và mật khẩu có thể sử dụng:
   • Mật khẩu được lưu trong Trình quản lý mật khẩu của Google.
   • Khoá truy cập được lưu trong Trình quản lý mật khẩu của Google (bạn cần đăng nhập và đồng bộ hoá Chrome với một Tài khoản Google), Windows Hello hoặc chuỗi khoá iCloud.

Đối với thử nghiệm công khai (bản dùng thử theo nguyên gốc)

Cách kiểm thử quy trình dàn xếp ngay lập tức WebAuthn bằng bản dùng thử theo nguyên gốc trong môi trường công khai:

1. Đăng ký: Truy cập vào trang Thử nghiệm theo nguyên gốc của Chrome rồi đăng ký thử nghiệm"WebAuthn immediate mediation" (WebAuthn hoà giải tức thì).
2. Thêm mã thông báo vào tiêu đề HTTP: Thêm mã thông báo dùng thử nguồn được cung cấp vào tiêu đề HTTP của trang web: HTML Origin-Trial: [YOUR_TRIAL_TOKEN]

Lưu ý: Bạn cũng có thể cung cấp mã thông báo theo cách lập trình bằng JavaScript.

Các tình huống kiểm thử

Chúng tôi cung cấp một cách triển khai tham chiếu và khuyến khích bạn tạo nguyên mẫu của riêng mình để kiểm thử nhiều tình huống.

• Bản minh hoạ tham chiếu: Bạn có thể dùng thử bản triển khai tham chiếu tại https://deephand.github.io/webauthn-immediate-demo/.
  • Triển khai một nguyên mẫu: Khi triển khai một nguyên mẫu trên trang web của bạn, hãy đảm bảo bạn thực hiện lệnh gọi navigator.credentials.get() bằng mediation: 'immediate' sau khi người dùng nhấp vào (ví dụ: nút "Đăng nhập" hoặc bất kỳ hoạt động tương tác nào yêu cầu người dùng đăng nhập).
• Quy trình 1: Đăng nhập mà không cần mật khẩu hoặc khoá truy cập: Nếu bạn không có khoá truy cập hoặc mật khẩu cho trang web, thì việc nhấp vào "Đăng nhập" sẽ chuyển thẳng đến trang đăng nhập tiêu chuẩn của bạn mà không có giao diện người dùng trình duyệt nào xuất hiện.
• Quy trình 2: Đăng nhập bằng khoá truy cập cục bộ có sẵn ngay lập tức: Nếu bạn đã lưu khoá truy cập cho trang web, thì việc nhấp vào "Đăng nhập" sẽ kích hoạt Giao diện người dùng trung gian ngay lập tức, cung cấp khoá truy cập để bạn chọn.
• Luồng 3: Đăng nhập bằng khoá truy cập hoặc mật khẩu trên thiết bị: Nếu bạn đã lưu cả khoá truy cập và mật khẩu, hãy bật lựa chọn "Yêu cầu mật khẩu" (bằng cách đặt password: true trong mã của bạn). Sau đó, khi bạn nhấp vào "Đăng nhập", cả khoá truy cập và mật khẩu sẽ xuất hiện trong Giao diện người dùng dàn xếp ngay lập tức.