保存表单中的凭据

Meggin Kearney
Meggin Kearney

<ph type="x-smartling-placeholder">
</ph>
保存登录表单中的凭据

尽量简化注册和登录表单。

保存登录表单中的凭据 这样用户在返回时就无需再次登录。

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

  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 浏览器获取凭据信息后, 系统弹出一条通知,要求存储凭据 (或联合提供商)。

<ph type="x-smartling-placeholder">
</ph> 存储凭据
针对自动登录用户的通知

更新界面

如果一切顺利,请使用个人资料信息更新界面, 或前往个性化页面。

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

浏览器支持

  • Chrome:51。 <ph type="x-smartling-placeholder">
  • Edge:79。 <ph type="x-smartling-placeholder">
  • Firefox:不支持。 <ph type="x-smartling-placeholder">
  • Safari:不支持。 <ph type="x-smartling-placeholder">

来源

浏览器支持

  • Chrome:51。 <ph type="x-smartling-placeholder">
  • Edge:79。 <ph type="x-smartling-placeholder">
  • Firefox:60。 <ph type="x-smartling-placeholder">
  • Safari:13. <ph type="x-smartling-placeholder">

来源

反馈