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

Eiji Kitamura
Meggin Kearney
Meggin Kearney

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

API การจัดการข้อมูลเข้าสู่ระบบจะมีคุณสมบัติดังนี้

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

ต้องการดูการใช้งานจริงไหม ทดลองใช้ การสาธิต API การจัดการข้อมูลเข้าสู่ระบบ และดูว่า รหัส

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

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

  • Chrome: 51.
  • ขอบ: 18
  • Firefox: 60
  • Safari: 13.

แหล่งที่มา

ก่อนใช้ 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 การลงชื่อเข้าใช้, Facebook, GitHub:

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

ดูข้อมูลเพิ่มเติมใน ผู้ใช้ที่ลงชื่อเข้าใช้

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

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

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

ออกจากระบบ

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

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

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

ความคิดเห็น