Passport.js Google 策略不适用于 React 应用程序

Question

我正在使用 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");
});

Axios 从 React 代码中调用，

  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);
      });
  }

我被困在这里，寻求帮助。

提前致谢

Answer 1

对于 OAuth 流程，来自 React 前端的调用有点不同。而不是使用正常的后端调用fetch或axios 进行如下调用：

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

此命令将向后端服务器发出获取请求，并同时打开该谷歌登录窗口。我花了很多时间来弄清楚这一点，但这就是方法......