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

Eiji Kitamura

Meggin Kearney

ทำให้แบบฟอร์มการลงทะเบียนและการลงชื่อเข้าใช้ของคุณเรียบง่ายที่สุดเท่าที่จะทำได้

บันทึกข้อมูลเข้าสู่ระบบจากแบบฟอร์มลงชื่อเข้าใช้ เพื่อให้ผู้ใช้ไม่ต้องลงชื่อเข้าใช้อีกเมื่อกลับมา

วิธีจัดเก็บข้อมูลเข้าสู่ระบบของผู้ใช้จากแบบฟอร์ม

1. ใส่ autocomplete ในแบบฟอร์ม
2. ป้องกันไม่ให้ส่งแบบฟอร์ม
3. ตรวจสอบสิทธิ์โดยส่งคำขอ
4. จัดเก็บข้อมูลเข้าสู่ระบบ
5. โปรดอัปเดต 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()

ความคิดเห็น