<ph type="x-smartling-placeholder">
尽量简化注册和登录表单。
保存登录表单中的凭据 这样用户在返回时就无需再次登录。
如需存储表单中的用户凭据,请执行以下操作:
- 在表单中添加
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 浏览器获取凭据信息后, 系统弹出一条通知,要求存储凭据 (或联合提供商)。
<ph type="x-smartling-placeholder">![存储凭据](https://web.developers.google.cn/static/articles/security-credential-management-save-forms/image/store-credential-f27fdeafeab5c.png?authuser=9&hl=sl)
更新界面
如果一切顺利,请使用个人资料信息更新界面, 或前往个性化页面。
}).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()
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">