Node.js Passport.js Google strategy不适用于React应用程序

我正在使用passport.js谷歌策略进行用户身份验证。 我正在使用OAUTH2

当我启动服务器并通过浏览器点击API时，它会启动google登录页面。 但当我从react前端点击API时，它从未启动谷歌登录页面

请查找下面的服务器代码

const bodyParser = require('body-parser');
const express = require('express');
const passport = require('passport');
const GoogleStrategy = require('passport-google-oauth').OAuth2Strategy;
const app = express();
const cors = require('cors');

app.use(passport.initialize());
app.use(passport.session());
app.use(cors());

app.use((req, res, next) => {
    res.setHeader("Access-Control-Allow-Origin", "*");
    res.setHeader(
        "Access-Control-Allow-Methods",
        "GET, POST, OPTIONS, PUT, PATCH, DELETE"
    );
    res.setHeader(
        "Access-Control-Allow-Headers",
        "X-Requested-With,content-type"
    );
    res.setHeader("Access-Control-Allow-Credentials", true);
    next();
});

app.use(bodyParser.urlencoded({
    extended: true
}));
app.use(bodyParser.json());


passport.use('google', new GoogleStrategy({
    clientID: "clientID", -- my client id
    clientSecret: "clientSecret", -- my clientsecret
    callbackURL: "callbackURL" -- url
},
    function (accessToken, refreshToken, profile, done) {
        // User.findOrCreate({ googleId: profile.id }, function (err, user) {
        //  console.log(err,user);
        //   return done(err, user);
        // });
        console.log(profile);
        return done(err, user);
    }
));

app.get('/googleauth',
    passport.authenticate('google', { scope: ['https://www.googleapis.com/auth/plus.login'] }));

passport.serializeUser(function (user, done) {
    done(null, user);
})

passport.deserializeUser(function (user, done) {
    done(null, user);
})

app.listen(4000, () => {
    console.log("REST server started on port 4000");
});

来自react代码的Axios调用

  handleJGoogleLogin(e) {
    e.preventDefault();
    var current = this;
    axios.get('http://localhost:4000/googleauth')
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
  }

我被困在这里，寻求帮助

---

提前谢谢

我想Passport这个东西只能在服务器上使用。它可能在执行重定向或类似操作。

我认为Passport只在服务器上起作用。它可能正在执行重定向或类似操作。

您的passport下面有一些内容。请使用add-in另一个参数

   passport.use('google', new GoogleStrategy({
      clientID: "clientID", -- my client id
      clientSecret: "clientSecret", -- my clientsecret
      callbackURL: "callbackURL" -- url
      proxy: true
     },

   change:
          const GoogleStrategy = require('passport-google- 
    auth').OAuth2Strategy;
     to: 
         const GoogleStrategy = require('passport-google-oauth20').Strategy;

      add in a second scope of profile
        app.get('/googleauth',
               passport.authenticate('google', { scope: 
               ['https://www.googleapis.com/auth/plus.login','profile'] }));

---

您可以发布您的react代码吗？

在您的passport下有一些内容。请使用add in另一个参数

   passport.use('google', new GoogleStrategy({
      clientID: "clientID", -- my client id
      clientSecret: "clientSecret", -- my clientsecret
      callbackURL: "callbackURL" -- url
      proxy: true
     },

   change:
          const GoogleStrategy = require('passport-google- 
    auth').OAuth2Strategy;
     to: 
         const GoogleStrategy = require('passport-google-oauth20').Strategy;

      add in a second scope of profile
        app.get('/googleauth',
               passport.authenticate('google', { scope: 
               ['https://www.googleapis.com/auth/plus.login','profile'] }));

---

您可以发布您的react代码吗？

来自react前端的调用与OAuth流稍有不同。而不是使用fetch或axios进行常规后端调用 这样打电话：

window.open(`http://localhost:${backend-port}/auth/google`, "_self");

此命令将向后端服务器发出get请求，同时打开google登录窗口。

---

我花了很多时间才弄明白这一点，但这就是方法…

来自react前端的调用对于OAuth流来说有点不同。而不是使用fetch或axios进行常规后端调用 这样打电话：

window.open(`http://localhost:${backend-port}/auth/google`, "_self");

此命令将向后端服务器发出get请求，同时打开google登录窗口。

---

我花了很多时间来解决这个问题，但这是……/P>考虑投票的问题，所以其他人可以很容易地找到答案。