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

Eiji Kitamura

เผยแพร่: 9 พฤษภาคม 2025

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

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

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

โฟลว์นี้จะทำงานได้เมื่อตรงตามเงื่อนไขต่อไปนี้

• ผู้ใช้มีรหัสผ่านที่บันทึกไว้ในเครื่องมือจัดการรหัสผ่านเริ่มต้น
• มีการใช้รหัสผ่านเมื่อเร็วๆ นี้ โดยควรเรียกใช้ Conditional Create ทันทีหลังจากเข้าสู่ระบบที่ใช้รหัสผ่านสำเร็จ

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

ความเข้ากันได้

Safari ใน macOS และเบราว์เซอร์ทั้งหมดใน iOS รองรับการสร้างแบบมีเงื่อนไข รวมถึง Chrome บนเดสก์ท็อปและ Chrome บน Android

ใช้การสร้างแบบมีเงื่อนไข

การสร้างพาสคีย์อัตโนมัติจะอิงตามฟีเจอร์ API ของ WebAuthn ที่เรียกว่า การสร้างแบบมีเงื่อนไข คำขอเหล่านี้คือคำขอ 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'
});

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

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

คำเตือน

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

ไม่สนใจการแสดงข้อมูลของผู้ใช้และการยืนยันผู้ใช้ในเซิร์ฟเวอร์

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

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

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

สรุป

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

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