Google 会使用 AI 技术将内容翻译成您偏好的语言。AI 翻译可能包含错误。

保存表单中的凭证

Eiji Kitamura

Meggin Kearney

保存登录表单中的凭据

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

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

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

在表单中添加 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`

Browser Support

Source

`navigator.credentials.store()`