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

Eiji Kitamura

Meggin Kearney

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

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

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

1. ใส่ autocomplete ในแบบฟอร์ม
2. ป้องกันไม่ให้ส่งแบบฟอร์ม
3. ตรวจสอบสิทธิ์โดยการส่งคําขอ
4. จัดเก็บข้อมูลเข้าสู่ระบบ
5. โปรดอัปเดต UI หรือไปยังหน้าที่ปรับเปลี่ยนในแบบของคุณ

รวม autocomplete ในแบบฟอร์ม

ก่อนดำเนินการต่อ ให้ตรวจสอบว่าแบบฟอร์มมีแอตทริบิวต์ autocomplete หรือไม่ ซึ่งจะช่วยให้ Credential Management 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()

ความคิดเห็น