ทำให้แบบฟอร์มการลงทะเบียนและการลงชื่อเข้าใช้ของคุณเรียบง่ายที่สุดเท่าที่จะทำได้
บันทึกข้อมูลเข้าสู่ระบบจากแบบฟอร์มลงชื่อเข้าใช้ เพื่อให้ผู้ใช้ไม่ต้องลงชื่อเข้าใช้อีกเมื่อกลับมา
วิธีจัดเก็บข้อมูลเข้าสู่ระบบของผู้ใช้จากแบบฟอร์ม
- ใส่
autocompleteในแบบฟอร์ม - ป้องกันไม่ให้ส่งแบบฟอร์ม
- ตรวจสอบสิทธิ์โดยส่งคำขอ
- จัดเก็บข้อมูลเข้าสู่ระบบ
- โปรดอัปเดต UI หรือไปยังหน้าที่ปรับเปลี่ยนในแบบของคุณ
รวม autocomplete ในแบบฟอร์ม
ก่อนดำเนินการต่อ
ตรวจสอบว่าแบบฟอร์มมีแอตทริบิวต์ autocomplete หรือไม่
การดำเนินการนี้จะช่วยให้ API การจัดการข้อมูลเข้าสู่ระบบค้นหา id และ password ได้
จากฟอร์มและสร้างออบเจ็กต์ข้อมูลเข้าสู่ระบบ
การตั้งค่านี้ยังช่วยเบราว์เซอร์ที่ไม่รองรับ 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()