浏览器Credentials API用于简化登录流程,支持密码和联邦凭据的存储与自动填充;需HTTPS、用户手势触发、语义化表单,并通过navigator.credentials.get()获取凭据、store()保存凭据,后端负责真实认证。

浏览器 Credentials API 主要用于简化用户登录流程,支持密码凭据和联邦凭据(如 Google、GitHub 登录)的存储与自动填充。它不直接处理认证逻辑,而是与后端认证流程协同工作:前端用它获取凭据,后端验证凭据并颁发令牌或 session。
如何安全获取并使用密码凭据
调用 navigator.credentials.get() 请求用户保存的密码凭据,需满足 HTTPS、用户交互触发(如点击按钮)、且页面有有效的表单域(input[name="username"] 和 input[name="password"])。
- 必须在用户手势(如 click、keydown)中调用,不能在页面加载时自动执行
- 指定
password: true才能读取密码凭据;若只设federated: {...},则跳过密码尝试 - 返回的
PasswordCredential对象含id(用户名)、password(明文密码),需立即提交给后端,不可缓存或本地存储 - 示例:不要直接用
fetch('/login', { body: JSON.stringify(cred) })发送明文密码,应走标准登录接口(如 POST 表单或 JSON),由后端校验
如何集成联邦登录(如 Google、Apple)
通过 federated: { providers: [...] } 声明支持的身份提供者,浏览器会返回 FederatedCredential,含 id(用户标识)、provider(如 "https://accounts.google.com")。
分析 Java Spring Boot 后端 Controller 代码,自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
- 后端需预先配置对应 provider 的 OAuth/OIDC 客户端,并验证 ID Token 或授权码
- 前端拿到
credential.id和credential.provider后,应发起后端登录请求(例如POST /auth/federated),由后端完成 token 校验和用户映射 - 注意:浏览器不会返回 access token 或私密信息,仅提供可验证的用户身份线索
- 确保
providers列表中的 URL 是 provider 的标准 issuer,例如 Google 用"https://accounts.google.com",不是前端 redirect_uri
如何保存新凭据(登录成功后)
用户首次登录或注册成功后,调用 navigator.credentials.store() 将凭据交由浏览器管理。
立即学习“Java免费学习笔记(深入)”;
- 密码凭据需构造
new PasswordCredential(form)(传入已提交的表单元素)或手动创建对象(含id、password、name等) - 联邦凭据用
new FederatedCredential(id, provider, name, iconURL) - 必须在登录成功的响应处理中同步调用(如 fetch.then() 内),且不能跨域 iframe 中调用
- 浏览器会弹出确认提示(“是否保存此账号?”),用户同意后才真正保存
常见注意事项与兼容性
Credentials API 在 Chrome、Edge、Firefox(有限支持)、Safari(仅部分支持 federated)中可用,但行为存在差异。
- 避免依赖
credentials.get({ federated: ... })在 Safari 上必然成功;建议降级为显示第三方登录按钮 - 不要将凭据 API 当作认证机制本身——它只是“快捷通道”,真正的认证始终由后端完成
- 启用凭证管理前,确保网站有有效的 TLS 证书、同源策略合规、且无混合内容警告
- 敏感操作(如修改密码、删除账号)不应绕过二次验证,即使用户通过凭据自动登录

















