HTML怎么做FedCM联邦认证_HTML FedCM联邦身份认证方法【方法】-html教程-PHP中文网

必须用原生button或语义化自定义按钮，在用户点击/回车/空格后立即调用navigator.credentials.get()，禁止延迟、事件委托过深或非交互触发，否则报notallowederror。

html怎么做fedcm联邦认证_html fedcm联邦身份认证方法【方法】

怎么在 HTML 页面里触发 FedCM 登录弹窗

直接调用 navigator.credentials.get() 是唯一标准方式，不能靠按钮 click 后手动构造 JWT 或模拟表单提交——浏览器会拒绝非用户主动交互（user activation）触发的凭证请求。

常见错误是把登录按钮绑在 div 上却没加 role="button" + tabindex="0"，导致键盘用户或辅助技术无法触发；或者用 setTimeout 延迟调用，破坏 user activation 时效性（通常 500ms 内失效）。

必须用原生 button 元素，或带完整可访问语义的自定义按钮
调用前确保页面已加载完成（DOMContentLoaded 或 load 事件后）
只在用户明确点击/回车/空格后立即执行，不加异步延迟
传入的 mediation: 'optional' 可避免重复弹窗，但首次必须为 'required'

credential.request() 报错 “NotAllowedError: User activation is required” 怎么办

这个错误几乎全是前端调用时机不对导致的，和后端、JWT 校验、Google 控制台配置都无关。Chrome 123+ 对 FedCM 的 user activation 检查更严格，连 button.onclick = () => { navigator.credentials.get(...) } 都可能因事件委托链过长被判定为非直接激活。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

改用 addEventListener('click', handler, { once: true }) 确保绑定干净
避免在 React/Vue 的合成事件里嵌套 Promise 或 await，优先在事件回调第一层调用 navigator.credentials.get()
如果用了 Web Components，确保 shadow DOM 中的按钮也正确冒泡 click 事件
测试时别用 console 手动粘贴执行——这不算 user activation

如何让 FedCM 返回的 credential 正确携带 email 和 profile 信息

FedCM 默认只返回最小化声明（sub），要拿到 email、name、picture，必须在请求时显式声明 identity 选项并指定 scope，且依赖 Google 账户设置中的公开资料权限。

请求参数中必须包含 identity: { providers: ['https://accounts.google.com'] }
Google 侧需在 Cloud Console 的 OAuth 同意屏幕中启用 email 和 profile scope（即使 FedCM 不走 OAuth 流程，后端校验仍依赖这些字段）
用户首次登录时，浏览器 UI 会显示所需权限，若用户跳过或拒绝，credential.credential 解析后将缺失对应字段，后端不能假设必有 email
不要依赖 id_token 的 hd 字段做企业域限制——FedCM 的 identityCredentials 不保证携带该声明，需后端结合 Google 的 getAccountInfo API 补充验证

为什么后端校验 credential.credential 总失败

最常踩的坑是误把 FedCM 返回的 cred.credential 当成传统 OIDC ID Token 直接丢给通用 JWT 库校验——它其实是 Google 特定格式的 FedCM Credential，头部 alg 是 RS256，但签发者（iss）是 https://accounts.google.com，且必须用 Google 提供的 JWKS endpoint（https://www.googleapis.com/oauth2/v3/certs）验签，不能复用你自己的 OIDC 配置。

Node.js 推荐用 @google-auth/jwt 的 verifyIdToken 方法，传入 expectedAudience（即 client_id）而非简单 verify
Python 用 google.auth.jwt 时，必须显式指定 certs_url='https://www.googleapis.com/oauth2/v3/certs'
校验通过后，立刻用 sub 查用户表或创建新账号，不要尝试解析 credential 多次——JWT 解析开销小，但反复 decode + verify 容易引入时序差异
注意：FedCM 凭证默认有效期仅 5 分钟，后端收到后必须立即处理，不能存起来稍后校验

真正难的不是调通弹窗，而是理解 FedCM 的 credential 是一次性的、不可重放的浏览器级断言——它不等于 session，也不等于长期 token。任何试图把它当 cookie 存、当字符串缓存、或在多个请求间复用的行为，都会在 Chrome 125+ 或 Edge 124+ 中静默失败。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！