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

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

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

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

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

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

การสนับสนุนเบราว์เซอร์

  • 51
  • 79
  • x
  • x

แหล่งที่มา

การสนับสนุนเบราว์เซอร์

  • 51
  • 79
  • 60
  • 13

แหล่งที่มา

ความคิดเห็น