ช่วงทดลองใช้: สื่อกลาง WebAuthn ทันทีเพื่อการลงชื่อเข้าใช้ที่ราบรื่น

José Luis Zapata

เผยแพร่: 19 ส.ค. 2025

การไกล่เกลี่ย WebAuthn ทันทีเป็นความสามารถใหม่ของเว็บที่ออกแบบมาเพื่อปรับปรุง ขั้นตอนการลงชื่อเข้าใช้ของผู้ใช้ การทดลองใช้ต้นทางนี้จะให้ภาพรวมของฟีเจอร์ ประโยชน์ และรายละเอียดการติดตั้งใช้งาน พร้อมเชิญชวนให้คุณเข้าร่วมและช่วยกำหนด อนาคตของการตรวจสอบสิทธิ์บนเว็บ

ฉากหลัง

การตรวจสอบสิทธิ์บนเว็บมักจะสร้างความยุ่งยากและทำให้การลงชื่อเข้าใช้ของผู้ใช้ซับซ้อนขึ้น แม้ว่าโฟลว์ WebAuthn ที่มีอยู่จะมีประสิทธิภาพ แต่ก็มีปัญหาเกี่ยวกับปุ่ม "ลงชื่อเข้าใช้" โดยเฉพาะอย่างยิ่งเมื่อไม่มีข้อมูลเข้าสู่ระบบในทันที ซึ่งทำให้ต้องใช้รูปแบบสำรองมาตรฐาน

ฟีเจอร์ใหม่นี้จะเปิดตัวขั้นตอนการลงชื่อเข้าใช้ที่ราบรื่น ซึ่งคล้ายกับ preferImmediatelyAvailableCredentials API บนอุปกรณ์เคลื่อนที่ ซึ่งจะช่วยลดความซับซ้อนในการลงชื่อเข้าใช้ ก่อนที่จะแสดงแบบฟอร์มการเข้าสู่ระบบมาตรฐาน โดยการลดอุปสรรคและปรับปรุงประสบการณ์ของผู้ใช้

วิธีการทำงาน

การไกล่เกลี่ยทันทีของ WebAuthn ช่วยให้ประสบการณ์การลงชื่อเข้าใช้เป็นไปอย่างตรงไปตรงมาและมีประสิทธิภาพมากขึ้น ซึ่งช่วยให้เบราว์เซอร์สามารถเสนอข้อมูลเข้าสู่ระบบที่มีอยู่ได้ทันที หรือ ส่งสัญญาณว่าไม่มีข้อมูลเข้าสู่ระบบดังกล่าวได้ทันทีโดยไม่ต้องแจ้งให้มีการตรวจสอบสิทธิ์ข้ามอุปกรณ์หรือ คีย์ความปลอดภัย ซึ่งช่วยลดความซับซ้อนในการติดตั้งใช้งานสำหรับนักพัฒนาซอฟต์แวร์

immediate ประเภทสื่อกลาง

เราจะเปิดตัวimmediateประเภทสื่อกลางสำหรับคำขอnavigator.credentials.get() เมื่อตั้งค่าตัวเลือกนี้ พรอมิสจะปฏิเสธด้วย NotAllowedError หากไม่พบข้อมูลเข้าสู่ระบบที่พร้อมใช้งานในเครื่อง หากมี ข้อมูลเข้าสู่ระบบ เบราว์เซอร์จะจัดการกระบวนการตรวจสอบสิทธิ์ตาม ปกติ

ความยืดหยุ่นนี้ช่วยให้เว็บไซต์ปรับโฟลว์การลงชื่อเข้าใช้และมอบ วิธีการอื่นอย่างราบรื่นเมื่อไม่มีข้อมูลเข้าสู่ระบบในทันที

ที่สำคัญคือเบราว์เซอร์จะยังคงแสดง NotAllowedError เพื่อรักษาความเป็นส่วนตัว และความปลอดภัยของผู้ใช้ต่อไป ซึ่งจะช่วยป้องกันปัญหาต่างๆ เช่น การเก็บลายนิ้วมือหรือการติดตาม

การตรวจหาฟีเจอร์

คุณตรวจหาได้ว่าการไกล่เกลี่ยทันทีพร้อมใช้งานหรือไม่โดยใช้ PublicKeyCredential.getClientCapabilities() นักพัฒนาแอปสามารถตรวจสอบimmediateGet ความสามารถในออบเจ็กต์ capabilities ที่ส่งคืน

async function checkImmediateMediationAvailability() {
  try {
    const capabilities = await PublicKeyCredential.getClientCapabilities();
    if (capabilities.immediateGet && window.PasswordCredential) {
      console.log("Immediate Mediation with passwords supported.");
    } else if (capabilities.immediateGet) {
      console.log("Immediate Mediation without passwords supported.");
    } else { console.log("Immediate Mediation unsupported."); }
  } catch (error) {
    console.error("Error getting client capabilities:", error);
  }
}

หมายเหตุ: หากต้องการช่วยให้รองรับเบราว์เซอร์ได้กว้างขึ้น คุณสามารถใช้ Polyfill สำหรับ getClientCapabilities() ได้จากที่เก็บWebAuthn Polyfills ใน GitHub

ตัวอย่างการใช้งาน

หากต้องการใช้ API ให้เรียก navigator.credentials.get() ด้วย mediation: 'immediate' เราขอแนะนำให้ใส่ password: true ในคำขอ เนื่องจากผู้ใช้ส่วนใหญ่ น่าจะมีรหัสผ่านที่บันทึกไว้ในปัจจุบันและจะได้รับประโยชน์จากประสบการณ์การใช้งานนี้ ทันที

button.addEventListener('click', async (event) => {
  event.preventDefault();
  event.stopPropagation();
  const cred = await navigator.credentials.get({
    password: true,
    publicKey: {
      challenge, // Your server-generated challenge
      rpId: 'example.com' // Your Relying Party ID
    },
    mediation: 'immediate',
  });
});

นักพัฒนาแอปควรจัดการ NotAllowedError ในบล็อก catch เพื่อมอบประสบการณ์การลงชื่อเข้าใช้แบบสำรองที่ราบรื่น

ขั้นตอนทีละขั้นสำหรับการไกล่เกลี่ยทันที

การไกล่เกลี่ย WebAuthn ทันทีรองรับ Use Case หลัก 2 รายการเพื่อเพิ่มประสิทธิภาพการลงชื่อเข้าใช้ของผู้ใช้ ได้แก่ การเปิดใช้ปุ่ม "ลงชื่อเข้าใช้ด้วยพาสคีย์" โดยเฉพาะซึ่งจะระงับ ตัวเลือกสำรองที่ไม่ต้องการ และการอำนวยความสะดวกในขั้นตอนการลงชื่อเข้าใช้แบบไดนามิกที่แสดง ข้อมูลเข้าสู่ระบบอย่างรวดเร็วก่อนที่ผู้ใช้จะดำเนินการที่สำคัญ

กรณีการใช้งานที่ 1: ลงชื่อเข้าใช้โดยชัดแจ้งด้วยปุ่มลงชื่อเข้าใช้

สถานการณ์นี้มุ่งเน้นการจัดหาปุ่มลงชื่อเข้าใช้เฉพาะ เพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ราบรื่นโดยไม่มีข้อความแจ้งที่ไม่คาดคิดหรือการไปยังหน้าลงชื่อเข้าใช้

1. ผู้ใช้เริ่มการลงชื่อเข้าใช้: ผู้ใช้คลิกปุ่ม "ลงชื่อเข้าใช้" จากนั้นผู้รับรองจะเรียกใช้ navigator.credentials.get() ด้วย mediation: "immediate"
2. ข้อความแจ้งของเบราว์เซอร์ให้เลือกข้อมูลเข้าสู่ระบบ (หากมี): เบราว์เซอร์จะตรวจสอบพาสคีย์หรือรหัสผ่านที่ขอซึ่งพร้อมใช้งานในเครื่อง หากพบ ระบบจะแสดง UI แบบโมดัลทันทีเพื่อให้ผู้ใช้เลือกบัญชี ระบบจะจัดอันดับบัญชีตามการประทับเวลาที่ใช้ล่าสุด แล้วจึงจัดเรียงตามตัวอักษร หมายเหตุ: หากพบทั้งรหัสผ่านและพาสคีย์จากเครื่องมือจัดการรหัสผ่านหลายรายการสำหรับบัญชีเดียวกัน เบราว์เซอร์จะจัดลําดับความสําคัญของพาสคีย์ เมื่อมีพาสคีย์หลายรายการสำหรับบัญชีเดียวกันจากผู้ให้บริการที่แตกต่างกัน ระบบจะจัดลำดับความสำคัญของพาสคีย์ที่ใช้ล่าสุด
3. ลงชื่อเข้าใช้สำเร็จ: ผู้ใช้เลือกพาสคีย์จาก UI ของเบราว์เซอร์ หากเบราว์เซอร์ต้องมีการยืนยัน ระบบจะแจ้งให้ผู้ใช้ยืนยันตัวตนโดยใช้วิธีที่ตั้งค่าไว้ก่อนหน้านี้ (เช่น PIN, ข้อมูลไบโอเมตริก หรือรูปแบบ) ลงชื่อเข้าใช้สำเร็จ
4. เส้นทางการสำรอง: ไม่มีพาสคีย์หรือผู้ใช้ปิด: หากไม่มีพาสคีย์ในเครื่องหรือรหัสผ่านที่ขอสำหรับเว็บไซต์ หรือหากผู้ใช้ปิด UI ของเบราว์เซอร์ เบราว์เซอร์จะส่ง NotAllowedError ไปยังผู้ให้บริการ และเบราว์เซอร์จะไม่แสดง UI สำหรับตัวเลือกข้ามอุปกรณ์หรือคีย์ความปลอดภัย จากนั้นผู้ให้บริการจะไปยังหน้าลงชื่อเข้าใช้มาตรฐานหรือเสนอ กลไกการตรวจสอบสิทธิ์ทางเลือกได้

กรณีการใช้งานที่ 2: โฟลว์การลงชื่อเข้าใช้โดยนัยก่อนการดำเนินการของผู้ใช้

สถานการณ์นี้ช่วยให้ผู้ใช้ได้รับประสบการณ์การลงชื่อเข้าใช้เชิงรุก โดยจะเสนอพาสคีย์และรหัสผ่านก่อนที่ผู้ใช้จะดำเนินการที่ต้องใช้สถานะที่ได้รับการตรวจสอบสิทธิ์ เช่น การชำระเงิน

1. ผู้ใช้เริ่มการดำเนินการที่ต้องมีการลงชื่อเข้าใช้: ผู้ใช้คลิกปุ่มสำหรับการดำเนินการที่ต้องมีการลงชื่อเข้าใช้ (เช่น ปุ่ม "ชำระเงิน") จากนั้น Relying Party จะเรียก navigator.credentials.get() ด้วย mediation: "immediate"

2. ข้อความแจ้งของเบราว์เซอร์สำหรับการเลือกข้อมูลเข้าสู่ระบบ (หากมี): เบราว์เซอร์จะตรวจสอบพาสคีย์หรือรหัสผ่านที่ใช้ได้ในเครื่อง หากพบ ระบบจะแสดง UI แบบโมดัลทันทีเพื่อให้ผู้ใช้เลือกบัญชี ระบบจะจัดอันดับบัญชีตามการประทับเวลาที่ใช้ล่าสุด จากนั้นจะจัดเรียงตามตัวอักษรและขจัดรายการที่ซ้ำกันเพื่อ แสดงรายการเดียวต่อบัญชี หมายเหตุ: เมื่อพบทั้งรหัสผ่านและพาสคีย์จากเครื่องมือจัดการรหัสผ่านหลายรายการ สำหรับบัญชีเดียวกัน เบราว์เซอร์จะจัดลำดับความสำคัญของพาสคีย์ เมื่อมีพาสคีย์หลายรายการสำหรับบัญชีเดียวกันจากผู้ให้บริการที่แตกต่างกัน ระบบจะให้ความสำคัญกับพาสคีย์ที่ใช้ล่าสุด

3. การลงชื่อเข้าใช้สำเร็จ: ผู้ใช้เลือกข้อมูลเข้าสู่ระบบจาก UI ของเบราว์เซอร์ หากเบราว์เซอร์ต้องมีการยืนยัน ระบบจะแจ้งให้ผู้ใช้ยืนยันตัวตนโดยใช้วิธีที่ตั้งค่าไว้ก่อนหน้านี้ (เช่น PIN, ข้อมูลไบโอเมตริก หรือรูปแบบ) ลงชื่อเข้าใช้สำเร็จ

4. เส้นทางสำรอง: ไม่มีข้อมูลเข้าสู่ระบบหรือผู้ใช้ปิด: หากไม่มีข้อมูลเข้าสู่ระบบในเครื่อง สำหรับเว็บไซต์ หรือหากผู้ใช้ปิด UI ของเบราว์เซอร์ เบราว์เซอร์จะ ส่ง NotAllowedError ไปยังผู้ให้บริการ และเบราว์เซอร์ จะไม่แสดง UI ใดๆ ประสบการณ์การลงชื่อเข้าใช้ของผู้ใช้จะยังคงเดิมไม่เปลี่ยนแปลงจาก วันนี้ จากนั้นฝ่ายที่เกี่ยวข้องจะขอรายละเอียดเพิ่มเติมจากผู้ใช้ (เช่น ที่อยู่อีเมล) หรือแสดงกลไกการตรวจสอบสิทธิ์ทางเลือก เช่น แบบฟอร์มรหัสผ่าน การยืนยันทาง SMS หรือคำขอแบบโมดัล WebAuthn ที่รองรับเครื่องมือตรวจสอบสิทธิ์แบบข้ามอุปกรณ์

ข้อดี

การไกล่เกลี่ยทันทีของ WebAuthn มีข้อดีที่สำคัญหลายประการสำหรับนักพัฒนาซอฟต์แวร์และผู้ใช้ ดังนี้

• การลงชื่อเข้าใช้ที่ราบรื่น: มอบประสบการณ์การลงชื่อเข้าใช้ที่ราบรื่นและมีอุปสรรคน้อยลงสำหรับผู้ใช้ที่มีพาสคีย์หรือรหัสผ่านที่พร้อมใช้งานทันทีซึ่งบันทึกไว้ในเบราว์เซอร์หรือเครื่องมือจัดการรหัสผ่าน
• การลงชื่อเข้าใช้อัจฉริยะ: API จะเปิดใช้ขั้นตอนการลงชื่อเข้าใช้เมื่อผู้ใช้ต้องการ ทำกิจกรรมที่ต้องลงชื่อเข้าใช้ ซึ่งจะปรับเปลี่ยน อย่างชาญฉลาดตามสถานะข้อมูลเข้าสู่ระบบของผู้ใช้ โดยจะมีการตรวจสอบสิทธิ์ทันทีเมื่อเป็นไปได้ เพื่อหลีกเลี่ยงการเปลี่ยนเส้นทางที่ไม่จำเป็นและเพิ่มประสิทธิภาพขั้นตอนการทำงาน
• การจัดการข้อมูลเข้าสู่ระบบที่ดียิ่งขึ้น: เมื่อเครื่องมือจัดการรหัสผ่านหลายรายการเสนอข้อมูลเข้าสู่ระบบสำหรับบัญชีเดียวกัน เบราว์เซอร์จะเลือกตัวเลือกที่เหมาะสมที่สุดอย่างชาญฉลาด ซึ่งจะช่วยลดความซับซ้อนในการจัดการข้อมูลเข้าสู่ระบบสำหรับผู้ใช้
• ลดความสับสนของผู้ใช้: การแสดงข้อมูลเข้าสู่ระบบที่ทราบโดยตรงจะช่วยลดความสับสนของผู้ใช้ที่มักเกิดขึ้นเมื่อมีตัวเลือกการลงชื่อเข้าใช้หลายรายการหรือแบบฟอร์มมาตรฐาน
• การเปลี่ยนเส้นทางที่ราบรื่น: การเปลี่ยนเส้นทางที่ราบรื่นไปยังหน้าลงชื่อเข้าใช้มาตรฐานสำหรับผู้ใช้ที่ไม่มีข้อมูลเข้าสู่ระบบในทันที ซึ่งหมายความว่าประสบการณ์การใช้งานของผู้ใช้จะยังคงเหมือนเดิมจากขั้นตอนปัจจุบัน

ความเป็นส่วนตัวและความปลอดภัย

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

• ข้อกำหนดท่าทางสัมผัสของผู้ใช้: การเรียก API ต้องใช้ท่าทางสัมผัสของผู้ใช้ (การเปิดใช้งานของผู้ใช้ชั่วคราว) ซึ่งทำให้เว็บไซต์ทำการตรวจสอบแบบเงียบๆ และการเก็บลายนิ้วมือได้ยากขึ้น
• เซสชันส่วนตัวและเซสชันที่ไม่ระบุตัวตน: ในเซสชันส่วนตัวหรือเซสชันที่ไม่ระบุตัวตน คำขอสื่อกลางทันทีจะแสดง NotAllowedError
• ข้อจำกัดเกี่ยวกับallowCredentialsรายการ: คำขอที่ใช้ allowCredentials รายการจะทำให้เกิดNotAllowedError ซึ่งจะป้องกันไม่ให้เว็บไซต์อนุมานประวัติการโต้ตอบของผู้ใช้ หรือติดตามผู้ใช้ในเซสชันต่างๆ
• การยกเลิก: การตั้งค่าพารามิเตอร์ signal ในคำขอที่มีสื่อกลางทันทีไม่ถูกต้อง ซึ่งจะป้องกันไม่ให้เว็บไซต์ปิด UI ของเบราว์เซอร์โดยอัตโนมัติ

ลองเลย

เราขอแนะนำให้คุณทดลองใช้การไกล่เกลี่ยทันทีของ WebAuthn

สถานะใน Chrome

ฟีเจอร์นี้กำลังอยู่ในวงจรการพัฒนา Chromium โดยมีขั้นตอนดังนี้

• เดสก์ท็อป: ช่วงทดลองใช้สำหรับนักพัฒนาแอปใน Chrome 136 โดยมีช่วงทดลองใช้จากต้นทางตั้งแต่ Chrome 139 ถึง 141
• Android: ทดลองใช้สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 140

สำหรับการทดสอบในเครื่อง

วิธีทดสอบสื่อกลาง WebAuthn ทันทีในเครื่อง

1. ดาวน์โหลด Chrome 139: ดาวน์โหลดและเปิด Chrome เวอร์ชันล่าสุดบน เดสก์ท็อป
2. เปิดใช้ Flag การไกล่เกลี่ยทันที: ไปที่ chrome://flags/#web-authentication-immediate-get ในแถบที่อยู่ แล้ว เปิดใช้ Flag "Web Authentication Immediate Get"
3. เตรียมข้อมูลเข้าสู่ระบบ: ตรวจสอบว่าคุณมีพาสคีย์และรหัสผ่านที่ใช้ได้ ซึ่งบันทึกไว้
   • รหัสผ่านที่บันทึกไว้ในเครื่องมือจัดการรหัสผ่านบน Google
   • พาสคีย์ที่บันทึกไว้ในเครื่องมือจัดการรหัสผ่านบน Google (ต้องลงชื่อเข้าใช้และ ซิงค์ Chrome กับบัญชี Google), Windows Hello หรือพวงกุญแจ iCloud

สำหรับการทดสอบแบบสาธารณะ (ช่วงทดลองใช้จากต้นทาง)

วิธีทดสอบสื่อกลาง WebAuthn ทันทีด้วยช่วงทดลองใช้จากต้นทางในสภาพแวดล้อมสาธารณะ

1. ลงชื่อสมัครใช้: ไปที่หน้าช่วงทดลองใช้จากต้นทางของ Chrome แล้วลงชื่อสมัครใช้ช่วงทดลองใช้ "การไกล่เกลี่ย WebAuthn ทันที"
2. เพิ่มโทเค็นลงในส่วนหัว HTTP: ใส่โทเค็นทดลองใช้แหล่งที่มาที่ได้รับในส่วนหัว HTTP ของเว็บไซต์ HTML Origin-Trial: [YOUR_TRIAL_TOKEN]

หมายเหตุ: คุณยังระบุโทเค็นแบบเป็นโปรแกรมด้วย JavaScript ได้ด้วย

สถานการณ์การทดสอบ

เรามีข้อมูลอ้างอิงในการติดตั้งใช้งานและขอแนะนำให้คุณสร้างต้นแบบของคุณเองเพื่อทดสอบสถานการณ์ต่างๆ

• เดโมอ้างอิง: คุณลองใช้การติดตั้งใช้งานอ้างอิงได้ที่ https://deephand.github.io/webauthn-immediate-demo/
  • ติดตั้งใช้งานต้นแบบ: เมื่อติดตั้งใช้งานต้นแบบในเว็บไซต์ โปรดตรวจสอบว่าคุณทําการเรียก navigator.credentials.get() ด้วย mediation: 'immediate' หลังจากที่ผู้ใช้คลิก (เช่น ปุ่ม "ลงชื่อเข้าใช้" หรือการโต้ตอบใดๆ ที่กําหนดให้ผู้ใช้ต้องลงชื่อเข้าใช้)
• โฟลว์ 1: ลงชื่อเข้าใช้โดยไม่มีรหัสผ่านหรือพาสคีย์: หากไม่มีพาสคีย์หรือรหัสผ่านสำหรับเว็บไซต์ การคลิก "ลงชื่อเข้าใช้" จะนำคุณไปยังหน้าลงชื่อเข้าใช้มาตรฐานโดยตรง โดยไม่มี UI ของเบราว์เซอร์ปรากฏขึ้น
• ขั้นตอนที่ 2: ลงชื่อเข้าใช้ด้วยพาสคีย์ในเครื่องที่พร้อมใช้งานทันที: หากคุณมี พาสคีย์ที่บันทึกไว้สำหรับเว็บไซต์ การคลิก "ลงชื่อเข้าใช้" จะทริกเกอร์ UI การไกล่เกลี่ยทันที ซึ่งจะแสดงพาสคีย์ให้เลือก
• ขั้นตอนที่ 3: ลงชื่อเข้าใช้ด้วยพาสคีย์หรือรหัสผ่านในเครื่อง: หากคุณบันทึกทั้งพาสคีย์และรหัสผ่านไว้ ให้เปิดใช้ตัวเลือก "ขอรหัสผ่าน" (โดยการตั้งค่า password: true ในโค้ด) การคลิก "ลงชื่อเข้าใช้" ควรแสดงทั้งตัวเลือกพาสคีย์และรหัสผ่านใน UI ของสื่อกลางทันที