迁移Web端Sign in with Google至新GSI方案时遇403 Forbidden错误求助

按钮能正常渲染但页面加载出现403，结合你的新旧代码，可从以下几个方向排查：

可能的问题及解决步骤 #

1. 授权来源配置不匹配 #

Google GSI对授权域名的验证比旧方案更严格，即便旧Client ID曾正常使用，也需确认Google Cloud Console中：

• 进入API和服务 -> 凭据页面，找到你的Web类型Client ID
• 检查已授权的JavaScript来源是否包含当前网站的完整地址（需带协议http/https，本地开发要加端口号，比如http://localhost:3000）

2. useEffect依赖缺失 #

新代码中useEffect的依赖数组为空，但内部使用了googleClientId这个必填prop。若googleClientId是异步加载的（比如从接口获取），会导致初始化时使用无效ID触发403。需将googleClientId添加到依赖数组：

useEffect(() => {
  // ... 现有脚本加载逻辑
}, [googleClientId]) // 添加上依赖项

3. prompt()触发的请求异常 #

调用window.google.accounts.id.prompt()会自动触发一键登录弹窗请求，该请求可能因Client ID配置问题返回403。可暂时注释这行代码，观察403是否消失，以此确认是否为该请求导致。

4. Client ID类型错误 #

确保你的Client ID是Web应用类型，Google GSI仅支持Web类型的凭据，iOS/Android等其他类型无法兼容。

代码优化建议 #

为避免重复插入GSI脚本，可在useEffect中先做存在性检查：

useEffect(() => {
  // 避免重复加载脚本
  if (document.querySelector('script[src="https://accounts.google.com/gsi/client"]')) {
    return;
  }
  const script = document.createElement('script')
  script.type = 'text/javascript'
  script.async = true
  script.defer = true
  script.onload = () => {
    window.google.accounts.id.initialize({
      client_id: googleClientId,
      scope: 'email profile',
      ux_mode: 'popup',
      callback: (response) => googleOmniauthCallback(response.credential),
    })
    window.google.accounts.id.renderButton(
      document.getElementById('buttonDiv'),
      { theme: 'outline', size: 'large' },
    )
    // 暂时注释以排查问题
    // window.google.accounts.id.prompt()
  }
  script.src = 'https://accounts.google.com/gsi/client'
  document.head.appendChild(script)
}, [googleClientId])

内容的提问来源于stack exchange，提问作者Chris_Gav