Lưu thông tin xác thực từ Biểu mẫu

Eiji Kitamura

Meggin Kearney

Giữ cho biểu mẫu đăng ký và đăng nhập của bạn đơn giản nhất có thể.

Lưu thông tin đăng nhập từ biểu mẫu đăng nhập do đó, người dùng sẽ không phải đăng nhập lại khi quay lại.

Cách lưu trữ thông tin đăng nhập của người dùng trong biểu mẫu:

1. Thêm autocomplete vào biểu mẫu.
2. Không cho gửi biểu mẫu.
3. Xác thực bằng cách gửi yêu cầu.
4. Lưu trữ thông tin xác thực.
5. Cập nhật giao diện người dùng hoặc tiếp tục truy cập vào trang được cá nhân hoá.

Thêm autocomplete vào biểu mẫu

Trước khi tiếp tục, hãy kiểm tra xem biểu mẫu của bạn có chứa các thuộc tính autocomplete hay không. Việc này giúp API Quản lý thông tin xác thực tìm thấy id và password từ biểu mẫu và tạo đối tượng thông tin xác thực.

Việc này cũng giúp các trình duyệt không hỗ trợ Credential Management API để hiểu ngữ nghĩa của mã. Tìm hiểu thêm về tính năng tự động điền trong bài viết này của 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>

Ngăn gửi biểu mẫu

Khi người dùng nhấn vào nút gửi, biểu mẫu sẽ không được gửi, điều này sẽ xảy ra nếu không dẫn đến chuyển đổi trang:

    var f = document.querySelector('#signup');
    f.addEventListener('submit', e => {
      e.preventDefault();

Bằng cách ngăn chuyển đổi trang, bạn có thể giữ lại thông tin chứng chỉ trong khi xác minh tính xác thực.

Xác thực bằng cách gửi yêu cầu

Để xác thực người dùng, hãy phân phối thông tin xác thực đến máy chủ của bạn bằng cách sử dụng AJAX.

Ở phía máy chủ, tạo một điểm cuối (hoặc chỉ cần thay đổi một điểm cuối hiện có) phản hồi bằng mã HTTP 200 hoặc 401 để trình duyệt hiểu rõ việc đăng ký/đăng nhập/thay đổi mật khẩu có thành công hay không.

Ví dụ:

// Try sign-in with AJAX
fetch('/signin', {
  method: 'POST',
  body: new FormData(e.target),
  credentials: 'include',
});

Lưu trữ thông tin đăng nhập

Để lưu trữ thông tin xác thực, trước tiên hãy kiểm tra xem API có khả dụng hay không, thì tạo thực thể PasswordCredential với thành phần biểu mẫu làm đối số một cách đồng bộ hoặc không đồng bộ. Gọi navigator.credentials.store(). Nếu không có API, bạn có thể chỉ cần chuyển tiếp thông tin hồ sơ đến bước tiếp theo.

Ví dụ đồng bộ:

if (window.PasswordCredential) {
  var c = new PasswordCredential(e.target);
  return navigator.credentials.store(c);
} else {
  return Promise.resolve(profile);
}

Ví dụ không đồng bộ:

if (window.PasswordCredential) {
  var c = await navigator.credentials.create({password: e.target});
  return navigator.credentials.store(c);
} else {
  return Promise.resolve(profile);
}

Sau khi yêu cầu thành công, hãy lưu trữ thông tin đăng nhập. (Đừng lưu trữ thông tin đăng nhập nếu yêu cầu không thành công làm như vậy sẽ gây nhầm lẫn cho người dùng cũ.)

Khi trình duyệt Chrome thu thập thông tin đăng nhập, một thông báo bật lên yêu cầu lưu trữ thông tin xác thực (hoặc nhà cung cấp liên kết).

Cập nhật giao diện người dùng

Nếu mọi thứ diễn ra suôn sẻ, hãy cập nhật giao diện người dùng bằng cách sử dụng thông tin hồ sơ, hoặc tiếp tục đến trang được cá nhân hoá.

     }).then(profile => {
       if (profile) {
         updateUI(profile);
       }
     }).catch(error => {
       showError('Sign-in Failed');
     });
    });

Ví dụ về đoạn mã đầy đủ

// 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');
    });
});

Khả năng tương thích với trình duyệt

PasswordCredential

navigator.credentials.store()

Phản hồi