- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
编辑:出于某种原因,我的 Vue 前端没有设置 session cookie
目标:
使用 Twitch 实现登录并在前端和后端之间同步经过身份验证的 session
描述:
我在使用下述架构的开发环境中进行 Passport.js 身份验证时遇到问题。我正在尝试使用 passport-twitch
前端:Vue.js、webpack
后端:Node、Express、Passport
我的开发环境:
我运行 npm run dev
并有一个热重载服务器在 localhost:8080
上运行我的 Vue.js 客户端。请注意,这个用于重新加载前端的热重载服务器仅在我开发时运行。
我的 Node 后端在 localhost:3000
上运行时也提供一些 API,我的本地前端将向本地后端发出 HTTP 请求。
生产环境
在准备生产时,我将在我的 Vue.js 前端运行 npm run build
,它会被缩小并作为纯静态 HTML 放置在 dist
文件夹中, CSS 和 JS 文件。
我的 Node/Express 后端服务器将提供这些静态文件并支持后端 API。
代码
这是我在 app.js
文件中导入的 auth.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 个服务器在开发环境中运行。
在开发中编写和测试前端代码时,我在 localhost:8080
运行热重载前端,并调用后端。
但我需要调用 localhost:3000/auth/twitch
将用户重定向到 Login with Twitch
页面。但是,当用户完成登录时,它会将我重定向到 localhost:3000/auth/callback
,这将重定向到 localhost:3000/
。
此时经过身份验证的 session 已断开连接,前端不知道如何进行身份验证?
如何在开发模式下在 Vue.js 客户端/前端和 Node 后端之间同步经过身份验证的 session ?
// 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 || {})
})
最佳答案
基本上我只需要使用 withCredentials: true
初始化 Axios
从'axios'导入axios
export default() => {
return axios.create({
baseURL: `http://localhost:8081`,
withCredentials: true
})
}
此外,当从我的 OAuth 回调重定向时,我必须将其更改为重定向到我的 localhost:8080
(热重载 Vue 前端),而不是我的 Node 后端在 本地主机:3000
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')
})
关于node.js - 在开发环境中使用 Vue.js 热重载服务器 + Node 服务器进行 Passport.js 身份验证时出现问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48366429/
我正在学习构建单页应用程序 (SPA) 所需的所有技术。总而言之,我想将我的应用程序实现为单独的层,其中前端仅使用 API Web 服务(json 通过 socket.io)与后端通信。前端基本上是
当我看到存储在我的数据库中的日期时。 这是 正常 。日期和时间就是这样。 但是当我运行 get 请求来获取数据时。 此格式与存储在数据库 中的格式不同。为什么会发生这种情况? 最佳答案 我认为您可以将
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我正在尝试使用backbone.js 实现一些代码 和 hogan.js (http://twitter.github.com/hogan.js/) Hogan.js was developed ag
我正在使用 Backbone.js、Node.js 和 Express.js 制作一个 Web 应用程序,并且想要添加用户功能(登录、注销、配置文件、显示内容与该用户相关)。我打算使用 Passpor
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗?更新问题,使其仅关注一个问题 editing this post . 已关闭 8 年前。 Improve this ques
我尝试在 NodeJS 中加载数据,然后将其传递给 ExpressJS 以在浏览器中呈现 d3 图表。 我知道我可以通过这种方式加载数据 - https://github.com/mbostock/q
在 node.js 中,我似乎遇到了相同的 3 个文件名来描述应用程序的主要入口点: 使用 express-generator 包时,会创建一个 app.js 文件作为生成应用的主要入口点。 通过 n
最近,我有机会观看了 john papa 关于构建单页应用程序的精彩类(class)。我会喜欢的。它涉及服务器端和客户端应用程序的方方面面。 我更喜欢客户端。在他的实现过程中,papa先生在客户端有类
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我是一个图形新手,需要帮助了解各种 javascript 2D 库的功能。 . . 我从 Pixi.js 中得到了什么,而我没有从 Konva 等基于 Canvas 的库中得到什么? 我从 Konva
我正在尝试将一些 LESS 代码(通过 ember-cli-less)构建到 CSS 文件中。 1) https://almsaeedstudio.com/ AdminLTE LESS 文件2) Bo
尝试查看 Express Passport 中所有登录用户的所有 session ,并希望能够查看当前登录的用户。最好和最快的方法是什么? 我在想也许我可以在登录时执行此操作并将用户模型数据库“在线”
我有一个 React 应用程序,但我需要在组件加载完成后运行一些客户端 js。一旦渲染函数完成并加载,运行与 DOM 交互的 js 的最佳方式是什么,例如 $('div').mixItUp() 。对
请告诉我如何使用bodyparser.raw()将文件上传到express.js服务器 客户端 // ... onFilePicked(file) { const url = 'upload/a
我正在尝试从 Grunt 迁移到 Gulp。这个项目在 Grunt 下运行得很好,所以我一定是在 Gulp 中做错了什么。 除脚本外,所有其他任务均有效。我现在厌倦了添加和注释部分。 我不断收到与意外
我正在尝试更改我的网站名称。找不到可以设置标题或应用程序名称的位置。 最佳答案 您可以在 config/ 目录中创建任何文件,例如 config/app.js 包含如下内容: module.expor
经过多年的服务器端 PHP/MySQL 开发,我正在尝试探索用于构建现代 Web 应用程序的新技术。 我正在尝试对所有 JavaScript 内容进行排序,如果我理解得很好,一个有效的解决方案可以是服
我是 Nodejs 的新手。我在 route 目录中有一个 app.js 和一个 index.js。我有一个 app.use(multer....)。我还定义了 app.post('filter-re
我正在使用 angular-seed用于构建我的应用程序的模板。最初,我将所有 JavaScript 代码放入一个文件 main.js。该文件包含我的模块声明、 Controller 、指令、过滤器和
我是一名优秀的程序员,十分优秀!