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

Posted 2023-03-08

【中文标题】Passport.js Google 策略不适用于 React 应用程序

【英文标题】：Passport.js Google strategy is not working with the React application

【发布时间】：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);
      );
  

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

提前致谢

【参考方案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'] ));

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