สร้างประสบการณ์การลงชื่อเข้าใช้ที่ใช้ประโยชน์จากพาสคีย์ในขณะที่ยังรองรับ ผู้ใช้รหัสผ่านที่มีอยู่
คู่มือนี้อธิบายวิธีใช้การป้อนข้อความอัตโนมัติในแบบฟอร์มเพื่อให้ผู้ใช้ลงชื่อเข้าใช้ด้วยพาสคีย์ควบคู่ไปกับรหัสผ่าน การใช้การป้อนข้อความอัตโนมัติในแบบฟอร์มจะช่วยสร้างประสบการณ์การลงชื่อเข้าใช้แบบรวม ซึ่งจะช่วยลดความซับซ้อน ในการเปลี่ยนจากรหัสผ่านไปใช้วิธีการตรวจสอบสิทธิ์ด้วยพาสคีย์ที่ปลอดภัยและใช้งานง่ายยิ่งขึ้น
ดูวิธีใช้ UI แบบมีเงื่อนไขของ WebAuthn เพื่อรองรับทั้งผู้ใช้พาสคีย์และผู้ใช้รหัสผ่านโดยลดอุปสรรคในแบบฟอร์มลงชื่อเข้าใช้ที่มีอยู่ให้เหลือน้อยที่สุด
เหตุใดจึงควรใช้การป้อนข้อความอัตโนมัติในแบบฟอร์มเพื่อลงชื่อเข้าใช้ด้วยพาสคีย์
พาสคีย์ช่วยให้ผู้ใช้ลงชื่อเข้าใช้เว็บไซต์โดยใช้ลายนิ้วมือ ใบหน้า หรือ PIN ของอุปกรณ์
หากผู้ใช้ทุกคนมีพาสคีย์ ขั้นตอนการตรวจสอบสิทธิ์ก็อาจเป็นปุ่มลงชื่อเข้าใช้เพียงครั้งเดียว การแตะปุ่มจะช่วยให้ผู้ใช้ยืนยันบัญชีด้วย การล็อกหน้าจอและลงชื่อเข้าใช้ได้โดยตรง
อย่างไรก็ตาม การเปลี่ยนจากรหัสผ่านเป็นพาสคีย์ก็มีข้อท้าทาย เว็บไซต์ ต้องรองรับทั้งผู้ใช้รหัสผ่านและพาสคีย์ในช่วงนี้ การคาดหวังให้ผู้ใช้จดจำว่าเว็บไซต์ใดใช้พาสคีย์และขอให้ผู้ใช้เลือกวิธีการลงชื่อเข้าใช้ตั้งแต่แรกจะทำให้ผู้ใช้ได้รับประสบการณ์ในการใช้งานที่ไม่ดี
พาสคีย์ยังเป็นเทคโนโลยีใหม่ และการอธิบายให้เข้าใจอย่างชัดเจนอาจเป็นเรื่องยาก การใช้อินเทอร์เฟซการป้อนข้อความอัตโนมัติที่คุ้นเคยจะช่วยแก้ปัญหาทั้ง ความท้าทายในการเปลี่ยนผ่านและความจำเป็นที่ผู้ใช้ต้องคุ้นเคย
ใช้ UI ตามเงื่อนไข
หากต้องการรองรับทั้งผู้ใช้พาสคีย์และรหัสผ่านอย่างมีประสิทธิภาพ ให้รวมพาสคีย์ไว้ในคำแนะนำการป้อนอัตโนมัติของแบบฟอร์ม แนวทางนี้ ใช้UI แบบมีเงื่อนไข ซึ่งเป็นฟีเจอร์ของมาตรฐาน WebAuthn
เมื่อผู้ใช้โฟกัสที่ช่องป้อนข้อมูลชื่อผู้ใช้ กล่องโต้ตอบการป้อนข้อความอัตโนมัติจะปรากฏขึ้น พร้อมแนะนำพาสคีย์ที่จัดเก็บไว้ควบคู่กับรหัสผ่านที่บันทึกไว้ ผู้ใช้สามารถเลือกพาสคีย์หรือรหัสผ่าน แล้วลงชื่อเข้าใช้โดยใช้การล็อกหน้าจอของอุปกรณ์หากเลือกพาสคีย์
ซึ่งจะช่วยให้ผู้ใช้ลงชื่อเข้าใช้เว็บไซต์ของคุณด้วยแบบฟอร์มลงชื่อเข้าใช้ที่มีอยู่ได้ แต่จะมีประโยชน์ด้านความปลอดภัยเพิ่มเติมจากพาสคีย์ หากผู้ใช้มีพาสคีย์
วิธีการทำงานของการตรวจสอบสิทธิ์ด้วยพาสคีย์
หากต้องการตรวจสอบสิทธิ์ด้วยพาสคีย์ ให้ใช้ WebAuthn API
องค์ประกอบ 4 อย่างในขั้นตอนการตรวจสอบสิทธิ์ด้วยพาสคีย์มีดังนี้
- แบ็กเอนด์: จัดเก็บรายละเอียดบัญชีผู้ใช้ รวมถึงคีย์สาธารณะ
- ฟรอนท์เอนด์: สื่อสารกับเบราว์เซอร์และดึงข้อมูลที่จำเป็น จากแบ็กเอนด์
- เบราว์เซอร์: เรียกใช้ JavaScript และโต้ตอบกับ WebAuthn API
- ผู้ให้บริการพาสคีย์: สร้างและจัดเก็บพาสคีย์ โดยปกติแล้วจะเป็น เครื่องมือจัดการรหัสผ่าน เช่น เครื่องมือจัดการรหัสผ่านบน Google หรือคีย์ความปลอดภัย
กระบวนการตรวจสอบสิทธิ์ด้วยพาสคีย์เป็นไปตามขั้นตอนต่อไปนี้
- ผู้ใช้ไปที่หน้าลงชื่อเข้าใช้ และส่วนหน้าจะขอการท้าทายการตรวจสอบสิทธิ์จากส่วนหลัง
- แบ็กเอนด์จะสร้างและแสดงคำท้า WebAuthn ที่เชื่อมโยง กับบัญชีของผู้ใช้
- ส่วนหน้าเรียกใช้
navigator.credentials.get()พร้อมกับคำท้า เพื่อเริ่มการตรวจสอบสิทธิ์โดยใช้เบราว์เซอร์ - เบราว์เซอร์ที่โต้ตอบกับผู้ให้บริการพาสคีย์จะแจ้งให้ผู้ใช้เลือกพาสคีย์ (มักใช้กล่องโต้ตอบการป้อนข้อความอัตโนมัติที่ทริกเกอร์โดยการโฟกัสช่องลงชื่อเข้าใช้) และยืนยันตัวตนโดยใช้การล็อกหน้าจอของอุปกรณ์หรือไบโอเมตริก
- หลังจากยืนยันตัวตนผู้ใช้สำเร็จแล้ว ผู้ให้บริการพาสคีย์จะลงนามใน แชลเลนจ์ และเบราว์เซอร์จะส่งคืนข้อมูลเข้าสู่ระบบคีย์สาธารณะที่ได้ (รวมถึงลายเซ็น) ไปยังส่วนหน้า
- ส่วนหน้าจะส่งข้อมูลเข้าสู่ระบบนี้ไปยังส่วนหลัง