เผยแพร่: 9 พฤษภาคม 2025, อัปเดตล่าสุด: 22 ธันวาคม 2025
พาสคีย์ให้การตรวจสอบสิทธิ์ที่ปลอดภัยจากฟิชชิง แต่การทำให้ผู้ใช้ ยอมรับฟีเจอร์เหล่านี้อาจทำให้เกิดความไม่สะดวก การสร้างพาสคีย์อัตโนมัติช่วยให้คุณ สร้างพาสคีย์สำหรับผู้ใช้ได้ในเวลาที่เหมาะสม ตราบใดที่ผู้ใช้มี รหัสผ่านที่บันทึกไว้สำหรับเว็บไซต์ของคุณอยู่แล้ว Conditional Create ซึ่งช่วยให้สร้างพาสคีย์ได้โดยอัตโนมัติ เป็นส่วนหนึ่งของข้อกำหนด WebAuthn
วิธีการทำงาน
ใช้ฟีเจอร์ WebAuthn API ที่ชื่อการสร้างแบบมีเงื่อนไขเพื่อช่วยให้ผู้ใช้ใช้พาสคีย์ได้สะดวกยิ่งขึ้น การสร้างแบบมีเงื่อนไขช่วยให้เว็บไซต์ขอ พาสคีย์สำหรับผู้ใช้ได้โดยไม่ต้องให้ผู้ใช้ดำเนินการใดๆ
โฟลว์นี้จะทำงานเมื่อตรงตามเงื่อนไขต่อไปนี้
- ผู้ใช้มีรหัสผ่านที่บันทึกไว้ในเครื่องมือจัดการรหัสผ่านเริ่มต้น
- มีการใช้รหัสผ่านเมื่อเร็วๆ นี้ โดยควรเรียกใช้ Conditional Create ทันทีหลังจากเข้าสู่ระบบที่ใช้รหัสผ่านสำเร็จ
หากตรงตามเงื่อนไขทั้ง 2 ข้อ คุณสามารถขอให้เครื่องมือจัดการรหัสผ่านสร้าง พาสคีย์สำหรับผู้ใช้ได้โดยการเรียกใช้ Conditional Create หลังจากสร้างพาสคีย์เรียบร้อยแล้ว ผู้ใช้จะได้รับการแจ้งเตือนตามโปรแกรมจัดการรหัสผ่าน
ความเข้ากันได้
Safari ใน macOS และเบราว์เซอร์ทั้งหมดใน iOS รองรับการสร้างแบบมีเงื่อนไข รวมถึง Chrome บนเดสก์ท็อปและ Chrome ใน Android
การรองรับนี้หมายความว่าฟีเจอร์จะทำงานในผู้ให้บริการพาสคีย์เริ่มต้นที่เกี่ยวข้อง ได้แก่ พวงกุญแจ iCloud (รหัสผ่าน) ใน Safari บน macOS และ iOS รวมถึงเครื่องมือจัดการรหัสผ่านบน Google ใน Chrome บนเดสก์ท็อปและ Android
เนื่องจาก iOS 18 ขึ้นไปและ Android 14 ขึ้นไปรองรับผู้ให้บริการพาสคีย์บุคคลที่สาม ไม่ว่าผู้ใช้จะใช้เบราว์เซอร์ใดก็ตาม การรองรับการสร้างแบบมีเงื่อนไข จึงขึ้นอยู่กับผู้ให้บริการพาสคีย์ หากผู้ให้บริการพาสคีย์ที่เลือกไม่รองรับการสร้างแบบมีเงื่อนไข ระบบจะไม่สร้างพาสคีย์ใหม่
ใช้การสร้างแบบมีเงื่อนไข
การสร้างพาสคีย์อัตโนมัติจะอิงตามฟีเจอร์ WebAuthn API ที่เรียกว่า
การสร้างแบบมีเงื่อนไข คำขอเหล่านี้คือคำขอ WebAuthn create() ปกติที่มีพารามิเตอร์
mediation ตั้งค่าเป็น "conditional" ซึ่งทำงานคล้ายกับการป้อนข้อความอัตโนมัติของพาสคีย์สำหรับคำขอ get()
ใช้ Conditional Create หลังจากที่ผู้ใช้ลงชื่อเข้าใช้ด้วยรหัสผ่าน การสร้างจะสำเร็จหรือไม่ขึ้นอยู่กับเครื่องมือจัดการรหัสผ่านและเงื่อนไขบางอย่าง เงื่อนไขเหล่านี้อาจแตกต่างกันไปตามเครื่องมือจัดการรหัสผ่านและอาจเปลี่ยนแปลงเมื่อเวลาผ่านไป ตัวอย่างเช่น ใน Chrome ที่มีเครื่องมือจัดการรหัสผ่านบน Google (GPM) ผู้ใช้ต้องลงชื่อเข้าใช้โดยใช้รหัสผ่านที่บันทึกไว้สำหรับเว็บไซต์เมื่อเร็วๆ นี้
หากเบราว์เซอร์สร้างพาสคีย์ได้สำเร็จ ระบบจะแสดงข้อมูลเข้าสู่ระบบ คีย์สาธารณะ ส่งข้อมูลเข้าสู่ระบบนี้ไปยังแบ็กเอนด์ เพื่อลงทะเบียนให้เสร็จสมบูรณ์และเปิดใช้การตรวจสอบสิทธิ์ในอนาคต
การตรวจหาฟีเจอร์
คุณดูได้ว่า Conditional Create พร้อมใช้งานในเบราว์เซอร์หรือไม่โดย
เรียกใช้ PublicKeyCredential.getClientCapabilities() ดูว่าออบเจ็กต์ที่ส่งคืนมี true สำหรับพร็อพเพอร์ตี้ conditionalCreate หรือไม่
if (window.PublicKeyCredential && PublicKeyCredential.getClientCapabilities) {
const capabilities = await PublicKeyCredential.getClientCapabilities();
if (capabilities.conditionalCreate) {
// Conditional create is available
}
}
หาก getClientCapabilities ไม่พร้อมใช้งาน การสร้างแบบมีเงื่อนไขก็จะไม่พร้อมใช้งานด้วย
สร้างพาสคีย์แบบมีเงื่อนไข
หากต้องการสร้างพาสคีย์โดยอัตโนมัติ ให้เรียกใช้
navigator.credentials.create() แต่ใช้ mediation: "conditional" ดังนี้
const cred = await navigator.credentials.create({
publicKey: options,
// Request conditional creation
mediation: 'conditional'
});
คุณควรใช้การสร้างพาสคีย์อัตโนมัติทันทีหลังจากที่ผู้ใช้ลงชื่อเข้าใช้ เพื่อให้มีโอกาสมากที่สุดที่จะเป็นไปตามเกณฑ์ของเครื่องมือจัดการรหัสผ่านสำหรับการสร้าง อัตโนมัติ
คุณสามารถส่งข้อมูลเข้าสู่ระบบคีย์สาธารณะที่ได้ไปยังเซิร์ฟเวอร์เพื่อยืนยันและลงทะเบียนพาสคีย์ ตรวจสอบว่าผู้ใช้ลงชื่อเข้าใช้ในเซิร์ฟเวอร์แล้ว
คำเตือน
การสร้างแบบมีเงื่อนไขนั้นไม่ได้ใช้งานยาก แต่มีข้อควรระวังหลายประการเมื่อผสานรวมฟีเจอร์นี้เข้ากับระบบที่มีอยู่จริง
ไม่สนใจการแสดงข้อมูลของผู้ใช้และการยืนยันผู้ใช้ในเซิร์ฟเวอร์
การตอบกลับการลงทะเบียนจะแสดงทั้ง "User Presence" และ "User Verified" เป็น
false ดังนั้นเซิร์ฟเวอร์ควรไม่สนใจค่าสถานะเหล่านี้ในระหว่างการยืนยันข้อมูลเข้าสู่ระบบ
ยกเลิกการเรียกใช้ WebAuthn ที่กำลังดำเนินการอยู่ก่อนที่จะสร้างพาสคีย์โดยอัตโนมัติ
เมื่อ RP คาดหวังให้ผู้ใช้ลงชื่อเข้าใช้ด้วยพาสคีย์หรือรหัสผ่าน การดำเนินการรับแบบมีเงื่อนไขเป็นตัวเลือกที่ดีที่สุด ซึ่งอาจทำให้ระบบยกเลิกการเรียกใช้ conditional get ก่อนที่จะสร้างแบบมีเงื่อนไข
โดยคุณต้องใช้ AbortController และเรียกใช้ .abort()
// To abort a WebAuthn call, instantiate an AbortController.
const controller = new AbortController();
const cred = await navigator.credentials.get({
publicKey: options,
signal: controller.signal,
// Request conditional get
mediation: 'conditional'
});
// Abort the call
controller.abort();
ละเว้นข้อยกเว้นอย่างเหมาะสม
เมื่อสร้างพาสคีย์แบบมีเงื่อนไข คุณควรละเว้นข้อยกเว้นในกรณีต่อไปนี้
InvalidStateError: มีพาสคีย์อยู่ในผู้ให้บริการพาสคีย์อยู่แล้ว (อย่าลืมระบุexcludeCredentials)NotAllowedError: การสร้างพาสคีย์ไม่เป็นไปตามเงื่อนไขAbortError: ระบบยกเลิกการเรียก WebAuthn
การแสดงข้อผิดพลาดในกรณีเหล่านี้อาจทำให้ผู้ใช้สับสนเนื่องจากเบราว์เซอร์จัดการข้อผิดพลาดเหล่านี้อย่างเงียบๆ โดยจะแสดงการแจ้งเตือนเมื่อดำเนินการสำเร็จเท่านั้น และความล้มเหลวจะไม่ทริกเกอร์ข้อความที่มองเห็นได้
ส่งสัญญาณเมื่อลงทะเบียนพาสคีย์ไม่สำเร็จ
เมื่อสร้างพาสคีย์แต่ลงทะเบียนในเซิร์ฟเวอร์ไม่สำเร็จ ผู้ใช้ จะได้รับประสบการณ์การลงชื่อเข้าใช้ที่ไม่สำเร็จ ปัญหานี้อาจเกิดขึ้นเมื่อรายการพาสคีย์ไม่สอดคล้องกันระหว่างผู้ให้บริการพาสคีย์และเซิร์ฟเวอร์
หากต้องการหลีกเลี่ยงสถานการณ์ดังกล่าว ให้ใช้ Signal API เพื่อให้ข้อมูลสอดคล้องกัน
ไม่รองรับการอัปเกรดจากการลงชื่อเข้าใช้แบบไม่ใช้รหัสผ่าน
ในตอนนี้ การสร้างพาสคีย์แบบมีเงื่อนไขจะอยู่หลังการที่ผู้ใช้ ป้อนรหัสผ่านที่ถูกต้อง ซึ่งหมายความว่าวิธีการลงชื่อเข้าใช้แบบไม่มีรหัสผ่าน เช่น ลิงก์มหัศจรรย์ การยืนยันหมายเลขโทรศัพท์ หรือการรวมข้อมูลประจำตัวจะไม่เป็นไปตาม เงื่อนไข
สรุป
การสร้างพาสคีย์โดยอัตโนมัติจะช่วยเร่งการใช้พาสคีย์ในเว็บไซต์ของคุณ และช่วยให้ผู้ใช้เว็บไซต์เปลี่ยนจากรหัสผ่าน ไปใช้วิธีการตรวจสอบสิทธิ์ที่ปลอดภัยยิ่งขึ้น
ดูข้อมูลเพิ่มเติมเกี่ยวกับพาสคีย์ได้ที่การเข้าสู่ระบบแบบไม่มีรหัสผ่านด้วยพาสคีย์