การตรวจสอบการตรวจหาฟีเจอร์ API การจัดการข้อมูลเข้าสู่ระบบ

Eiji Kitamura

สรุป

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()
}

ดูการเปลี่ยนแปลงที่ทำกับโค้ดตัวอย่าง

อ่านต่อเพื่อดูข้อมูลเพิ่มเติม

หมายเหตุ: หากคุณใช้ข้อมูลประจำตัวของ Google เป็นช่องทางหลักในการลงชื่อเข้าใช้ของผู้ใช้ ให้ลองใช้ไลบรารี JavaScript สำหรับการลงชื่อสมัครใช้ด้วยการแตะครั้งเดียวและการลงชื่อเข้าใช้อัตโนมัติที่สร้างขึ้นจาก Credential Management API โดยรวมการลงชื่อเข้าใช้ด้วย Google กับการลงชื่อเข้าใช้ด้วยรหัสผ่านไว้ในการเรียก API รายการเดียว และเพิ่มการรองรับการสร้างบัญชีด้วยการแตะเพียงครั้งเดียว

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 คือข้อมูลเข้าสู่ระบบที่มีรหัสและรหัสผ่านของผู้ใช้ FederatedCredential คือข้อมูลเข้าสู่ระบบที่มีรหัสผู้ใช้และสตริงที่แสดงถึงผู้ให้บริการข้อมูลประจำตัว

ข้อมูลเข้าสู่ระบบ 2 รายการนี้ช่วยให้เว็บไซต์ทําสิ่งต่อไปนี้ได้

• อนุญาตให้ผู้ใช้ลงชื่อเข้าใช้ด้วยข้อมูลเข้าสู่ระบบแบบรวมศูนย์หรือแบบใช้รหัสผ่านที่บันทึกไว้ก่อนหน้านี้ทันทีที่เข้าสู่ระบบ (ลงชื่อเข้าใช้อัตโนมัติ)
• จัดเก็บข้อมูลเข้าสู่ระบบแบบใช้รหัสผ่านหรือแบบรวมศูนย์ที่ผู้ใช้ลงชื่อเข้าใช้ด้วย
• อัปเดตข้อมูลเข้าสู่ระบบของผู้ใช้ให้เป็นข้อมูลล่าสุดเสมอ (เช่น หลังจากเปลี่ยนรหัสผ่าน)

WebAuthn คืออะไร

WebAuthn (การตรวจสอบสิทธิ์บนเว็บ) จะเพิ่มข้อมูลเข้าสู่ระบบคีย์สาธารณะลงใน CM API เช่น มาตรฐานนี้ช่วยให้เว็บไซต์มีวิธีมาตรฐานในการใช้งานการตรวจสอบสิทธิ์จากปัจจัยที่สองโดยใช้อุปกรณ์ตรวจสอบสิทธิ์ที่เป็นไปตามข้อกำหนด 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 หรือ [e-mail]