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

【问题标题】：Passport.js Google strategy is not working with the React applicationPassport.js Google 策略不适用于 React 应用程序
【发布时间】：2019-07-03 04:15:40
【问题描述】：

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

当我启动我的服务器并通过浏览器访问 API 时，它会启动谷歌登录页面。但是当我从反应前端点击 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 调用，

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

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

提前致谢

【问题讨论】：

标签： node.js reactjs passport.js passport-local passport-google-oauth

【解决方案1】：

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

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

此命令将向后端服务器发出 get 请求并同时打开该 google 登录窗口。我花了很多时间来解决这个问题，但这就是方式......

【讨论】：

考虑也支持这个问题，以便其他人可以轻松找到答案。

【解决方案2】：

我认为 Passport 仅适用于服务器。它可能正在执行重定向或类似的操作。

【讨论】：

【解决方案3】：

你的护照下的一些东西。使用添加另一个参数

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

你能发布你的反应代码吗？

【讨论】：