React+Node.js后端实现Google OAuth 2.0注册无登录弹窗无报错排查

1. 前端调用逻辑错误（核心原因，直接导致不弹窗） #

你当前的实现存在两层逻辑冲突，且用了错误的调用方式：

• 不能用axios.get请求/auth/google接口：ajax请求默认会自动跟随302重定向，passport返回的跳转到谷歌登录页的响应会被axios静默处理，既不会触发浏览器跳转，也不会抛出错误，所以你看不到任何报错信息，自然不会弹出登录页
• a标签的href和onClick同时触发，逻辑冲突

修复方案： #

删掉没用的googleSignUp方法，直接保留a标签的原生跳转即可，把对应代码改成：

// 直接删除googleSignUp函数，a标签修改为如下形式
<a href="/auth/google">google</a>

如果你的React前端跑在3000端口、后端服务在5000端口，要把href写完整：
<a href="http://localhost:5000/auth/google">google</a>

2. Google Strategy回调参数错误 #

你配置了passReqToCallback: true，但回调函数的第一个参数应该是req对象，你当前的参数顺序完全错误，且未定义err变量就直接调用done(err, profile)，会导致回调执行报错

修复方案： #

把googleStrategy.js里的回调函数改成正确的参数顺序：

// 原回调函数 function(token, tokenSecret, profile, done) 替换为如下内容
function(req, accessToken, refreshToken, profile, done) {
  console.log(profile)
  console.log(accessToken)
  console.log(refreshToken)
  // 不要使用未定义的err变量，无业务错误时先传null，后续写用户查询逻辑时再处理错误场景
  return done(null, profile);
}

3. 回调接口逻辑优化 #

你现在的回调接口直接返回JSON，用户授权完成后会停留在空白的JSON返回页，不会跳回你的前端页面，可以调整逻辑：
如果是前后端分离部署，授权完成后用res.redirect跳回前端的指定页面，示例如下：

router.get("/auth/google/callback",(req, res, next)=>{
    passport.authenticate("google-signUp",(err, user, info) =>{
        if (err) {
            // 跳回前端登录页携带错误参数
            return res.redirect("http://localhost:3000/login?error="+encodeURIComponent(err.message))
        }
        // 登录成功后跳回前端首页，也可以携带用户id参数
        return res.redirect("http://localhost:3000/home/"+user.id)
    })(req, res, next)
})

4. 额外配置检查 #

如果你的React前端跑在http://localhost:3000，需要去谷歌开发者控制台把已授权JavaScript来源URI加上http://localhost:3000，不然跨域会被谷歌拦截。

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