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

Eiji Kitamura

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

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

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

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

ขั้นตอนนี้จะทำงานเมื่อเป็นไปตามเงื่อนไขต่อไปนี้

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

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

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

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

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

การสร้างพาสคีย์อัตโนมัติจะอิงตามฟีเจอร์ WebAuthn API ที่เรียกว่าการสร้างแบบมีเงื่อนไข เหล่านี้คือคำขอ create() ของ WebAuthn ปกติที่มีการตั้งค่าพารามิเตอร์ mediation เป็น "conditional" ซึ่งทำงานคล้ายกับการป้อนรหัสผ่านอัตโนมัติสำหรับคำขอ get()

ใช้การสร้างแบบมีเงื่อนไขหลังจากที่ผู้ใช้ลงชื่อเข้าใช้ด้วยรหัสผ่าน การสร้างจะสำเร็จหรือไม่นั้นขึ้นอยู่กับเครื่องมือจัดการรหัสผ่านและเงื่อนไขบางอย่าง เงื่อนไขเหล่านี้อาจแตกต่างกันไปตามเครื่องมือจัดการรหัสผ่านและอาจเปลี่ยนแปลงเมื่อเวลาผ่านไป เช่น ใน Chrome ที่มีเครื่องมือจัดการรหัสผ่านบน Google (GPM) ผู้ใช้ต้องลงชื่อเข้าใช้เว็บไซต์ด้วยรหัสผ่านที่บันทึกไว้เมื่อเร็วๆ นี้

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

การตรวจหาองค์ประกอบ

คุณตรวจสอบได้ว่าการสร้างแบบมีเงื่อนไขพร้อมใช้งานในเบราว์เซอร์หรือไม่โดยเรียกใช้ 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 คาดหวังให้ผู้ใช้ลงชื่อเข้าใช้ด้วยพาสคีย์หรือรหัสผ่าน การดึงข้อมูลแบบมีเงื่อนไขเป็นตัวเลือกที่ดีที่สุด ซึ่งอาจทําให้ยกเลิกการเรียกใช้ 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 เพื่อให้ข้อมูลสอดคล้องกัน

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

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

สรุป

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

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