尽量简化注册和登录表单。
保存登录表单中的凭据 这样用户在返回时就无需再次登录。
如需存储表单中的用户凭据，请执行以下操作：
- 在表单中添加
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
navigator.credentials.store()