尽可能简化注册和登录表单。
保存登录表单中凭据,以便用户在返回时无需再次登录。
如需存储来自表单的用户凭据,请执行以下操作:
- 在表单中加入
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()