此页面由 Cloud Translation API 翻译。

保存表单中的凭据

Eiji Kitamura

Meggin Kearney

</ph>

保存登录表单中的凭据

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

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

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

在表单中添加 autocomplete。
阻止提交表单。
通过发送请求进行身份验证。
存储凭据。
更新界面或前往个性化页面。

在表单中添加 `autocomplete`

在继续操作之前检查您的表单是否包含 autocomplete 属性。这有助于 Credential Management 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 浏览器获取凭据信息后，系统弹出一条通知，要求存储凭据（或联合提供商）。

更新界面

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

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

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

`navigator.credentials.store()`