React集成Google登录报popup_closed_by_user错误如何解决

按优先级从高到低排查以下问题，90%以上的该错误都能定位解决：

• 核对Google Cloud Console的授权来源配置（最高发原因）
  进入对应项目的OAuth 2.0客户端ID配置页，把你当前访问页面的完整来源无错添加到「已授权的JavaScript来源」列表：
  • 本地开发必须带端口，比如本地跑在3000端口就加http://localhost:3000，不要加末尾斜杠，不要把http写成https，除非你本地手动开了HTTPS证书
  • 如果你是用127.0.0.1:3000访问本地服务，必须单独加http://127.0.0.1:3000，Google会把localhost和127.0.0.1识别为两个完全独立的来源
  • 线上环境要加实际访问的完整域名，比如https://your-app.com
    配置修改后最长可能需要5分钟生效，不要改完立刻测试。
• 排查浏览器拦截逻辑
  你已经关闭了第三方Cookie阻止，还需要检查：
  • 禁用所有广告拦截、隐私保护类插件（AdBlock、uBlock、各类安全管家插件都可能拦截Google弹窗的脚本加载），或者用纯净的无痕模式测试（注意无痕模式默认会开启第三方Cookie阻止，要手动关闭）
  • 确认你的页面没有被嵌套在iframe中，Google授权服务禁止在非顶层窗口触发登录弹窗
  • 点击登录按钮时不要按住Ctrl/Command触发新标签页打开逻辑，会直接中断弹窗流程
• 修复代码配置问题
  你当前的代码有两个容易触发错误的点：
  1. 自定义渲染的Button点击事件没有阻止表单默认提交，点击时会触发表单submit逻辑冒泡，导致浏览器把弹窗判定为非用户主动触发直接拦截。给onClick事件加e.preventDefault()即可
  2. 显式添加uxMode="popup"参数，强制组件走弹窗授权模式，避免默认配置和前端路由逻辑冲突触发redirect模式异常
     修正后的GoogleLogin组件参考配置：

  <GoogleLogin
    clientId="你的Web类型客户端ID"
    render={(renderProps) => (
      <Button
        className={classes.googleButton}
        color="primary"
        fullWidth
        onClick={(e) => {
          e.preventDefault();
          renderProps.onClick(e);
        }}
        disabled={renderProps.disabled}
        startIcon={<Icon/>}
        variant="contained"
      >
        Google Sign In
      </Button>
    )}
    onSuccess={googleSuccess}
    onFailure={googleFailure}
    cookiePolicy="single_host_origin"
    uxMode="popup"
  />
  

• 排查依赖版本问题
  react-google-login官方已经停止维护超过2年，最新稳定版v5.2.2之后的beta版本、以及旧版本对新版本Chrome、Edge的Cookie策略适配存在已知问题：
  • 先把依赖固定到稳定版：执行npm install react-google-login@5.2.2 或 yarn add react-google-login@5.2.2，删除node_modules和锁文件重新安装
  • 如果以上步骤都试了还是报错，直接迁移到Google官方维护的@react-oauth/google库，旧库已经不跟进Google身份服务的接口变更，后续还会出现更多兼容问题

快速定位技巧：打开浏览器开发者工具的Network面板，点击登录按钮时筛选accounts.google.com的请求，如果返回值里带invalid_origin字段，直接回去检查授权来源配置即可，不用排查其他点。

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