代码之家  ›  专栏  ›  技术社区  ›  Antenna_

Passport Google oauth在上生成“网络错误”react.js公司应用程序

  •  0
  • Antenna_  · 技术社区  · 5 年前

    Passport axios 来自的请求 react 客户端应用程序,chrome控制台上会出现一条错误消息。

    客户端-react(在端口3000上运行):

    Axios请求 SignInForm.js

    googlelogin(){
       axios.get('/api/users/google_auth')
         .then(()=>console.log("success"))
         .catch(err=>console.log(err))
    }
    

    控制台上的错误消息:

    Error: Network Error
    at createError (createError.js:17)
    at XMLHttpRequest.handleError (xhr.js:87)
    

    服务器端-节点.js(在端口5000上运行):

    passport.use(
      new GoogleStrategy({
        clientID: GOOGLE_CLIENT_ID,
        clientSecret: GOOGLE_CLIENT_SECRET,
        callbackURL: '/api/users/google_auth/redirect'  
      },
      (accessToken, refreshToken, profile, done) => {
        console.log("called")
        User.findOne({email: profile.id})
          .then(user => {
            console.log('googleLogin');
            done(null,user);
          })
          .catch(err => {
            done(err,null,{message:'fail'})
          })
      }
      )
    );
    

    路线/api/用户.js代码:

    router.get('/google_auth',passport.authenticate('google',{
      scope:['profile']
    }),()=>{console.log("test")})
    
    router.get('/google_auth/redirect',(req, res)=>{
      res.send("hi")
    })
    

    enter image description here

    我已经在Youtube、Google、Github和StackOverflow上搜索过了。我不知道该怎么做才能解决这个问题。

    1 回复  |  直到 5 年前
        1
  •  0
  •   tombraider    5 年前

    看看现有的Passport示例,您似乎在尝试在原始版本中使用中间件 get 请求不正确。看看这个例子: https://github.com/passport/express-4.x-facebook-example/blob/master/server.js

    当然,它使用的是Facebook,但是你可以在他们的登录请求中看到他们正在使用解析请求Passport.认证而不是使用中间件。

    将API修改为以下内容:

    router.get('/google_auth', passport.authenticate('google', { scope:['profile'] }));
    
    router.get('/google_auth/redirect', passport.authenticate('google', { failureRedirect: '/login' }), (req, res) => {
      res.send("Logged in.")
    });