Question

编辑：出于某种原因，我的Vue前端没有设置会话cookie

目标：

使用Twitch实施登录并在前端和后端之间同步经过身份验证的会话

说明

我在使用下面描述的架构的开发环境中使Passport.js身份验证工作时遇到问题。我正尝试使用passport-twitch

实施使用Twitch登录（社交网站）

前端：Vue.js，webpack

后端：Node，Express，Passport

我的开发环境：

我运行npm run dev并在localhost:8080上运行我的Vue.js客户端的热重装服务器。请注意，用于重新加载前端的热重载服务器仅在我开发时运行。

我在localhost:3000上运行时，我的Node后端也提供了一些API，我的本地前端会向本地后端发出HTTP请求。

生产环境

准备生产时，我将在我的Vue.js前端运行npm run build，它将被缩小并放在dist文件夹中，作为纯静态HTML，CSS和JS文件。

My Node / Express后端服务器将提供这些静态文件以及支持后端API。

代码

这是我在auth.js文件中导入的app.js模块，npm start将启动服务器：

const passport = require('passport')
const TwitchStrategy = require('passport-twitch').Strategy

// Retrieve our encrypted secrets depending on the environment
const config = require('config')

// Postgresql connection
var knex = require('knex')({
  client: 'pg',
  connection: config.get('postgres')
});

passport.use(new TwitchStrategy({
  clientID: config.get('twitch.clientID'),
  clientSecret: config.get('twitch.clientSecret'),
  callbackURL: config.get('twitch.authCallbackURL'),
  scope: 'user_read'
}, (accessToken, refreshToken, profile, done) => {
  // Upsert into users table
  knex.raw(`
    INSERT INTO users
      (twitch_id)
    VALUES
      (${profile.id})
    ON CONFLICT (twitch_id) DO UPDATE SET
      updated_at = now() at time zone 'utc'
    WHERE users.twitch_id = '${profile.id}'
    RETURNING *`)
  .then((rows, err) => {
    return done(err, profile)
  })
}))

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

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

module.exports = passport

我在localhost:3000后端运行这些端点以支持passport-twitch

app.get('/auth/twitch', passport.authenticate('twitch'))

app.get('/auth/twitch/callback', passport.authenticate('twitch', { failureRedirect: '/'}), (req, res) => {
  // Successful authentication, redirect home.
  return res.redirect('/')
})

在开发环境工作流程中出现问题

我在开发环境中运行了2台服务器。

在dev中编写和测试前端代码时，我在localhost:8080运行热重新加载的前端，然后调用后端。

但我需要致电localhost:3000/auth/twitch将用户重定向到Login with Twitch页面。但是，当用户完成登录后，它会将我重定向到localhost:3000/auth/callback，重定向到localhost:3000/。

此时经过身份验证的会话已断开连接，前端不知道如何进行身份验证？

如何在开发模式下在Vue.js客户端/前端和Node后端之间同步经过身份验证的会话？

// This helps me get the current authenticated user in the session (returns empty hash in this case)
// Works fine in production mode since the Node backend gets to serve the minified frontend files
app.get('/self', (req, res) => {
  res.json(req.user || {})
})

Answer 1

基本上我只需用withCredentials: true

初始化Axios

从'axios'中导入axios

export default() => {
  return axios.create({
    baseURL: `http://localhost:8081`,
    withCredentials: true
  })
}

此外，从我的OAuth回调重定向时，我必须将其更改为重定向到我的localhost:8080（热重新加载Vue前端），而不是我的Node后端在localhost:3000 <处提供的静态文件/ p>

app.get('/auth/twitch/callback', passport.authenticate('twitch', { failureRedirect: '/'}), (req, res) => {
  // Successful authentication, redirect home.
  if(process.env.NODE_ENV === 'production') return res.redirect('/')
  res.redirect('http://localhost:8080')
})

使用Vue.js热重装服务器和开发环境中的节点服务器验证Passport.js身份验证问题

1 个答案: