สรุป
WebAuthn ช่วยเพิ่มความปลอดภัยด้วยการนำการตรวจสอบสิทธิ์ที่ใช้ข้อมูลเข้าสู่ระบบแบบคีย์สาธารณะไปยังเว็บ และเร็วๆ นี้ระบบจะรองรับใน Chrome, Firefox และ Edge (พร้อมข้อกำหนดที่อัปเดตแล้ว)
โดยจะเพิ่มออบเจ็กต์ Credential
ประเภทใหม่ที่อาจทําให้เว็บไซต์ที่ใช้ Credential Management API ใช้งานไม่ได้ โดยไม่มีการตรวจหาประเภทข้อมูลเข้าสู่ระบบที่ฟีเจอร์กําลังใช้โดยฟีเจอร์
หากคุณกำลังทำเช่นนี้อยู่เพื่อตรวจหาฟีเจอร์
if (navigator.credentials && navigator.credentials.preventSilentAccess) {
// use CM API
}
ทำเหล่านี้แทน
if (window.PasswordCredential || window.FederatedCredential) {
// Call navigator.credentials.get() to retrieve stored
// PasswordCredentials or FederatedCredentials.
}
if (window.PasswordCredential) {
// Get/Store PasswordCredential
}
if (window.FederatedCredential) {
// Get/Store FederatedCredential
}
if (navigator.credentials && navigator.credentials.preventSilentAccess) {
// Call navigator.credentials.preventSilentAccess()
}
ดูการเปลี่ยนแปลงโค้ดตัวอย่างเป็นตัวอย่าง
อ่านต่อเพื่อดูข้อมูลเพิ่มเติม
Credential Management API คืออะไร
Credential Management API (CM API) ช่วยให้เว็บไซต์เข้าถึงที่เก็บข้อมูลเข้าสู่ระบบของ User Agent แบบเป็นโปรแกรมได้เพื่อจัดเก็บ/ดึงข้อมูลเข้าสู่ระบบของผู้ใช้สำหรับต้นทางที่เรียกใช้
API พื้นฐาน ได้แก่
navigator.credentials.get()
navigator.credentials.store()
navigator.credentials.create()
navigator.credentials.preventSilentAccess()
ข้อกำหนดเดิมของ CM API กำหนดข้อมูลเข้าสู่ระบบ 2 ประเภทดังนี้
PasswordCredential
FederatedCredential
PasswordCredential
เป็นข้อมูลเข้าสู่ระบบที่มี ID และรหัสผ่านของผู้ใช้
FederatedCredential
คือข้อมูลเข้าสู่ระบบที่มีรหัสของผู้ใช้และสตริงที่แสดงถึงผู้ให้บริการข้อมูลประจำตัว
เมื่อมีข้อมูลเข้าสู่ระบบ 2 รายการนี้ เว็บไซต์จะทำสิ่งต่อไปนี้ได้
- อนุญาตให้ผู้ใช้ลงชื่อเข้าใช้ด้วยข้อมูลรับรองที่ใช้รหัสผ่านหรือแบบสมาพันธ์ที่บันทึกไว้ก่อนหน้านี้ทันทีที่ลงชื่อเข้าใช้ (ลงชื่อเข้าใช้อัตโนมัติ)
- จัดเก็บข้อมูลเข้าสู่ระบบแบบสมาพันธ์หรือรหัสผ่านที่ผู้ใช้ลงชื่อเข้าใช้ไว้
- อัปเดตข้อมูลเข้าสู่ระบบของผู้ใช้ให้เป็นปัจจุบันอยู่เสมอ (เช่น หลังจากเปลี่ยนรหัสผ่าน)
WebAuthn คืออะไร
WebAuthn (การตรวจสอบสิทธิ์เว็บ) เพิ่มข้อมูลเข้าสู่ระบบคีย์สาธารณะลงใน CM API ตัวอย่างเช่น ช่วยให้เว็บไซต์มีวิธีมาตรฐานในการใช้การตรวจสอบสิทธิ์ด้วยปัจจัยที่สองโดยใช้อุปกรณ์ Authenticator ที่เป็นไปตามข้อกำหนดของ FIDO 2.0
ในระดับทางเทคนิค WebAuthn จะขยายการใช้งาน CM API ด้วยอินเทอร์เฟซ PublicKeyCredential
ปัญหาคืออะไร
ก่อนหน้านี้เราได้แนะนำให้นักพัฒนาแอปใช้ฟีเจอร์สำหรับตรวจหา CM API โดยใช้โค้ดต่อไปนี้
if (navigator.credentials && navigator.credentials.preventSilentAccess) {
// Use CM API
}
But as you can see from the descriptions above, the `navigator.credentials` is
now expanded to support public-key credentials in addition to password
credentials and federated credentials.
The problem is that user agents don't necessarily support all kinds of
credentials. If you continue feature detect using `navigator.credentials`, your
website may break when you are using a certain credential type not supported by
the browser.
**Supported credential types by browsers**
<table class="properties with-heading-tint"><tbody><tr>
<th></th>
<th>PasswordCredential / FederatedCredential</th>
<th>PublicKeyCredential</th>
</tr><tr><th>Chrome
</th><td>Available
</td><td>In development
</td></tr><tr><th>Firefox
</th><td>N/A
</td><td>Aiming to ship on 60
</td></tr><tr><th>Edge
</th><td>N/A
</td><td>Implemented with <a href="https://blogs.windows.com/msedgedev/2016/04/12/a-world-without-passwords-windows-hello-in-microsoft-edge/">older API</a>. New API (navigator.credentials) coming soon.
</td></tr></tbody></table>
## The solution
You can avoid this by modifying feature detection code as follows to explicitly
test for the credential type that you intend to use.
```js
if (window.PasswordCredential || window.FederatedCredential) {
// Call navigator.credentials.get() to retrieve stored
// PasswordCredentials or FederatedCredentials.
}
if (window.PasswordCredential) {
// Get/Store PasswordCredential
}
if (window.FederatedCredential) {
// Get/Store FederatedCredential
}
if (navigator.credentials && navigator.credentials.preventSilentAccess) {
// Call navigator.credentials.preventSilentAccess()
}
ดูการเปลี่ยนแปลงจริงที่เกิดขึ้นกับโค้ดตัวอย่างเป็นตัวอย่าง
วิธีตรวจหา PublicKeyCredential
ที่เพิ่มใน WebAuthn เพื่อใช้เป็นข้อมูลอ้างอิง
if (window.PublicKeyCredential) {
// use CM API with PublicKeyCredential added in the WebAuthn spec
}
ไทม์ไลน์
การใช้งาน WebAuthn แรกสุดที่ใช้ได้คือ Firefox และวางแผนว่าจะเสถียรประมาณต้นเดือนพฤษภาคม 2018
สุดท้าย
หากมีข้อสงสัย โปรดส่งไปที่ @agektmr หรือ agektmr@chromium.org