สร้างพาสคีย์สำหรับการเข้าสู่ระบบแบบไม่ใช้รหัสผ่าน

พาสคีย์ช่วยให้บัญชีผู้ใช้ปลอดภัยขึ้น ใช้งานง่ายขึ้น และสะดวกขึ้น

เผยแพร่: 12 ตุลาคม 2022, อัปเดตล่าสุด: 09 เมษายน 2026

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

พาสคีย์จะซิงค์ในอุปกรณ์ต่างๆ โดยใช้ผู้ให้บริการพาสคีย์ เช่น เครื่องมือจัดการรหัสผ่านบน Google และพวงกุญแจ iCloud

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

วิธีการทำงานของการสร้างพาสคีย์

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

คุณอาจขอให้ผู้ใช้สร้างพาสคีย์ในสถานการณ์ใดสถานการณ์หนึ่งต่อไปนี้

  • ระหว่างหรือหลังจากลงชื่อสมัครใช้
  • หลังจากลงชื่อเข้าใช้
  • หลังจากลงชื่อเข้าใช้โดยใช้พาสคีย์จากอุปกรณ์อื่น (นั่นคือ authenticatorAttachment คือ cross-platform)
  • ในหน้าเฉพาะที่ผู้ใช้จัดการพาสคีย์ได้

หากต้องการสร้างพาสคีย์ คุณต้องใช้ WebAuthn API

ขั้นตอนการลงทะเบียนพาสคีย์มี 4 องค์ประกอบ ดังนี้

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

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

  • บัญชีผู้ใช้ได้รับการยืนยันผ่านวิธีการที่ปลอดภัย (เช่น การยืนยันทางอีเมล การยืนยันทางโทรศัพท์ หรือการรวมข้อมูลประจำตัว) ภายในระยะเวลาอันสั้น

  • ส่วนหน้าและส่วนหลังสามารถสื่อสารกันได้อย่างปลอดภัยเพื่อแลกเปลี่ยนข้อมูลข้อมูลเข้าสู่ระบบ

  • เบราว์เซอร์รองรับ WebAuthn และการสร้างพาสคีย์

เราจะแสดงวิธีตรวจสอบส่วนใหญ่ในส่วนต่อไปนี้

เมื่อระบบเป็นไปตามเงื่อนไขนี้ ระบบจะดำเนินการต่อไปนี้เพื่อสร้างพาสคีย์

  1. ระบบจะทริกเกอร์กระบวนการสร้างพาสคีย์เมื่อผู้ใช้เริ่มดำเนินการ (เช่น คลิกปุ่ม "สร้างพาสคีย์" ในหน้าการจัดการพาสคีย์หรือหลังจากลงทะเบียนเสร็จสิ้น)
  2. ส่วนหน้าจะขอข้อมูลเข้าสู่ระบบที่จำเป็นจากแบ็กเอนด์ ซึ่งรวมถึงข้อมูลผู้ใช้ ภารกิจ และรหัสข้อมูลเข้าสู่ระบบเพื่อป้องกัน รายการที่ซ้ำกัน
  3. ส่วนหน้าจะเรียกใช้ navigator.credentials.create() เพื่อแจ้งให้ผู้ให้บริการพาสคีย์ของอุปกรณ์สร้างพาสคีย์โดยใช้ข้อมูลจากส่วนหลัง โปรดทราบว่าการเรียกนี้จะแสดงผลเป็น Promise
  4. อุปกรณ์ของผู้ใช้จะตรวจสอบสิทธิ์ผู้ใช้โดยใช้วิธีการไบโอเมตริก, PIN หรือรูปแบบเพื่อสร้างพาสคีย์
  5. ผู้ให้บริการพาสคีย์จะสร้างพาสคีย์และส่งคืนข้อมูลเข้าสู่ระบบคีย์สาธารณะไปยังส่วนหน้า เพื่อแก้ไข Promise
  6. ส่วนหน้าจะส่งข้อมูลเข้าสู่ระบบคีย์สาธารณะที่สร้างขึ้นไปยังส่วนหลัง
  7. แบ็กเอนด์จะจัดเก็บคีย์สาธารณะและข้อมูลสำคัญอื่นๆ สำหรับการ ตรวจสอบสิทธิ์ในอนาคต
  8. แบ็กเอนด์จะแจ้งให้ผู้ใช้ทราบ (เช่น ทางอีเมล) เพื่อยืนยัน การสร้างพาสคีย์และตรวจหาการเข้าถึงที่ไม่ได้รับอนุญาตที่อาจเกิดขึ้น

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

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

เบราว์เซอร์ส่วนใหญ่รองรับ WebAuthn โดยมีช่องโหว่เล็กๆ น้อยๆ ดูรายละเอียดความเข้ากันได้ของเบราว์เซอร์และระบบปฏิบัติการได้ที่ passkeys.dev

สร้างพาสคีย์ใหม่

หากต้องการสร้างพาสคีย์ใหม่ กระบวนการที่ฟรอนท์เอนด์ควรทำตามมีดังนี้

  1. ตรวจสอบความเข้ากันได้
  2. ดึงข้อมูลจากแบ็กเอนด์
  3. เรียกใช้ WebAuth API เพื่อสร้างพาสคีย์
  4. ส่งคีย์สาธารณะที่ส่งคืนไปยังแบ็กเอนด์
  5. บันทึกข้อมูลเข้าสู่ระบบ

ส่วนต่อไปนี้จะแสดงวิธีดำเนินการ

ตรวจสอบความเข้ากันได้

ก่อนแสดงปุ่ม "สร้างพาสคีย์ใหม่" ส่วนหน้าควรตรวจสอบว่า

  • เบราว์เซอร์รองรับ WebAuthn ด้วย PublicKeyCredential

Browser Support

  • Chrome: 67.
  • Edge: 18.
  • Firefox: 60.
  • Safari: 13.

Source

  • เบราว์เซอร์รองรับการตรวจหาความสามารถด้วย PublicKeyCredential.getClientCapabilities()

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: 135.
  • Safari: 17.4.

Source

  • เบราว์เซอร์รองรับ UI แบบมีเงื่อนไขของ WebAuthn ที่มี conditionalGet

  • อุปกรณ์รองรับเครื่องมือตรวจสอบสิทธิ์ของแพลตฟอร์ม (สร้างพาสคีย์และ ตรวจสอบสิทธิ์ในอุปกรณ์ได้) ด้วย passkeyPlatformAuthenticator

ข้อมูลโค้ดต่อไปนี้แสดงวิธีตรวจสอบความเข้ากันได้ก่อน แสดงตัวเลือกที่เกี่ยวข้องกับพาสคีย์

if (window.PublicKeyCredential && PublicKeyCredential.getClientCapabilities) {
  const capabilities = await PublicKeyCredential.getClientCapabilities();
  if (capabilities.conditionalGet === true &&
      capabilities.passkeyPlatformAuthenticator === true) {
    // The browser supports passkeys and the conditional UI.
  }
}

ในตัวอย่างนี้ ปุ่มสร้างพาสคีย์ใหม่ควรแสดงเฉพาะในกรณีที่ตรงตามเงื่อนไขทั้งหมด

ดึงข้อมูลจากแบ็กเอนด์

เมื่อผู้ใช้คลิกปุ่ม ให้ดึงข้อมูลที่จำเป็นจากแบ็กเอนด์เพื่อเรียกใช้ navigator.credentials.create()

ข้อมูลโค้ดต่อไปนี้แสดงออบเจ็กต์ JSON ที่มีข้อมูลที่จำเป็นในการเรียก navigator.credentials.create()

// Example `PublicKeyCredentialCreationOptions` contents
{
  challenge: *****,
  rp: {
    name: "Example",
    id: "example.com",
  },
  user: {
    id: *****,
    name: "john78",
    displayName: "John",
  },
  pubKeyCredParams: [{
    alg: -7, type: "public-key"
  },{
    alg: -257, type: "public-key"
  }],
  excludeCredentials: [{
    id: *****,
    type: 'public-key',
    transports: ['internal'],
  }],
  authenticatorSelection: {
    authenticatorAttachment: "platform",
    requireResidentKey: true,
  }
}

คู่คีย์-ค่าในออบเจ็กต์จะมีข้อมูลต่อไปนี้

  • challenge: คำท้าที่เซิร์ฟเวอร์สร้างขึ้นใน ArrayBuffer สำหรับการลงทะเบียนนี้
  • rp.id: รหัส RP (รหัส Relying Party) โดเมน และ เว็บไซต์สามารถระบุโดเมนหรือคำต่อท้ายที่จดทะเบียนได้ เช่น หากต้นทางของ RP คือ https://login.example.com:1337 รหัส RP อาจเป็น login.example.com หรือ example.com ก็ได้ หากระบุรหัส RP เป็น example.com ผู้ใช้จะตรวจสอบสิทธิ์ใน login.example.com หรือในโดเมนย่อยใดก็ได้ใน example.com ดูข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ที่อนุญาตให้ใช้พาสคีย์ซ้ำในเว็บไซต์ของคุณ ด้วยคำขอต้นทางที่เกี่ยวข้อง
  • rp.name: ชื่อของ RP (Relying Party) เลิกใช้งานใน WebAuthn L3 แต่รวมไว้ด้วยเหตุผลด้านความเข้ากันได้
  • user.id: รหัสผู้ใช้ที่ไม่ซ้ำกันใน ArrayBuffer ซึ่งสร้างขึ้นเมื่อสร้างบัญชี โดยควรเป็นข้อมูลถาวร ซึ่งต่างจากชื่อผู้ใช้ที่อาจแก้ไขได้ รหัสผู้ใช้ ระบุบัญชี แต่ไม่ควรมีข้อมูลส่วนบุคคลที่ระบุตัวบุคคลนั้นได้ (PII) คุณอาจมีรหัสผู้ใช้อยู่ในระบบแล้ว แต่หากจำเป็น ให้สร้างรหัสผู้ใช้สำหรับพาสคีย์โดยเฉพาะเพื่อไม่ให้มี PII
  • user.name: ตัวระบุที่ไม่ซ้ำกันสำหรับบัญชีที่ผู้ใช้จะจดจำได้ เช่น อีเมลหรือชื่อผู้ใช้ ซึ่งจะแสดงในตัวเลือกบัญชี
  • user.displayName: ชื่อบัญชีที่ต้องระบุและเป็นมิตรกับผู้ใช้มากขึ้น ชื่อไม่จำเป็นต้องไม่ซ้ำกัน และอาจเป็นชื่อที่ผู้ใช้เลือก หากเว็บไซต์ไม่มีค่าที่เหมาะสม ที่จะรวมไว้ที่นี่ ให้ส่งสตริงเปล่า ซึ่งอาจแสดงใน ตัวเลือกบัญชี ทั้งนี้ขึ้นอยู่กับเบราว์เซอร์
  • pubKeyCredParams: ระบุอัลกอริทึมคีย์สาธารณะที่ RP (ผู้ให้บริการที่เชื่อถือได้) รองรับ เราขอแนะนำให้ตั้งค่าเป็น [{alg: -7, type: "public-key"},{alg: -257, type: "public-key"}] ซึ่งระบุการรองรับ ECDSA ด้วย P-256 และ RSA PKCS#1 และการรองรับเหล่านี้จะครอบคลุมอย่างสมบูรณ์
  • excludeCredentials: รายการรหัสข้อมูลเข้าสู่ระบบที่ลงทะเบียนแล้ว ป้องกันการลงทะเบียนอุปกรณ์เดียวกัน 2 ครั้งโดยแสดงรายการรหัสข้อมูลเข้าสู่ระบบที่ลงทะเบียนแล้ว หากระบุไว้ สมาชิก transports ควรมีผลลัพธ์ของการเรียกใช้ getTransports() ในระหว่างการลงทะเบียนข้อมูลเข้าสู่ระบบแต่ละรายการ
  • authenticatorSelection.authenticatorAttachment: ตั้งค่านี้เป็น "platform" พร้อมกับ hint: ['client-device'] หากการสร้างพาสคีย์นี้ เป็นการอัปเกรดจากรหัสผ่าน เช่น ในโปรโมชัน หลังจากลงชื่อเข้าใช้ "platform" ระบุว่า RP ต้องการเครื่องมือตรวจสอบสิทธิ์ของแพลตฟอร์ม (เครื่องมือตรวจสอบสิทธิ์ที่ฝังอยู่ในอุปกรณ์แพลตฟอร์ม) ซึ่งจะไม่แสดงข้อความแจ้ง เช่น ให้เสียบคีย์ความปลอดภัยแบบ USB ผู้ใช้จะมี ตัวเลือกที่ง่ายกว่าในการสร้างพาสคีย์
  • authenticatorSelection.requireResidentKey: ตั้งค่าเป็นบูลีน true ข้อมูลเข้าสู่ระบบที่ค้นพบได้ (คีย์ที่อยู่ในอุปกรณ์) จะจัดเก็บข้อมูลผู้ใช้ไว้ในพาสคีย์และช่วยให้ผู้ใช้เลือกบัญชีได้เมื่อมีการตรวจสอบสิทธิ์
  • authenticatorSelection.userVerification: ระบุว่าการยืนยันผู้ใช้โดยใช้การล็อกหน้าจอของอุปกรณ์เป็น"required" "preferred" หรือ "discouraged" ค่าเริ่มต้นคือ "preferred" ซึ่งหมายความว่าเครื่องมือตรวจสอบสิทธิ์อาจข้ามการยืนยันผู้ใช้ ตั้งค่าเป็น "preferred" หรือละเว้นพร็อพเพอร์ตี้นี้

เราขอแนะนำให้สร้างออบเจ็กต์ในเซิร์ฟเวอร์ เข้ารหัส ArrayBuffer ด้วย Base64URL และดึงข้อมูลจากส่วนหน้า วิธีนี้ช่วยให้คุณถอดรหัส เพย์โหลดโดยใช้ PublicKeyCredential.parseCreationOptionsFromJSON() และส่งไปยัง navigator.credentials.create() ได้โดยตรง

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

// Fetch an encoded `PubicKeyCredentialCreationOptions` from the server.
const _options = await fetch('/webauthn/registerRequest');

// Deserialize and decode the `PublicKeyCredentialCreationOptions`.
const decoded_options = JSON.parse(_options);
const options = PublicKeyCredential.parseCreationOptionsFromJSON(decoded_options);
...

เรียกใช้ WebAuthn API เพื่อสร้างพาสคีย์

โทรหา navigator.credentials.create() เพื่อสร้างพาสคีย์ใหม่ API จะแสดงผล Promise โดยรอการโต้ตอบของผู้ใช้ที่แสดงกล่องโต้ตอบแบบโมดัล

Browser Support

  • Chrome: 60.
  • Edge: 18.
  • Firefox: 60.
  • Safari: 13.

Source

// Invoke WebAuthn to create a passkey.
const credential = await navigator.credentials.create({
  publicKey: options
});

ส่งข้อมูลเข้าสู่ระบบคีย์สาธารณะที่ส่งคืนไปยังแบ็กเอนด์

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

คำมั่นสัญญาอาจถูกปฏิเสธด้วยเหตุผลต่างๆ คุณจัดการข้อผิดพลาดเหล่านี้ได้ โดยตรวจสอบพร็อพเพอร์ตี้ name ของออบเจ็กต์ Error ดังนี้

  • InvalidStateError: มีพาสคีย์อยู่ในอุปกรณ์แล้ว ระบบจะไม่แสดงกล่องโต้ตอบข้อผิดพลาดต่อผู้ใช้ เว็บไซต์ไม่ควรถือว่านี่เป็น ข้อผิดพลาด ผู้ใช้ต้องการลงทะเบียนอุปกรณ์ในพื้นที่และได้ดำเนินการแล้ว
  • NotAllowedError: ผู้ใช้ยกเลิกการดำเนินการ
  • AbortError: ยกเลิกการดำเนินการแล้ว
  • ข้อยกเว้นอื่นๆ: เกิดข้อผิดพลาดที่ไม่คาดคิด เบราว์เซอร์จะแสดงกล่องโต้ตอบข้อผิดพลาดต่อผู้ใช้

ออบเจ็กต์ข้อมูลเข้าสู่ระบบคีย์สาธารณะมีพร็อพเพอร์ตี้ต่อไปนี้

  • id: รหัสที่เข้ารหัส Base64URL ของพาสคีย์ที่สร้างขึ้น รหัสนี้ช่วยให้เบราว์เซอร์ พิจารณาได้ว่ามีพาสคีย์ที่ตรงกันในอุปกรณ์เมื่อมีการตรวจสอบสิทธิ์หรือไม่ ค่านี้ต้องจัดเก็บไว้ในฐานข้อมูลในแบ็กเอนด์
  • rawId รหัสข้อมูลเข้าสู่ระบบเวอร์ชัน ArrayBuffer
  • response.clientDataJSON: ข้อมูลไคลเอ็นต์ที่เข้ารหัส ArrayBuffer
  • response.attestationObject: ออบเจ็กต์การรับรองที่เข้ารหัส ArrayBuffer ซึ่งมีข้อมูลสำคัญ เช่น รหัส RP, แฟล็ก และคีย์สาธารณะ
  • authenticatorAttachment: แสดงผล "platform" เมื่อสร้างข้อมูลเข้าสู่ระบบนี้ในอุปกรณ์ที่ใช้พาสคีย์ได้
  • type: ช่องนี้จะตั้งค่าเป็น "public-key" เสมอ

เข้ารหัสออบเจ็กต์ด้วยเมธอด .toJSON() จากนั้นทำให้เป็นอนุกรมด้วย JSON.stringify() แล้วส่งไปยังเซิร์ฟเวอร์

...

// Encode and serialize the `PublicKeyCredential`.
const _result = credential.toJSON();
const result = JSON.stringify(_result);

// Encode and send the credential to the server for verification.  
const response = await fetch('/webauthn/registerResponse', {
  method: 'post',
  credentials: 'same-origin',
  body: result
});
...

บันทึกข้อมูลเข้าสู่ระบบ

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

จากนั้นคุณจะจัดเก็บข้อมูลที่ดึงมาจากข้อมูลเข้าสู่ระบบลงในฐานข้อมูลเพื่อใช้ในอนาคตได้

รายการต่อไปนี้มีพร็อพเพอร์ตี้ที่แนะนำให้บันทึก

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

ดูวิธีการโดยละเอียดเพิ่มเติมได้ที่ การลงทะเบียนพาสคีย์ฝั่งเซิร์ฟเวอร์

ส่งสัญญาณหากการลงทะเบียนไม่สำเร็จ

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

คุณป้องกันไม่ให้เกิดกรณีดังกล่าวได้โดยส่งสัญญาณพาสคีย์ที่ไม่รู้จักไปยังผู้ให้บริการพาสคีย์โดยใช้ Signal API การเรียกใช้ PublicKeyCredential.signalUnknownCredential() ด้วยรหัส RP และรหัสข้อมูลเข้าสู่ระบบจะช่วยให้ RP แจ้งผู้ให้บริการพาสคีย์ได้ว่าระบบได้นำข้อมูลเข้าสู่ระบบที่ระบุออกแล้วหรือไม่มีข้อมูลเข้าสู่ระบบดังกล่าว ผู้ให้บริการพาสคีย์จะเป็นผู้กำหนด วิธีจัดการกับสัญญาณนี้ แต่หากระบบรองรับ คาดว่าจะมีการนำพาสคีย์ที่เชื่อมโยงออก

// Detect authentication failure due to lack of the credential
if (response.status === 404) {
  // Feature detection
  if (PublicKeyCredential.signalUnknownCredential) {
    await PublicKeyCredential.signalUnknownCredential({
      rpId: "example.com",
      credentialId: "vI0qOggiE3OT01ZRWBYz5l4MEgU0c7PmAA" // base64url encoded credential ID
    });
  } else {
    // Encourage the user to delete the passkey from the password manager nevertheless.
    ...
  }
}

หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับ Signal API โปรดอ่านรักษาพาสคีย์ให้สอดคล้องกับข้อมูลเข้าสู่ระบบในเซิร์ฟเวอร์ด้วย Signal API

ส่งการแจ้งเตือนไปยังผู้ใช้

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

เช็กลิสต์

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

แหล่งข้อมูล

ขั้นตอนถัดไป ลงชื่อเข้าใช้ด้วยพาสคีย์ผ่านการป้อนข้อความอัตโนมัติในแบบฟอร์ม