API การจัดการข้อมูลเข้าสู่ระบบ

Eiji Kitamura
Meggin Kearney
Meggin Kearney

Credential Management API เป็น API เบราว์เซอร์ตามมาตรฐานที่ให้อินเทอร์เฟซแบบเป็นโปรแกรมระหว่างเว็บไซต์กับเบราว์เซอร์เพื่อให้ลงชื่อเข้าใช้ได้อย่างราบรื่นในอุปกรณ์ต่างๆ

Credential Management API

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

หากต้องการดูการใช้งานจริง ลองใช้การสาธิต Credential Management API และดูโค้ด

ตรวจสอบการรองรับเบราว์เซอร์ของ Credential Management API

การรองรับเบราว์เซอร์

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

แหล่งที่มา

ก่อนใช้ Credential Management API ให้ตรวจสอบก่อนว่าระบบรองรับ PasswordCredential หรือ FederatedCredential หรือไม่

if (window.PasswordCredential || window.FederatedCredential) {
  // Call navigator.credentials.get() to retrieve stored
  // PasswordCredentials or FederatedCredentials.
}

ผู้ใช้ที่ลงชื่อเข้าใช้

หากต้องการลงชื่อเข้าใช้ผู้ใช้ ให้ดึงข้อมูลเข้าสู่ระบบจากเครื่องมือจัดการรหัสผ่านของเบราว์เซอร์ แล้วใช้ข้อมูลดังกล่าวเพื่อลงชื่อเข้าใช้ผู้ใช้

เช่น

  1. เมื่อผู้ใช้ไปที่เว็บไซต์ของคุณและไม่ได้ลงชื่อเข้าใช้ ให้เรียกใช้ navigator.credentials.get()
  2. ใช้ข้อมูลเข้าสู่ระบบที่ดึงข้อมูลมาเพื่อลงชื่อเข้าใช้ผู้ใช้
  3. อัปเดต UI เพื่อระบุว่าผู้ใช้ลงชื่อเข้าใช้แล้ว

ดูข้อมูลเพิ่มเติมในหัวข้อผู้ใช้การลงชื่อเข้าใช้

บันทึกหรืออัปเดตข้อมูลเข้าสู่ระบบของผู้ใช้

หากผู้ใช้ลงชื่อเข้าใช้ด้วยผู้ให้บริการข้อมูลประจำตัวแบบรวมศูนย์ เช่น Google Sign-In, Facebook, GitHub ให้ทำดังนี้

  1. หลังจากผู้ใช้ลงชื่อเข้าใช้หรือสร้างบัญชีเรียบร้อยแล้ว ให้สร้าง FederatedCredential ด้วยอีเมลของผู้ใช้เป็นรหัส และระบุผู้ให้บริการข้อมูลระบุตัวตนด้วย FederatedCredentials.provider
  2. บันทึกออบเจ็กต์ข้อมูลเข้าสู่ระบบโดยใช้ navigator.credentials.store()

ดูข้อมูลเพิ่มเติมในหัวข้อผู้ใช้การลงชื่อเข้าใช้

หากผู้ใช้ลงชื่อเข้าใช้ด้วยชื่อผู้ใช้และรหัสผ่าน ให้ทำดังนี้

  1. หลังจากผู้ใช้ลงชื่อเข้าใช้หรือสร้างบัญชีเรียบร้อยแล้ว ให้สร้าง PasswordCredential ด้วยรหัสผู้ใช้และรหัสผ่าน
  2. บันทึกออบเจ็กต์ข้อมูลเข้าสู่ระบบโดยใช้ navigator.credentials.store()

ดูข้อมูลเพิ่มเติมในหัวข้อบันทึกข้อมูลเข้าสู่ระบบจากแบบฟอร์ม

ออกจากระบบ

เมื่อผู้ใช้ออกจากระบบ ให้เรียกใช้ navigator.credentials.preventSilentAccess() เพื่อป้องกันไม่ให้ระบบลงชื่อเข้าใช้ผู้ใช้อีกครั้งโดยอัตโนมัติ

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

ดูข้อมูลเพิ่มเติมในหัวข้อออกจากระบบ

ความคิดเห็น