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 giới thiệu 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 đáng tin cậy (RP) kiểm soát tốt hơn WebAuthn Giao diện người dùng trong trình duyệt. Chúng đặc biệt hữu ích cho những 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: Có nguồn gốc liên quan yêu cầu, bên bị hạn chế có thể giúp khoá truy cập trở nên hợp lệ trên nhiều miền. Nếu bạn sở hữu nhiều trang web, bạn hiện có thể cho phép người dùng sử dụng lại khoá truy cập của họ trên các trang web của bạn, loại bỏ phiền hà đăng nhập.
• Chuyển đổi tuần tự JSON: 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 và thông tin đăng nhập được truyền qua API WebAuthn và ngược lại.

Gợi ý

Với hints, các bên đáng tin cậy (RP) giờ đây có thể chỉ định các lựa chọn ưu tiên về giao diện người dùng để tạo một khoá truy cập hoặc xác thực bằng khoá truy cập.

Trước đây, khi một bên bị hạn chế muốn hạn chế trình xác thực, người dùng có thể sử dụng tạo khoá truy cập hoặc để xác thực, chúng có thể sử dụng authenticatorSelection.authenticatorAttachment để chỉ định "platform" hoặc "cross-platform". Chúng lần lượt giới hạn các trình xác thực vào một nền tảng trình xác thực hoặc đi lang thang Authenticator. 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.

Lưu ý: Hiện tại, authenticatorAttachment vẫn được tôn trọng trên Chrome.

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 ý. Thông tin này cho biết 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" 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 một bên bị hạn chế muốn ưu tiên trường hợp xác minh trên nhiều thiết bị, họ có thể gửi 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ị một hộp thoại tập trung vào việc đăng nhập trên nhiều thiết bị.

Lưu ý: Các gợi ý này có thể không được tuân thủ trên các nền tảng như Windows nơi có giao diện người dùng không do Chrome kiểm soát.

Yêu cầu nguồn có liên quan

Có nguồn gốc liên quan Yêu cầu, bên bị hạn chế có thể giúp bạn sử dụng được khoá truy cập từ nhiều miền. Xây dựng thông tin đăng nhập tập trung và sử dụng các 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. Nhưng nếu bạn sở hữu nhiều tên miền và liên kết thì không thể, nguồn gốc liên quan có thể là một giải pháp.

Tất cả yêu cầu WebAuthn phải chỉ định một mã bên phụ thuộc (mã RP) và mọi khoá truy cập đều được liên kết với một mã nhận dạng bên bị hạn chế (RP). Thông thường, một nguồn gốc chỉ có thể chỉ định mã RP dựa trên miền, nên trong trường hợp đó, www.example.co.uk có thể chỉ định mã bên bị hạn chế là example.co.uk chứ không phải example.com. Có nguồn gốc liên quan Nếu đáp ứng các yêu cầu, bạn có thể xác thực mã RP đã xác nhận quyền sở hữu bằng cách tìm nạp một tệp JSON phổ biến nằm tại /.well-known/webauthn tính từ miền đích. Vì vậy, example.co.uk (và example.in, example.de, v.v.) đều có thể sử dụng mã nhận dạng bên bị hạn chế là example.com nếu example.com chỉ định chúng 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 trong bài viết Cho phép sử dụng lại khoá truy cập trên các trang web có nguồn gốc có liên quan Yêu cầu.

Chuyển đổi tuần tự JSON

Đối tượng phản hồi và yêu cầu WebAuthn có nhiều trường chứa dữ liệu thô dữ liệu nhị phân 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 yêu cầu xác thực. Nếu một trang web muốn sử dụng JSON để trao đổi dữ liệu này với máy chủ của trang web, tệp nhị phân trước tiên phải được mã hoá, ví dụ như bằng Base64URL. Điều này sẽ thêm những quảng cáo không cần thiết khiến nhà phát triển muốn bắt đầu sử dụng khoá truy cập trên trang web của họ trở nên phức tạp.

WebAuthn hiện cung cấp các API để phân tích cú pháp PublicKeyCredentialCreationOptions và PublicKeyCredentialRequestOptions các đối tượng yêu cầu WebAuthn trực tiếp qua JSON và chuyển đổi tuần tự PublicKeyCredential trực tiếp vào JSON. Tất cả các trường có giá trị ArrayBuffer chứa tệp nhị phân thô được tự động chuyển đổi từ hoặc sang 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 tệp JSON đã mã hoá PublicKeyCredentialCreationOptions từ máy chủ và giải mã đối tượng đó bằng cách sử dụng PublicKeyCredential.parseCreationOptionsFromJSON().

Hỗ trợ trình duyệt

• 129
• 129
• 119
• dấu x

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 đến máy chủ.

Hỗ trợ trình duyệt

• 129
• 129
• 119
• dấu x

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 mã JSON đã mã hoá PublicKeyRequestCreationOptions từ máy chủ và giải mã bằng PublicKeyCredential.parseRequestOptionsFromJSON().

Hỗ trợ trình duyệt

• 129
• 129
• 119
• dấu x

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 đăng nhập thu được bằng toJSON() để có thể được gửi đến máy chủ.

Hỗ trợ trình duyệt

• 129
• 129
• 119
• dấu x

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 xem các tài nguyên sau:

• Khoá truy cập | Chrome cho Nhà phát triển
• Giới thiệu về khoá truy cập phía máy chủ triển khai
• passkeys.dev