API การจัดการข้อมูลเข้าสู่ระบบเป็น API เบราว์เซอร์ตามมาตรฐานที่ให้อินเทอร์เฟซแบบเป็นโปรแกรมระหว่างเว็บไซต์และเบราว์เซอร์เพื่อการลงชื่อเข้าใช้ในอุปกรณ์ต่างๆ อย่างราบรื่น
API การจัดการข้อมูลเข้าสู่ระบบ:
- ขจัดความยุ่งยากในขั้นตอนการลงชื่อเข้าใช้ - ผู้ใช้จะลงชื่อเข้าใช้เว็บไซต์ได้อีกครั้งโดยอัตโนมัติแม้ว่าเซสชันจะหมดอายุไปแล้วหรือได้บันทึกข้อมูลเข้าสู่ระบบไว้ในอุปกรณ์อื่นก็ตาม
- อนุญาตการลงชื่อเข้าใช้ด้วยการแตะเพียงครั้งเดียวด้วยตัวเลือกบัญชี - ผู้ใช้จะเลือกบัญชีในตัวเลือกบัญชีเนทีฟได้
- จัดเก็บข้อมูลเข้าสู่ระบบ - แอปพลิเคชันของคุณสามารถจัดเก็บชุดชื่อผู้ใช้และรหัสผ่าน หรือแม้แต่รายละเอียดบัญชีแบบรวมศูนย์ เบราว์เซอร์สามารถซิงค์ข้อมูลเข้าสู่ระบบเหล่านี้ในอุปกรณ์ต่างๆ
ต้องการดูของจริงไหม ลองใช้การสาธิต API การจัดการข้อมูลเข้าสู่ระบบและดูที่โค้ด
ตรวจสอบการสนับสนุนเบราว์เซอร์ API การจัดการข้อมูลเข้าสู่ระบบ
ก่อนที่จะใช้ API การจัดการข้อมูลเข้าสู่ระบบ ให้ตรวจสอบก่อนว่าระบบรองรับ PasswordCredential
หรือ FederatedCredential
หรือไม่
if (window.PasswordCredential || window.FederatedCredential) {
// Call navigator.credentials.get() to retrieve stored
// PasswordCredentials or FederatedCredentials.
}
ผู้ใช้ที่ลงชื่อเข้าใช้
หากต้องการลงชื่อเข้าใช้ผู้ใช้ ให้ดึงข้อมูลเข้าสู่ระบบจากเครื่องมือจัดการรหัสผ่านของเบราว์เซอร์แล้วใช้ข้อมูลเข้าสู่ระบบดังกล่าว
เช่น
- เมื่อผู้ใช้เข้ามาที่เว็บไซต์ของคุณแต่ไม่ได้ลงชื่อเข้าใช้ ให้โทรหา
navigator.credentials.get()
- ใช้ข้อมูลเข้าสู่ระบบที่ดึงมาเพื่อลงชื่อเข้าใช้ผู้ใช้
- อัปเดต UI เพื่อระบุว่าผู้ใช้ลงชื่อเข้าใช้แล้ว
ดูข้อมูลเพิ่มเติมในผู้ใช้ที่ลงชื่อเข้าใช้
บันทึกหรืออัปเดตข้อมูลเข้าสู่ระบบของผู้ใช้
หากผู้ใช้ลงชื่อเข้าใช้ด้วยผู้ให้บริการข้อมูลประจำตัวแบบรวมศูนย์ เช่น Google Sign-In, Facebook, GitHub
- หลังจากที่ผู้ใช้ลงชื่อเข้าใช้หรือสร้างบัญชีสำเร็จแล้ว ให้สร้าง
FederatedCredential
โดยใช้อีเมลของผู้ใช้เป็นรหัสและระบุผู้ให้บริการข้อมูลประจำตัวด้วยFederatedCredentials.provider
- บันทึกออบเจ็กต์ข้อมูลเข้าสู่ระบบโดยใช้
navigator.credentials.store()
ดูข้อมูลเพิ่มเติมในผู้ใช้ที่ลงชื่อเข้าใช้
หากผู้ใช้ลงชื่อเข้าใช้ด้วยชื่อผู้ใช้และรหัสผ่าน ให้ทำดังนี้
- หลังจากที่ผู้ใช้ลงชื่อเข้าใช้หรือสร้างบัญชีสำเร็จแล้ว ให้สร้าง
PasswordCredential
โดยใช้รหัสผู้ใช้และรหัสผ่าน - บันทึกออบเจ็กต์ข้อมูลเข้าสู่ระบบโดยใช้
navigator.credentials.store()
ดูข้อมูลเพิ่มเติมในบันทึกข้อมูลเข้าสู่ระบบจากฟอร์ม
ออกจากระบบ
เมื่อผู้ใช้ออกจากระบบ ให้โทรหา navigator.credentials.preventSilentAccess()
เพื่อป้องกันไม่ให้ผู้ใช้ลงชื่อกลับเข้าใช้โดยอัตโนมัติ
การปิดใช้การลงชื่อเข้าใช้อัตโนมัติยังช่วยให้ผู้ใช้สลับไปมาระหว่างบัญชีได้โดยง่าย เช่น ระหว่างบัญชีที่ทำงานกับบัญชีส่วนตัว หรือระหว่างบัญชีในอุปกรณ์ที่แชร์ โดยไม่ต้องป้อนข้อมูลการลงชื่อเข้าใช้อีกครั้ง
ดูข้อมูลเพิ่มเติมในออกจากระบบ