Google One Tap Sign in报错 [GSI_LOGGER]源未获client ID授权

错误现象 #

通过HTML API接入Google One Tap Sign in，已完成GCP项目创建、localhost添加至允许来源列表等必填配置，经多浏览器测试、清理缓存、无痕模式访问后功能仍无法正常运行，控制台抛出错误：
[GSI_LOGGER]: The given origin is not allowed for the given client ID

接入代码如下：

<div id="g_id_onload"
  data-client_id="uuu"
  data-auto_select="true"
  data-login_uri="uuu"
  data-itp_support="true"
  data-cancel_on_tap_outside="false"
  data-prompt_parent_id="g_id_onload"
  style="position: absolute; top: 100px; right: 30px; z-index: 1001;"
  data-auto_prompt="true">
</div>

排查解决步骤 #

• 严格校验授权来源配置的格式匹配度
  • Google GSI会对请求来源做完全字符串匹配，不会做自动兼容：如果本地开发服务带端口（如http://localhost:3000、http://localhost:5173），必须将带完整协议、端口的地址完整填入GCP对应OAuth客户端的「已授权的JavaScript来源」列表，不能只单独填写localhost
  • 授权来源末尾不能加斜杠，例如禁止填写http://localhost:5173/，需填写http://localhost:5173
  • 如果本地通过127.0.0.1、局域网IP、内网穿透域名访问服务，必须将对应访问地址完整加入授权列表，哪怕地址指向的是同一个本地服务也不例外
  • 配置修改后存在最长5分钟的生效延迟，修改后不要立刻测试，等待生效后再验证
• 确认客户端ID与配置位置正确
  • One Tap仅支持「Web应用」类型的OAuth客户端ID，不可使用Android、iOS、桌面端等其他类型的客户端ID
  • 授权来源需填写在「已授权的JavaScript来源」输入框，不要错填到「已授权的重定向URI」栏，两个配置项作用完全独立
  • 核对data-client_id字段填入的是完整的客户端ID（格式为xxxxxx.apps.googleusercontent.com），不要错填为客户端密钥，也不要遗漏后缀
• 修复前端代码配置错误
  • 移除当前代码中的data-prompt_parent_id="g_id_onload"配置：该参数需要传入One Tap弹窗的父容器ID，当前配置将加载容器本身作为父容器，会触发DOM挂载异常，部分场景下会连带触发来源校验报错
  • 如果开启了data-itp_support="true"，需确认已完成ITP模式对应的中间页部署，ITP模式下会走独立的域名校验逻辑，配置缺失会直接抛出来源不允许的错误
• 排除特殊场景问题
  • 禁止通过file://协议直接打开本地HTML文件测试，GSI不支持file协议下的来源校验，必须通过本地HTTP服务访问页面
  • 如果本地开发配置了代理、跨域转发，需确认浏览器实际发出的请求Origin头和配置的授权来源完全一致，代理修改Origin头会直接触发校验失败

内容的提问来源于stack exchange，提问作者Akash g krishnan