Chrome 128 และ 129 เปิดตัวฟีเจอร์ใหม่ที่น่าสนใจสำหรับ WebAuthn นั่นคือ API ที่สำคัญสำหรับสร้างระบบการตรวจสอบสิทธิ์ที่ใช้พาสคีย์
- คำแนะนำ: คำแนะนำช่วยให้บุคคลที่พึ่งพา (RP) ควบคุม WebAuthn ได้ดียิ่งขึ้น UI ในเบราว์เซอร์ ซึ่งมีประโยชน์อย่างยิ่งสำหรับผู้ใช้ระดับองค์กรที่ต้องการ เพื่อใช้คีย์ความปลอดภัย
- คำขอต้นทางที่เกี่ยวข้อง: มีต้นทางที่เกี่ยวข้อง โดย RP จะทำให้พาสคีย์ใช้งานได้ในหลายโดเมน หากคุณเป็นเจ้าของหลายบัญชี ตอนนี้ คุณสามารถให้ผู้ใช้นำพาสคีย์กลับมาใช้ซ้ำในเว็บไซต์ต่างๆ ของคุณ เพื่อขจัดอุปสรรคในการลงชื่อเข้าใช้
- การทำให้เป็นอนุกรม JSON: API การทำให้เป็นอนุกรม JSON ช่วยให้คุณลดความซับซ้อนของโค้ดฟรอนท์เอนด์ของ RP ได้ด้วยตัวเลือกการเข้ารหัสและถอดรหัส และ ข้อมูลเข้าสู่ระบบที่ส่งไปยังและจาก WebAuthn API
คำแนะนำ
เมื่อใช้ hints
บุคคลที่อาศัย (RP) สามารถระบุค่ากําหนด UI สําหรับการสร้าง
พาสคีย์หรือการตรวจสอบสิทธิ์ด้วยพาสคีย์
ก่อนหน้านี้ เมื่อ RP ต้องการจํากัด Authenticator ผู้ใช้สามารถใช้เพื่อ
สร้างพาสคีย์หรือตรวจสอบสิทธิ์ โดยใช้
authenticatorSelection.authenticatorAttachment
เพื่อระบุ "platform"
หรือ
"cross-platform"
โปรแกรมเหล่านี้จะจำกัด Authenticator เป็นแพลตฟอร์มตามลำดับ
Authenticator
หรือการโรมมิ่ง
Authenticator
เมื่อใช้ hints
ข้อกำหนดนี้จะมีความยืดหยุ่นมากขึ้น
RP สามารถใช้ hints
ที่ไม่บังคับใน PublicKeyCredentialCreationOptions
หรือ
PublicKeyCredentialRequestOptions
เพื่อระบุ "security-key"
"client-device"
และ "hybrid"
ในลำดับที่ต้องการในอาร์เรย์
ต่อไปนี้เป็นตัวอย่างคำขอสร้างข้อมูลเข้าสู่ระบบ
"cross-platform"
Authenticator ที่มี "security-key"
เป็นคำแนะนำ ข้อมูลนี้จะบอก
Chrome จะแสดง UI ที่เน้นคีย์ความปลอดภัยสำหรับผู้ใช้ระดับองค์กร
const credential = await navigator.credentials.create({
publicKey: {
challenge: *****,
hints: ['security-key'],
authenticatorSelection: {
authenticatorAttachment: 'cross-platform'
}
}
});
![ระบุ "คีย์ความปลอดภัย" เบราว์เซอร์จะแสดงกล่องโต้ตอบที่โฟกัสคีย์ความปลอดภัย](https://developer.chrome.com/static/blog/passkeys-updates-chrome-129/image/security-key.png?hl=th)
เมื่อ RP ต้องการให้ความสำคัญกับสถานการณ์การยืนยันข้ามอุปกรณ์ ก็สามารถ
ส่งคำขอการตรวจสอบสิทธิ์ที่ต้องการเครื่องมือตรวจสอบสิทธิ์ "cross-platform"
โดยมี "hybrid"
เป็นคำแนะนำ
const credential = await navigator.credentials.create({
publicKey: {
challenge: *****,
residentKey: true,
hints: ['hybrid']
authenticatorSelection: {
authenticatorAttachment: 'cross-platform'
}
}
});
![ระบุ "ไฮบริด" เบราว์เซอร์จะแสดงกล่องโต้ตอบที่มุ่งเน้นการเข้าสู่ระบบจากหลายอุปกรณ์](https://developer.chrome.com/static/blog/passkeys-updates-chrome-129/image/cross-device.png?hl=th)
คำขอต้นทางที่เกี่ยวข้อง
มีต้นกำเนิดที่เกี่ยวข้อง คำขอ, RP สามารถ ทำให้พาสคีย์ใช้งานได้จากหลายโดเมน การสร้างการเข้าสู่ระบบแบบรวมศูนย์ และการใช้โปรโตคอลการรวมศูนย์ยังคงเป็นโซลูชันที่แนะนำสำหรับ เว็บไซต์ส่วนใหญ่ แต่ถ้าคุณเป็นเจ้าของโดเมนหลายโดเมนและการรวมศูนย์ไม่สามารถทำได้ ต้นทางที่เกี่ยวข้องอาจเป็นทางออกที่ดี
คำขอ WebAuthn ทั้งหมดต้องระบุรหัสบุคคลที่อ้างอิง (รหัส RP) และพาสคีย์ทั้งหมด
เชื่อมโยงกับรหัสของ RP เดียว แต่เดิม ต้นทางจะระบุได้เพียง
รหัส RP ที่อิงตามโดเมน ดังนั้นในกรณีดังกล่าว www.example.co.uk
จะระบุได้
รหัส RP ของ example.co.uk
แต่ไม่ใช่ example.com
มีต้นทางที่เกี่ยวข้อง
คำขอต่างๆ สามารถตรวจสอบรหัส RP ที่มีการอ้างสิทธิ์ได้โดยการดึงข้อมูลไฟล์ JSON ที่รู้จัก
ซึ่งอยู่ที่ /.well-known/webauthn
จากโดเมนเป้าหมาย ฉะนั้น example.co.uk
(และ example.in
, example.de
และอื่นๆ) สามารถใช้รหัส RP ของ
example.com
หาก example.com
ระบุในรูปแบบต่อไปนี้
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"
]
}
ดูวิธีตั้งค่าคำขอต้นทางที่เกี่ยวข้องได้ที่อนุญาตให้ใช้พาสคีย์ซ้ำในอุปกรณ์ เว็บไซต์ที่มีต้นทางที่เกี่ยวข้อง คำขอ
การเรียงลำดับ JSON
ออบเจ็กต์คำขอและการตอบกลับ WebAuthn มีช่องหลายช่องที่มีข้อมูลดิบ ข้อมูลไบนารีใน ArrayBuffer เช่น รหัสข้อมูลเข้าสู่ระบบ รหัสผู้ใช้ หรือระบบทดสอบ หากเว็บไซต์ต้องการใช้ JSON เพื่อแลกเปลี่ยนข้อมูลนี้กับเซิร์ฟเวอร์ของเว็บไซต์ ไบนารี ข้อมูลจะต้องเข้ารหัสก่อน เช่น ด้วย Base64URL การดำเนินการนี้จะเพิ่มโดยไม่จำเป็น ความซับซ้อนสำหรับนักพัฒนาซอฟต์แวร์ที่ต้องการเริ่มใช้พาสคีย์ในเว็บไซต์ของตน
ตอนนี้ WebAuthn มี API สำหรับแยกวิเคราะห์แล้ว
PublicKeyCredentialCreationOptions
และ
PublicKeyCredentialRequestOptions
WebAuthn ขอออบเจ็กต์จาก JSON โดยตรง และจัดลำดับ
PublicKeyCredential
ตอบกลับใน JSON โดยตรง ฟิลด์ทั้งหมดที่มีค่า ArrayBuffer ซึ่งมีไบนารีดิบ
ข้อมูลจะถูกแปลงจากหรือเป็นค่าที่เข้ารหัส Base64URL โดยอัตโนมัติ
API เหล่านี้มีอยู่ใน Chrome 129
ก่อนสร้างพาสคีย์ ให้ดึงข้อมูล JSON ที่เข้ารหัส
ออบเจ็กต์ PublicKeyCredentialCreationOptions
รายการจากเซิร์ฟเวอร์และถอดรหัสโดยใช้
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,
});
...
หลังจากสร้างพาสคีย์แล้ว ให้เข้ารหัสข้อมูลเข้าสู่ระบบที่ได้โดยใช้ toJSON()
เพื่อให้
ให้ส่งไปยังเซิร์ฟเวอร์ได้
...
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);
...
ให้ดึงข้อมูลที่เข้ารหัส JSON ก่อนการตรวจสอบสิทธิ์ด้วยพาสคีย์
PublicKeyRequestCreationOptions
จากเซิร์ฟเวอร์และถอดรหัสโดยใช้
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
});
...
หลังจากตรวจสอบสิทธิ์ด้วยพาสคีย์แล้ว ให้เข้ารหัสข้อมูลเข้าสู่ระบบที่ได้โดยใช้
toJSON()
เพื่อให้ส่งไปยังเซิร์ฟเวอร์ได้
...
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);
...
ดูข้อมูลเพิ่มเติม
ดูข้อมูลเพิ่มเติมเกี่ยวกับ WebAuthn และพาสคีย์ได้จากแหล่งข้อมูลต่อไปนี้