ในการมอบประสบการณ์การใช้งานที่ซับซ้อนแก่ผู้ใช้ สิ่งสำคัญคือการช่วยผู้ใช้ ตรวจสอบสิทธิ์ตนเองกับเว็บไซต์ของคุณ ผู้ใช้ที่ผ่านการตรวจสอบสิทธิ์สามารถโต้ตอบกับ โดยใช้โปรไฟล์เฉพาะ ซิงค์ข้อมูลในอุปกรณ์ต่างๆ หรือประมวลผลข้อมูล ขณะที่ออฟไลน์ รายการก็จะดำเนินต่อไปเรื่อยๆ แต่การสร้างสรรค์ การจดจำ และการพิมพ์ รหัสผ่านมักจะเป็นเรื่องยุ่งยากสำหรับผู้ใช้ปลายทาง โดยเฉพาะบนหน้าจออุปกรณ์เคลื่อนที่ ซึ่งทำให้พวกเขาใช้รหัสผ่านเดิมซ้ำ บนเว็บไซต์อื่น แน่นอน คือความเสี่ยงด้านความปลอดภัย
Chrome เวอร์ชันล่าสุด (51) รองรับ API การจัดการข้อมูลเข้าสู่ระบบ เป็น การติดตามมาตรฐานที่ W3C ช่วยให้นักพัฒนาซอฟต์แวร์เข้าถึง เครื่องมือจัดการข้อมูลเข้าสู่ระบบของเบราว์เซอร์และช่วยให้ผู้ใช้ลงชื่อเข้าใช้ได้ง่ายขึ้น
API การจัดการข้อมูลประจำตัวคืออะไร
API การจัดการข้อมูลเข้าสู่ระบบช่วยให้นักพัฒนาซอฟต์แวร์จัดเก็บและเรียกข้อมูลรหัสผ่านได้ และข้อมูลเข้าสู่ระบบแบบรวมศูนย์ ซึ่งมี 3 ฟังก์ชันดังนี้
navigator.credentials.get()navigator.credentials.store()navigator.credentials.requireUserMediation()
การใช้ API แบบง่ายเหล่านี้ทำให้นักพัฒนาซอฟต์แวร์ทำสิ่งต่างๆ ที่มีประสิทธิภาพได้ เช่น
- อนุญาตให้ผู้ใช้ลงชื่อเข้าใช้ได้ด้วยการแตะเพียงครั้งเดียว
- จดจำบัญชีแบบรวมศูนย์ที่ผู้ใช้ใช้ในการลงชื่อเข้าใช้
- ให้ผู้ใช้ลงชื่อกลับเข้าใช้เมื่อเซสชันหมดอายุ
ในการใช้งาน Chrome ระบบจะจัดเก็บข้อมูลเข้าสู่ระบบไว้ในรหัสผ่านของ Chrome หากผู้ใช้ลงชื่อเข้าใช้ Chrome ก็จะซิงค์รหัสผ่านของผู้ใช้ได้ ในอุปกรณ์ต่างๆ รหัสผ่านที่ซิงค์เหล่านั้นยังสามารถแชร์กับแอป Android ได้ด้วย ที่ผสานรวม Smart Lock for Passwords API สำหรับ Android เพื่อประสบการณ์การใช้งานข้ามแพลตฟอร์มที่ราบรื่น
การผสานรวม API การจัดการข้อมูลเข้าสู่ระบบกับเว็บไซต์ของคุณ
วิธีใช้ API การจัดการข้อมูลเข้าสู่ระบบกับเว็บไซต์อาจแตกต่างกันไป โดยขึ้นอยู่กับสถาปัตยกรรม เป็นแอปหน้าเดียวใช่ไหม เป็นมรดกตกทอด สถาปัตยกรรมที่มีการเปลี่ยนหน้าหรือไม่ แบบฟอร์มลงชื่อเข้าใช้เฉพาะด้านบนใช่ไหม ปุ่มลงชื่อเข้าใช้อยู่ที่ใด ผู้ใช้สามารถเรียกดู เว็บไซต์ของคุณโดยไม่ลงชื่อเข้าใช้ใช่หรือไม่ การรวมศูนย์ทำงานในหน้าต่างป๊อปอัปได้หรือไม่ หรือ จำเป็นต้องมีการโต้ตอบในหน้าเว็บหลายหน้าใช่ไหม
ซึ่งแทบจะเป็นไปไม่ได้เลยที่จะครอบคลุมกรณีเหล่านั้นทั้งหมด แต่เรามาลองดู แอปหน้าเดียวทั่วไป
- หน้าเว็บด้านบนคือแบบฟอร์มการลงทะเบียน
- โดยการแตะที่ "ลงชื่อเข้าใช้" ผู้ใช้จะไปยังแบบฟอร์มลงชื่อเข้าใช้
- ทั้งแบบฟอร์มการลงทะเบียนและการลงชื่อเข้าใช้มีตัวเลือกรหัส/รหัสผ่านโดยทั่วไป ข้อมูลเข้าสู่ระบบและการรวมศูนย์ เช่น ด้วย Google Sign-In และ Facebook Sign-In
เมื่อใช้ API การจัดการข้อมูลเข้าสู่ระบบ คุณจะสามารถเพิ่มสิ่งต่อไปนี้ กับไซต์ เช่น
- แสดงตัวเลือกบัญชีเมื่อลงชื่อเข้าใช้: แสดง UI ตัวเลือกบัญชีเนทีฟ เมื่อผู้ใช้แตะ "ลงชื่อเข้าใช้"
- ข้อมูลเข้าสู่ระบบ: เมื่อลงชื่อเข้าใช้สำเร็จ ให้เสนอที่จะจัดเก็บ ลงในเครื่องมือจัดการรหัสผ่านของเบราว์เซอร์เพื่อใช้งานในภายหลัง
- อนุญาตให้ผู้ใช้ลงชื่อเข้าใช้อีกครั้งโดยอัตโนมัติ: อนุญาตให้ผู้ใช้ลงชื่อเข้าใช้อีกครั้งหาก เซสชันหมดอายุแล้ว
- ใช้สื่อกลางในการลงชื่อเข้าใช้อัตโนมัติ: เมื่อผู้ใช้ออกจากระบบ ให้ปิดใช้การลงชื่อเข้าใช้อัตโนมัติสำหรับ การเข้าชมครั้งต่อไปของผู้ใช้
สัมผัสประสบการณ์การใช้ฟีเจอร์เหล่านี้ในเว็บไซต์สาธิตด้วยโค้ดตัวอย่าง
แสดงตัวเลือกบัญชีผู้ใช้เมื่อลงชื่อเข้าใช้
ระหว่างที่ผู้ใช้แตะ "ลงชื่อเข้าใช้" และไปยังฟอร์มลงชื่อเข้าใช้ สามารถใช้ navigator.credentials.get() เพื่อรับข้อมูลเข้าสู่ระบบ Chrome จะแสดง UI ตัวเลือกบัญชี ผู้ใช้ก็สามารถเลือกบัญชีได้
การรับออบเจ็กต์ข้อมูลเข้าสู่ระบบรหัสผ่าน
หากต้องการแสดงข้อมูลเข้าสู่ระบบของรหัสผ่านเป็นตัวเลือกบัญชี ให้ใช้ password: true
navigator.credentials.get({
password: true, // `true` to obtain password credentials
}).then(function(cred) {
// continuation
...
การใช้ข้อมูลเข้าสู่ระบบด้วยรหัสผ่านเพื่อลงชื่อเข้าใช้
เมื่อผู้ใช้เลือกบัญชีแล้ว ฟังก์ชันแปลงค่าจะได้รับ
ข้อมูลเข้าสู่ระบบรหัสผ่าน คุณจะส่งไฟล์ไปยังเซิร์ฟเวอร์โดยใช้ fetch() ได้โดยทำดังนี้
// continued from previous example
}).then(function(cred) {
if (cred) {
if (cred.type == 'password') {
// Construct FormData object
var form = new FormData();
// Append CSRF Token
var csrf_token = document.querySelector('csrf_token').value;
form.append('csrf_token', csrf_token);
// You can append additional credential data to `.additionalData`
cred.additionalData = form;
// `POST` the credential object as `credentials`.
// id, password and the additional data will be encoded and
// sent to the url as the HTTP body.
fetch(url, { // Make sure the URL is HTTPS
method: 'POST', // Use POST
credentials: cred // Add the password credential object
}).then(function() {
// continuation
});
} else if (cred.type == 'federated') {
// continuation
การใช้ข้อมูลเข้าสู่ระบบแบบสมาพันธ์เพื่อลงชื่อเข้าใช้
หากต้องการแสดงบัญชีแบบรวมศูนย์แก่ผู้ใช้ ให้เพิ่ม federated ซึ่งจะใช้อาร์เรย์
ของผู้ให้บริการข้อมูลประจำตัวกับตัวเลือก get()
navigator.credentials.get({
password: true, // `true` to obtain password credentials
federated: {
providers: [ // Specify an array of IdP strings
'https://accounts.google.com',
'https://www.facebook.com'
]
}
}).then(function(cred) {
// continuation
...
คุณสามารถตรวจสอบพร็อพเพอร์ตี้ type ของออบเจ็กต์ข้อมูลเข้าสู่ระบบ เพื่อดูว่าเป็น PasswordCredential หรือไม่
(type == 'password') หรือ FederatedCredential (type == 'federated')
หากข้อมูลเข้าสู่ระบบเป็น
FederatedCredential,
คุณสามารถเรียกใช้ API ที่เหมาะสมโดยใช้ข้อมูลที่มีอยู่
});
} else if (cred.type == 'federated') {
// `provider` contains the identity provider string
switch (cred.provider) {
case 'https://accounts.google.com':
// Federated login using Google Sign-In
var auth2 = gapi.auth2.getAuthInstance();
// In Google Sign-In library, you can specify an account.
// Attempt to sign in with by using `login_hint`.
return auth2.signIn({
login_hint: cred.id || ''
}).then(function(profile) {
// continuation
});
break;
case 'https://www.facebook.com':
// Federated login using Facebook Login
// continuation
break;
default:
// show form
break;
}
}
// if the credential is `undefined`
} else {
// show form
ข้อมูลเข้าสู่ระบบของร้านค้า
เมื่อผู้ใช้ลงชื่อเข้าใช้เว็บไซต์โดยใช้แบบฟอร์ม คุณจะใช้
navigator.credentials.store()
เพื่อจัดเก็บข้อมูลเข้าสู่ระบบ ระบบจะแจ้งให้ผู้ใช้เก็บหรือไม่จัดเก็บ แล้วแต่กรณี
เกี่ยวกับประเภทของข้อมูลเข้าสู่ระบบ ให้ใช้ new
PasswordCredential()
หรือ new
FederatedCredential()
เพื่อสร้างออบเจ็กต์ข้อมูลเข้าสู่ระบบที่คุณต้องการจัดเก็บ
การสร้างและการจัดเก็บข้อมูลเข้าสู่ระบบรหัสผ่านจากเอลิเมนต์แบบฟอร์ม
โค้ดต่อไปนี้ใช้แอตทริบิวต์ autocomplete เพื่อสร้าง
แผนที่
เอลิเมนต์ของแบบฟอร์มไปยัง PasswordCredential
พารามิเตอร์ออบเจ็กต์
HTML
html
<form id="form" method="post">
<input type="text" name="id" autocomplete="username" />
<input type="password" name="password" autocomplete="current-password" />
<input type="hidden" name="csrf_token" value="******" />
</form>
JavaScript
var form = document.querySelector('\#form');
var cred = new PasswordCredential(form);
// Store it
navigator.credentials.store(cred)
.then(function() {
// continuation
});
การสร้างและการจัดเก็บข้อมูลเข้าสู่ระบบแบบรวมศูนย์
// After a federation, create a FederatedCredential object using
// information you have obtained
var cred = new FederatedCredential({
id: id, // The id for the user
name: name, // Optional user name
provider: 'https://accounts.google.com', // A string that represents the identity provider
iconURL: iconUrl // Optional user avatar image url
});
// Store it
navigator.credentials.store(cred)
.then(function() {
// continuation
});
อนุญาตให้ผู้ใช้ลงชื่อเข้าใช้อีกครั้งโดยอัตโนมัติ
เมื่อผู้ใช้ออกจากเว็บไซต์และกลับมาอีกครั้งในภายหลัง อาจเป็นไปได้ว่า เซสชันหมดอายุแล้ว ไม่รบกวนผู้ใช้ให้พิมพ์รหัสผ่านทุกครั้งที่ กลับมา อนุญาตให้ผู้ใช้ลงชื่อเข้าใช้อีกครั้งโดยอัตโนมัติ
การรับออบเจ็กต์ข้อมูลเข้าสู่ระบบ
navigator.credentials.get({
password: true, // Obtain password credentials or not
federated: { // Obtain federation credentials or not
providers: [ // Specify an array of IdP strings
'https://accounts.google.com',
'https://www.facebook.com'
]
},
unmediated: true // `unmediated: true` lets the user automatically sign in
}).then(function(cred) {
if (cred) {
// auto sign-in possible
...
} else {
// auto sign-in not possible
...
}
});
โค้ดควรมีลักษณะคล้ายกับที่คุณเห็นในตัวเลือก "แสดงตัวเลือกบัญชีผู้ใช้
เมื่อลงชื่อเข้าใช้" ความแตกต่างเพียงอย่างเดียวคือคุณจะตั้งค่า
unmediated: true
การดำเนินการนี้จะแปลค่าฟังก์ชันดังกล่าวทันที และให้การรับรองแก่คุณ ลงชื่อเข้าใช้ให้ผู้ใช้โดยอัตโนมัติ โดยมีเงื่อนไข 2-3 ข้อดังนี้
- ผู้ใช้รับทราบฟีเจอร์ลงชื่อเข้าใช้โดยอัตโนมัติด้วยการต้อนรับอย่างอบอุ่น
- ผู้ใช้ได้ลงชื่อเข้าใช้เว็บไซต์โดยใช้ API การจัดการข้อมูลเข้าสู่ระบบแล้วก่อนหน้านี้
- ผู้ใช้มีข้อมูลเข้าสู่ระบบเพียง 1 รายการที่จัดเก็บไว้สำหรับต้นทางของคุณ
- ผู้ใช้ไม่ได้ออกจากระบบอย่างชัดเจนในเซสชันก่อนหน้านี้
หากไม่เป็นไปตามเงื่อนไขเหล่านี้ ฟังก์ชันจะถูกปฏิเสธ
ใช้สื่อกลางในการลงชื่อเข้าใช้อัตโนมัติ
เมื่อผู้ใช้ออกจากระบบเว็บไซต์ของคุณ คุณมีหน้าที่ตรวจสอบว่า
ระบบจะไม่ลงชื่อเข้าใช้ให้ผู้ใช้อีกโดยอัตโนมัติ เพื่อให้มั่นใจได้ว่า
ซึ่ง API การจัดการข้อมูลเข้าสู่ระบบมีกลไกที่เรียกว่าสื่อกลาง
คุณเปิดใช้โหมดสื่อกลางได้ด้วยการเรียกใช้
navigator.credentials.requireUserMediation()
ตราบใดที่สถานะสื่อกลางของผู้ใช้สำหรับต้นทางเปิดอยู่ โดยใช้
unmediated: true ด้วย navigator.credentials.get() ฟังก์ชันดังกล่าวจะ
แก้ไขด้วย undefined
การใช้สื่อกลางในการลงชื่อเข้าใช้อัตโนมัติ
navigator.credentials.requireUserMediation();
คำถามที่พบบ่อย
เป็นไปได้ไหมที่ JavaScript ในเว็บไซต์จะดึงไฟล์ข้อมูล RAW
รหัสผ่าน
ไม่ได้ คุณจะรับรหัสผ่านได้เฉพาะที่เป็นส่วนหนึ่งของ PasswordCredential เท่านั้น
เปิดเผยอย่างไรก็ได้
สามารถจัดเก็บตัวเลข 3 ชุดสำหรับรหัสโดยใช้ข้อมูลเข้าสู่ระบบ Management API ไม่ได้ในตอนนี้ ความคิดเห็นเกี่ยวกับข้อกำหนดของคุณจะ ขอขอบคุณ
ฉันจะใช้ API การจัดการข้อมูลเข้าสู่ระบบใน iframe ได้ไหม
API จำกัดไว้เฉพาะบริบทระดับบนสุดเท่านั้น สายที่โทรหา .get() หรือ .store()
ใน iframe จะแก้ไขทันทีโดยไม่มีผลกระทบใดๆ
ฉันจะผสานรวมส่วนขยาย Chrome การจัดการรหัสผ่านกับเอกสารรับรองได้ไหม
Management API
คุณสามารถลบล้าง navigator.credentials และเชื่อมต่อกับส่วนขยาย Chrome ของคุณเพื่อ
ข้อมูลเข้าสู่ระบบ get() หรือ store()
แหล่งข้อมูล
ดูข้อมูลเพิ่มเติมเกี่ยวกับ API การจัดการข้อมูลเข้าสู่ระบบได้ในคู่มือการผสานรวม