การตรวจสอบการตรวจหาฟีเจอร์ Credential Management 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 browser<s**
table class="properties with-head><ing-t><in>t<&q><uot>;<tb>odytr
th/th
thPasswordCredential / Feder<ate>d<Cr>edential/th
thPubli<cKe>y<Cre><de><nt>ial/th
</tr><tr>thChrome
/<tht><dA>vailable
/tdtdI<n d><eve><lo><pm>ent
/td/<trt><rt>hFir<efo><x<>/span>
/thtdN/A
/tdtdAiming <to ><shi><p ><on> 60
/<td/><tr>trth<Edg><e<>/span>
/thtdN/A
/tdtdImp<lemented with a href="https://blogs.windows.com/msedgedev/2016/04/12/a-world-without-passwords-windows-hello->in-micros<of>t-edge/"older API/a. New API (navigator.cr<ede><nti><als) c><oming >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]