ทำให้แบบฟอร์มการลงทะเบียนและการลงชื่อเข้าใช้เรียบง่ายที่สุด
บันทึกข้อมูลรับรองจากแบบฟอร์มลงชื่อเข้าใช้ เพื่อให้ผู้ใช้ไม่ต้องลงชื่อเข้าใช้อีกครั้งเมื่อกลับมา
วิธีจัดเก็บข้อมูลเข้าสู่ระบบของผู้ใช้จากแบบฟอร์ม
- รวม
autocomplete
ในแบบฟอร์ม - ป้องกันไม่ให้ส่งแบบฟอร์ม
- ตรวจสอบสิทธิ์โดยการส่งคำขอ
- จัดเก็บข้อมูลเข้าสู่ระบบ
- อัปเดต UI หรือไปยังหน้าที่ปรับเปลี่ยนในแบบของคุณ
รวม autocomplete
ในแบบฟอร์ม
ก่อนดำเนินการต่อ ให้ตรวจสอบว่าแบบฟอร์มมีแอตทริบิวต์ autocomplete
หรือไม่
ซึ่งจะช่วยให้ API การจัดการข้อมูลเข้าสู่ระบบค้นหา id
และ password
จากแบบฟอร์มและสร้างออบเจ็กต์ข้อมูลเข้าสู่ระบบได้
การทำเช่นนี้ยังช่วยให้เบราว์เซอร์ที่ไม่รองรับ Credential Management API เข้าใจความหมายอีกด้วย ดูข้อมูลเพิ่มเติมเกี่ยวกับการป้อนข้อความอัตโนมัติในบทความนี้โดย Jason Grigsby
<form id="signup" method="post">
<input name="email" type="text" autocomplete="username email" />
<input name="display-name" type="text" autocomplete="name" />
<input name="password" type="password" autocomplete="new-password" />
<input type="submit" value="Sign Up!" />
</form>
ป้องกันไม่ให้ส่งแบบฟอร์ม
เมื่อผู้ใช้กดปุ่มส่ง ให้ป้องกันไม่ให้ส่งแบบฟอร์มซึ่งจะส่งผลให้หน้าเปลี่ยน
var f = document.querySelector('#signup');
f.addEventListener('submit', e => {
e.preventDefault();
เมื่อป้องกันไม่ให้มีการเปลี่ยนหน้า คุณจะเก็บรักษาข้อมูลเข้าสู่ระบบได้ในขณะที่ยืนยันความถูกต้องของข้อมูล
ตรวจสอบสิทธิ์โดยการส่งคำขอ
ในการตรวจสอบสิทธิ์ผู้ใช้ ให้ส่งข้อมูลเข้าสู่ระบบไปยังเซิร์ฟเวอร์โดยใช้ AJAX
ที่ฝั่งเซิร์ฟเวอร์ ให้สร้างปลายทาง (หรือแก้ไขปลายทางที่มีอยู่) ที่ตอบกลับด้วยรหัส HTTP 200 หรือ 401 เพื่อให้เบราว์เซอร์ทราบอย่างชัดเจนว่ารหัสผ่านสำหรับการลงชื่อสมัครใช้/การลงชื่อเข้าใช้/เปลี่ยนรหัสผ่านสำเร็จหรือไม่
เช่น
// Try sign-in with AJAX
fetch('/signin', {
method: 'POST',
body: new FormData(e.target),
credentials: 'include',
});
จัดเก็บข้อมูลเข้าสู่ระบบ
หากต้องการจัดเก็บข้อมูลเข้าสู่ระบบ ก่อนอื่นให้ตรวจสอบว่า API พร้อมใช้งานหรือไม่ จากนั้นสร้างอินสแตนซ์ PasswordCredential
ด้วยองค์ประกอบแบบฟอร์มเป็นอาร์กิวเมนต์ทั้งแบบพร้อมกันหรือแบบไม่พร้อมกัน
โทร navigator.credentials.store()
หาก API ไม่พร้อมใช้งาน คุณสามารถส่งต่อข้อมูลโปรไฟล์ไปยังขั้นตอนถัดไปได้
ตัวอย่างแบบซิงโครนัส:
if (window.PasswordCredential) {
var c = new PasswordCredential(e.target);
return navigator.credentials.store(c);
} else {
return Promise.resolve(profile);
}
ตัวอย่างแบบอะซิงโครนัส
if (window.PasswordCredential) {
var c = await navigator.credentials.create({password: e.target});
return navigator.credentials.store(c);
} else {
return Promise.resolve(profile);
}
เมื่อคำขอดำเนินการเรียบร้อยแล้ว ให้จัดเก็บข้อมูลเข้าสู่ระบบ (อย่าจัดเก็บข้อมูลเข้าสู่ระบบหากส่งคำขอไม่สำเร็จเนื่องจากทำให้ผู้ใช้ที่กลับมาสับสน)
เมื่อเบราว์เซอร์ Chrome ได้รับข้อมูลเข้าสู่ระบบแล้ว การแจ้งเตือนจะปรากฏขึ้นเพื่อให้จัดเก็บข้อมูลเข้าสู่ระบบ (หรือผู้ให้บริการการรวมศูนย์)
อัปเดต UI
หากทุกอย่างเป็นไปด้วยดี ให้อัปเดต UI โดยใช้ข้อมูลโปรไฟล์ หรือไปยังหน้าที่ปรับเปลี่ยนในแบบของคุณ
}).then(profile => {
if (profile) {
updateUI(profile);
}
}).catch(error => {
showError('Sign-in Failed');
});
});
ตัวอย่างโค้ดแบบเต็ม
// Get form's DOM object
var f = document.querySelector('#signup');
f.addEventListener('submit', (e) => {
// Stop submitting form by itself
e.preventDefault();
// Try sign-in with AJAX
fetch('/signin', {
method: 'POST',
body: new FormData(e.target),
credentials: 'include',
})
.then((res) => {
if (res.status == 200) {
return Promise.resolve();
} else {
return Promise.reject('Sign-in failed');
}
})
.then((profile) => {
// Instantiate PasswordCredential with the form
if (window.PasswordCredential) {
var c = new PasswordCredential(e.target);
return navigator.credentials.store(c);
} else {
return Promise.resolve(profile);
}
})
.then((profile) => {
// Successful sign-in
if (profile) {
updateUI(profile);
}
})
.catch((error) => {
// Sign-in failed
showError('Sign-in Failed');
});
});
ความเข้ากันได้กับเบราว์เซอร์
PasswordCredential
navigator.credentials.store()