无需登录 数据私有 本地保存

Credential Management演示 - 自动登录与存储

9
0
0
0

Credential Management 演示

浏览器原生凭据存储 · 自动登录 · 联合身份验证

API 就绪
1注册凭据 2存储到浏览器 3自动获取登录 4安全登出
凭据操作面板 未登录
用户名至少3个字符
密码至少6个字符
两次密码不一致

注册成功后将调用 navigator.credentials.store() 将凭据保存到浏览器密码管理器。

检测到已存储的凭据！点击下方按钮自动获取。
或选择已存储的账户
暂无存储的账户，请先注册。

联合身份验证使用 FederatedCredential，适用于第三方登录提供商。

API 调用日志
--:--:-- INIT Credential Management 演示已就绪。等待操作...
浏览器凭据存储 0

暂无已存储的凭据

会话状态
未登录
—
快速操作
浏览器兼容性
PasswordCredential 检测中...
FederatedCredential 检测中...
navigator.credentials 检测中...
PublicKeyCredential 检测中...
常见问题与知识点

Credential Management API 是 W3C 标准，允许网站与浏览器的凭据存储系统交互。它支持三种凭据类型：PasswordCredential（密码登录）、FederatedCredential（联合身份验证，如 Google/GitHub 登录）和 PublicKeyCredential（WebAuthn 无密码认证）。通过该 API，网站可以实现一键自动登录，提升用户体验并减少密码疲劳。

使用 navigator.credentials.store() 方法。首先创建一个 PasswordCredential 实例，包含 id（用户名）、password 和可选的 name、iconURL，然后调用 store 方法。浏览器会提示用户确认保存（或自动保存，取决于浏览器设置）。

页面加载时调用 navigator.credentials.get({ password: true, mediation: 'silent' })。如果用户之前存储了凭据且未调用 preventSilentAccess()，浏览器会静默返回凭据，实现自动登录。mediation 参数可选值：'silent'（静默）、'optional'（显示账户选择器）、'required'（强制显示）、'conditional'（条件 mediation，用于 WebAuthn）。

当用户主动登出时，应调用 navigator.credentials.preventSilentAccess()。这会阻止后续的静默获取（silent mediation），确保浏览器不会在用户登出后自动重新登录。该方法返回一个 Promise，通常在登出流程的最后调用。

适用于使用第三方身份提供商登录的场景，如"使用 Google 登录"、"使用 GitHub 登录"。FederatedCredential 包含 id（用户标识）、provider（身份提供商 URL）和可选的 name、iconURL。与密码凭据不同，它不存储密码，而是存储一个指向身份提供商的引用。

Chrome（桌面版和 Android 版）全面支持 PasswordCredential 和 FederatedCredential。Edge 基于 Chromium，支持良好。Firefox 部分支持（PasswordCredential 支持较好，FederatedCredential 支持有限）。Safari 对 PasswordCredential 有一定支持，但 FederatedCredential 支持不完整。WebAuthn（PublicKeyCredential）在现代浏览器中广泛支持。

浏览器没有提供 JavaScript API 来枚举或删除已存储的凭据（出于安全考虑）。用户需要通过浏览器设置管理：Chrome 在 chrome://settings/passwords，Edge 在 edge://settings/passwords。开发者可以在登出时调用 preventSilentAccess() 来禁用自动登录。

检查 'credentials' in navigator 判断基础 API 是否可用；检查 typeof PasswordCredential !== 'undefined' 判断密码凭据支持；检查 typeof FederatedCredential !== 'undefined' 判断联合凭据支持；检查 typeof PublicKeyCredential !== 'undefined' 判断 WebAuthn 支持。
🔧 相关工具