Trang này được dịch bởi Cloud Translation API.

Ra mắt gợi ý, Yêu cầu nguồn có liên quan và chuyển đổi tuần tự JSON cho WebAuthn trong Chrome

Chrome 128 và 129 ra mắt các tính năng mới thú vị cho WebAuthn – API cơ bản để xây dựng hệ thống xác thực dựa trên khoá truy cập.

Eiji Kitamura

Gợi ý: Gợi ý giúp các bên phụ thuộc (RP) kiểm soát tốt hơn giao diện người dùng WebAuthn trong trình duyệt. Các API này đặc biệt hữu ích cho người dùng doanh nghiệp muốn sử dụng khoá bảo mật.
Yêu cầu nguồn gốc có liên quan: Với các yêu cầu nguồn gốc có liên quan, bên bị hạn chế có thể giúp khoá truy cập có hiệu lực trên nhiều miền. Nếu sở hữu nhiều trang web, giờ đây, bạn có thể cho phép người dùng sử dụng lại khoá truy cập trên các trang web của bạn, giúp loại bỏ sự phiền toái khi đăng nhập.
Sê-ri hoá JSON: Các API chuyển đổi tuần tự JSON cho phép bạn đơn giản hoá mã giao diện người dùng của RP bằng cách mã hoá và giải mã các tuỳ chọn cũng như thông tin xác thực được truyền đến và từ API WebAuthn.

Gợi ý

Với hints, các bên phụ thuộc (RP) hiện có thể chỉ định các tuỳ chọn giao diện người dùng để tạo khoá truy cập hoặc xác thực bằng khoá truy cập.

Trước đây, khi một RP muốn hạn chế trình xác thực mà người dùng có thể sử dụng để tạo khoá truy cập hoặc xác thực, họ có thể sử dụng authenticatorSelection.authenticatorAttachment để chỉ định "platform" hoặc "cross-platform". Các giá trị này lần lượt giới hạn trình xác thực ở trình xác thực nền tảng hoặc trình xác thực khi chuyển vùng. Với hints, quy cách này có thể linh hoạt hơn.

RP có thể sử dụng hints không bắt buộc trong PublicKeyCredentialCreationOptions hoặc PublicKeyCredentialRequestOptions để chỉ định "security-key", "client-device" và "hybrid" theo thứ tự ưu tiên trong một mảng.

Sau đây là một ví dụ về yêu cầu tạo thông tin xác thực ưu tiên trình xác thực "cross-platform" với "security-key" làm gợi ý. Thao tác này sẽ yêu cầu Chrome hiển thị giao diện người dùng tập trung vào khoá bảo mật cho người dùng doanh nghiệp.

const credential = await navigator.credentials.create({
  publicKey: {
    challenge: *****,
    hints: ['security-key'],
    authenticatorSelection: {
      authenticatorAttachment: 'cross-platform'
    }
  }
});

Bằng cách chỉ định "security-key" làm gợi ý, trình duyệt sẽ hiển thị hộp thoại tập trung vào khoá bảo mật. — Bằng cách chỉ định "security-key" làm gợi ý, trình duyệt sẽ hiển thị một hộp thoại lấy tiêu điểm là khoá bảo mật.

Khi muốn ưu tiên một trường hợp xác minh trên nhiều thiết bị, RP có thể gửi một yêu cầu xác thực ưu tiên trình xác thực "cross-platform" với "hybrid" làm gợi ý.

const credential = await navigator.credentials.create({
  publicKey: {
    challenge: *****,
    residentKey: true,
    hints: ['hybrid']
    authenticatorSelection: {
      authenticatorAttachment: 'cross-platform'
    }
  }
});

Bằng cách chỉ định "kết hợp" làm gợi ý, trình duyệt sẽ hiển thị hộp thoại tập trung vào việc đăng nhập trên nhiều thiết bị.

Với Yêu cầu nguồn gốc liên quan, RP có thể giúp người dùng sử dụng khoá truy cập từ nhiều miền. Việc xây dựng trải nghiệm đăng nhập tập trung và sử dụng giao thức liên kết vẫn là giải pháp được đề xuất cho hầu hết các trang web. Tuy nhiên, nếu bạn sở hữu nhiều miền và không thể liên kết, thì nguồn gốc liên quan có thể là giải pháp.

Tất cả các yêu cầu WebAuthn phải chỉ định mã nhận dạng bên phụ thuộc (mã nhận dạng RP) và tất cả khoá truy cập đều được liên kết với một mã nhận dạng RP. Theo truyền thống, một nguồn gốc chỉ có thể chỉ định một mã nhận dạng RP dựa trên miền của nguồn gốc đó. Vì vậy, trong trường hợp đó, www.example.co.uk có thể chỉ định một mã nhận dạng RP là example.co.uk, nhưng không thể chỉ định example.com. Với Yêu cầu nguồn gốc liên quan, bạn có thể xác thực mã nhận dạng RP đã xác nhận bằng cách tìm nạp một tệp JSON phổ biến nằm tại /.well-known/webauthn từ miền mục tiêu. Vì vậy, example.co.uk (và example.in, example.de, v.v.) đều có thể sử dụng mã nhận dạng RP là example.com nếu example.com chỉ định các mã đó theo định dạng sau:

URL: https://example.com/.well-known/webauthn

{
  "origins": [
    "https://example.co.uk",
    "https://example.de",
    "https://example.sg",
    "https://example.net",
    "https://exampledelivery.com",
    "https://exampledelivery.co.uk",
    "https://exampledelivery.de",
    "https://exampledelivery.sg",
    "https://myexamplerewards.com",
    "https://examplecars.com"
  ]
}

Tìm hiểu cách thiết lập Yêu cầu nguồn gốc có liên quan tại phần Cho phép sử dụng lại khoá truy cập trên các trang web của bạn bằng Yêu cầu nguồn gốc có liên quan.

Tuần tự hoá JSON

Các đối tượng phản hồi và yêu cầu WebAuthn có nhiều trường chứa dữ liệu nhị phân thô trong ArrayBuffer, chẳng hạn như mã nhận dạng thông tin xác thực, mã nhận dạng người dùng hoặc thử thách. Nếu một trang web muốn sử dụng JSON để trao đổi dữ liệu này với máy chủ, trước tiên, dữ liệu nhị phân phải được mã hoá, ví dụ: bằng Base64URL. Điều này làm tăng thêm độ phức tạp không cần thiết cho những nhà phát triển muốn bắt đầu sử dụng mã xác thực trên trang web của họ.

WebAuthn hiện cung cấp các API để phân tích cú pháp các đối tượng yêu cầu WebAuthn PublicKeyCredentialCreationOptions và PublicKeyCredentialRequestOptions trực tiếp từ JSON, đồng thời chuyển đổi tuần tự phản hồi PublicKeyCredential trực tiếp thành JSON. Tất cả các trường có giá trị ArrayBuffer chứa dữ liệu nhị phân thô sẽ tự động được chuyển đổi từ hoặc sang các giá trị được mã hoá Base64URL. Các API này có trong Chrome 129.

Trước khi tạo khoá truy cập, hãy tìm nạp đối tượng PublicKeyCredentialCreationOptions được mã hoá JSON từ máy chủ và giải mã đối tượng đó bằng PublicKeyCredential.parseCreationOptionsFromJSON().

Hỗ trợ trình duyệt

Nguồn

export async function registerCredential() {

  // Fetch encoded `PublicKeyCredentialCreationOptions`
  // and JSON decode it.
  const options = await fetch('/auth/registerRequest').json();

  // Decode `PublicKeyCredentialCreationOptions` JSON object
  const decodedOptions = PublicKeyCredential.parseCreationOptionsFromJSON(options);  

  // Invoke the WebAuthn create() function.
  const cred = await navigator.credentials.create({
    publicKey: decodedOptions,
  });
  ...

Sau khi tạo khoá truy cập, hãy mã hoá thông tin xác thực thu được bằng toJSON() để có thể gửi thông tin đó đến máy chủ.

Hỗ trợ trình duyệt

Nguồn

  ...
  const cred = await navigator.credentials.create({
    publicKey: options,
  });

  // Encode the credential to JSON and stringify
  const credential = JSON.stringify(cred.toJSON());

  // Send the encoded credential to the server
  await fetch('/auth/registerResponse', credential);
  ...

Trước khi xác thực bằng khoá truy cập, hãy tìm nạp PublicKeyRequestCreationOptions được mã hoá JSON từ máy chủ và giải mã khoá đó bằng PublicKeyCredential.parseRequestOptionsFromJSON().

Hỗ trợ trình duyệt

Nguồn

export async function authenticate() {

  // Fetch encoded `PublicKeyCredentialRequestOptions`
  // and JSON decode it.
  const options = await fetch('/auth/signinRequest').json();

  // Decode `PublicKeyCredentialRequestOptions` JSON object
  const decodedOptions = PublicKeyCredential.parseRequestOptionsFromJSON(options);

  // Invoke the WebAuthn get() function.
  const cred = await navigator.credentials.get({
    publicKey: options
  });
  ...

Sau khi xác thực bằng khoá truy cập, hãy mã hoá thông tin xác thực thu được bằng phương thức toJSON() để có thể gửi thông tin đó đến máy chủ.

Hỗ trợ trình duyệt

Nguồn

  ...
  const cred = await navigator.credentials.get({
    publicKey: options
  });

  // Encode the credential to JSON and stringify
  const credential = JSON.stringify(cred.toJSON());

  // Send the encoded credential to the server
  await fetch(`/auth/signinResponse`, credential);
  ...

Tìm hiểu thêm

Để tìm hiểu thêm về WebAuthn và khoá truy cập, hãy tham khảo các tài nguyên sau:

Ra mắt gợi ý, Yêu cầu nguồn có liên quan và chuyển đổi tuần tự JSON cho WebAuthn trong Chrome

Gợi ý

Yêu cầu gốc có liên quan

Tuần tự hoá JSON

Tìm hiểu thêm