ช่วยให้ผู้ใช้นำพาสคีย์ไปใช้ได้อย่างราบรื่นยิ่งขึ้น

Eiji Kitamura

เผยแพร่: 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 เพื่อให้ข้อมูลสอดคล้องกัน

ไม่รองรับการอัปเกรดจากการลงชื่อเข้าใช้แบบไม่ใช้รหัสผ่าน

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

สรุป

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับพาสคีย์ได้ที่การเข้าสู่ระบบแบบไม่มีรหัสผ่านด้วยพาสคีย์