Chrome 128 dan 129 memperkenalkan fitur baru yang menarik untuk WebAuthn— dasar untuk membangun sistem otentikasi berbasis kunci sandi.
- Petunjuk: Petunjuk memberikan kontrol yang lebih baik kepada pihak tepercaya (RP) atas WebAuthn UI di browser. Mereka sangat membantu pengguna perusahaan yang ingin menggunakan kunci keamanan.
- Permintaan origin terkait: Dengan origin terkait yang diminta, RP dapat membuat kunci sandi valid di beberapa domain. Jika Anda memiliki beberapa memungkinkan pengguna menggunakan kembali kunci sandi mereka di seluruh situs Anda, menghilangkan hambatan saat {i>login<i}.
- Serialisasi JSON: API serialisasi JSON memungkinkan Anda menyederhanakan kode frontend RP dengan opsi encoding dan decoding serta kredensial yang diteruskan ke dan dari WebAuthn API.
Petunjuk
Dengan hints
, pihak tepercaya (RP) kini dapat menentukan preferensi UI untuk membuat
kunci sandi atau melakukan otentikasi
dengan sebuah kunci sandi.
Sebelumnya, ketika RP ingin membatasi otentikator
yang dapat digunakan pengguna untuk
membuat kunci sandi atau untuk
mengotentikasi, mereka bisa menggunakan
authenticatorSelection.authenticatorAttachment
untuk menentukan "platform"
atau
"cross-platform"
. Keduanya membatasi pengautentikasi ke suatu platform
pengautentikasi
atau roaming
pengautentikasi.
Dengan hints
, spesifikasi ini dapat menjadi lebih fleksibel.
RP dapat menggunakan hints
opsional di PublicKeyCredentialCreationOptions
atau
PublicKeyCredentialRequestOptions
untuk menentukan "security-key"
,
"client-device"
dan "hybrid"
dalam urutan preferensi dalam array.
Berikut adalah contoh permintaan pembuatan kredensial yang memilih
"cross-platform"
pengautentikasi dengan "security-key"
sebagai petunjuk. Ini memberitahu
Chrome akan menampilkan UI yang berfokus pada kunci keamanan bagi pengguna versi bisnis.
const credential = await navigator.credentials.create({
publicKey: {
challenge: *****,
hints: ['security-key'],
authenticatorSelection: {
authenticatorAttachment: 'cross-platform'
}
}
});
![Dengan menentukan 'kunci keamanan' sebagai petunjuk, browser akan menampilkan dialog yang berfokus pada kunci keamanan.](https://developer.chrome.google.cn/static/blog/passkeys-updates-chrome-129/image/security-key.png?hl=id)
Ketika RP ingin memprioritaskan skenario verifikasi lintas perangkat, mereka dapat
mengirim permintaan autentikasi yang memilih pengautentikasi "cross-platform"
dengan "hybrid"
sebagai petunjuk.
const credential = await navigator.credentials.create({
publicKey: {
challenge: *****,
residentKey: true,
hints: ['hybrid']
authenticatorSelection: {
authenticatorAttachment: 'cross-platform'
}
}
});
![Dengan menentukan 'hibrida' sebagai petunjuk, browser akan menampilkan dialog yang berfokus pada login lintas perangkat.](https://developer.chrome.google.cn/static/blog/passkeys-updates-chrome-129/image/cross-device.png?hl=id)
Permintaan origin terkait
Dengan Asal Terkait Permintaan, RP dapat membuat kunci sandi dapat digunakan dari beberapa domain. Membuat login terpusat dan menggunakan protokol gabungan tetap menjadi solusi yang direkomendasikan untuk di sebagian besar situs. Tetapi jika Anda memiliki beberapa domain dan penggabungan tidak mungkin dilakukan, sumber yang terkait mungkin menjadi solusi.
Semua permintaan WebAuthn harus menentukan ID pihak tepercaya (ID RP), dan semua kunci sandi
dikaitkan dengan satu ID RP. Biasanya, origin hanya dapat menentukan
ID RP berdasarkan domainnya, sehingga dalam hal ini www.example.co.uk
dapat menentukan
ID RP example.co.uk
, tetapi bukan example.com
. Dengan Asal Terkait
Permintaan, ID RP yang diklaim dapat divalidasi dengan mengambil file JSON yang dikenal
yang terletak di /.well-known/webauthn
dari domain target. Jadi example.co.uk
(dan example.in
, example.de
, dan seterusnya) semuanya dapat menggunakan ID RP dari
example.com
jika example.com
menentukannya dalam format berikut:
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"
]
}
Pelajari cara menyiapkan Permintaan Origin Terkait di Mengizinkan penggunaan ulang kunci sandi di seluruh situs dengan Asal Terkait Permintaan.
Serialisasi JSON
Objek permintaan dan respons WebAuthn memiliki beberapa kolom yang berisi data mentah data biner dalam ArrayBuffer, seperti ID kredensial, ID pengguna, atau verifikasi login. Jika sebuah situs web ingin menggunakan JSON untuk bertukar data ini dengan servernya, data harus dienkode terlebih dahulu, misalnya dengan Base64URL. Hal ini menambah kompleksitas yang lebih besar bagi developer yang ingin mulai menggunakan kunci sandi di situs mereka.
WebAuthn sekarang menawarkan API untuk diurai
PublicKeyCredentialCreationOptions
dan
PublicKeyCredentialRequestOptions
WebAuthn meminta objek langsung dari JSON, dan membuat serial
PublicKeyCredential
respons secara langsung ke JSON. Semua kolom bernilai ArrayBuffer yang membawa biner mentah
data dikonversi secara otomatis dari atau ke nilai berenkode Base64URL-nya.
API ini tersedia mulai Chrome 129.
Sebelum membuat kunci sandi, ambil file yang dienkode JSON
PublicKeyCredentialCreationOptions
dari server dan mendekodenya menggunakan
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,
});
...
Setelah membuat kunci sandi, enkode kredensial yang dihasilkan menggunakan toJSON()
agar
bahwa data itu dapat dikirim ke server.
...
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);
...
Sebelum mengautentikasi dengan kunci sandi, ambil file yang dienkode JSON
PublicKeyRequestCreationOptions
dari server dan mendekodenya menggunakan
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
});
...
Setelah melakukan autentikasi dengan kunci sandi, enkode kredensial yang dihasilkan menggunakan
toJSON()
agar dapat dikirim ke server.
...
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);
...
Pelajari lebih lanjut
Untuk mempelajari WebAuthn dan kunci sandi lebih lanjut, lihat referensi berikut: