Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

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

Eiji Kitamura

Meggin Kearney

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

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

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

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

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

ระบุ `autocomplete` ในแบบฟอร์ม

ก่อนดำเนินการต่อ ให้ตรวจสอบว่าแบบฟอร์มของคุณมีแอตทริบิวต์ autocomplete หรือไม่ ซึ่งจะช่วยให้ Credential Management API ค้นหา id และ password จากแบบฟอร์มและสร้างออบเจ็กต์ข้อมูลเข้าสู่ระบบได้

นอกจากนี้ยังช่วยให้เบราว์เซอร์ที่ไม่รองรับ Credential Management API เข้าใจความหมายของ 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`

Browser Support

Source

`navigator.credentials.store()`