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.
- 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.
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 tập trung vào khoá bảo mật.](https://developer.chrome.google.cn/static/blog/passkeys-updates-chrome-129/image/security-key.png?hl=vi)
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 "hybrid" 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ị.](https://developer.chrome.google.cn/static/blog/passkeys-updates-chrome-129/image/cross-device.png?hl=vi)
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()
.
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ủ.
...
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()
.
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ủ.
...
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: