保存表单中的凭据

梅金·卡尼
Meggin Kearney

保存登录表单中的凭据

尽可能简化注册和登录表单。

保存登录表单中凭据,以便用户在返回时无需再次登录。

如需存储来自表单的用户凭据,请执行以下操作:

  1. 在表单中加入 autocomplete
  2. 阻止提交表单。
  3. 通过发送请求来进行身份验证。
  4. 存储凭据。
  5. 更新界面或继续访问个性化页面。

在表单中加入 autocomplete

在继续操作之前,请检查您的表单是否包含 autocomplete 属性。这有助于 Credential Management API 从表单中找到 idpassword,并构建凭据对象。

这也有助于不支持 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 浏览器获取凭据信息时,系统会弹出一条通知,要求您存储凭据(或联合提供方)。

存储凭据
针对自动登录的用户的通知

更新界面

如果一切正常,请使用个人资料信息更新界面,或继续访问个性化页面。

     }).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

来源

反馈