- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我使用 Loopback 和 Passport 身份验证构建了一个后端。它要求我首先访问 http://localhost:3001/auth/github ,它重定向到 GitHub,后者显示登录页面,或者重定向回端口 3001 上的我的应用程序。
现在我正在 :3000 上构建一个 ReactJS 前端。它应该将 AJAX 调用发送到后端,并附加身份验证 token 作为查询字符串参数。我已将端口转发添加到客户端的 package.json
,以便正确处理所有 AJAX 调用。
我不知道如何将身份验证 token (从 http://localhost:3001/auth/github/callback
作为 cookie 接收)发送到客户端。虽然我的 AJAX 调用已正确代理,但当我导航到/auth/github 时,我仍然位于 React 生成的页面上,并且我的 :3001 端点未被命中。如果我访问 :3001/auth/github,我的前端代码不会获取 auth_token cookie。
换句话说,我有两个问题:1. 如何从前端导航到后端的身份验证页面(http://localhost:3001/auth/github
)?2. 如何将#1中获得的cookie拿到我的前端,以便在后续查询中使用?
当我构建一个演示时,我只需要一个快速但肮脏的解决方案,但我愿意考虑其他想法,例如打开弹出窗口和/或 IFrame。
最佳答案
如果您使用 Passport,则只需阅读策略文档即可。我假设身份验证是通过 Oauth 完成的
express 示例
路由.js
api.route('/auth/github')
.get(PassportCtrl.auth);
api.route('/auth/github/callback')
.get(PassportCtrl.authCallback, PassportCtrl.redirect);
PassportCtrl.js
import passport from 'passport';
const auth = passport.authenticate('github', {
scope : ['profile', 'email']
});
const authCallback = passport.authenticate('github');
const redirect = (req, res) => {
res.redirect('/whereveryouwant');
}
const getAuthUser = (req, res) => {
res.json({
user : req.user
})
}
const logOut = (req, res) => {
req.logOut();
res.redirect('/');
}
export default {
auth,
authCallback,
redirect,
getAuthUser,
logOut
}
Passport 初始化
// adding cookie feature
app.use(cookieSession({
maxAge : 30 * 24 * 60 * 60 * 100,
keys : [process.env.COOKIE_SECRET]
}));
// initializing passport
app.use(passport.initialize());
app.use(passport.session());
我忘了,你必须代理
webpack.config.js
devServer: {
proxy: { // proxy URLs to backend development server
'/auth/github': 'http://localhost:3001',
'/api/**' : {
'target' : 'http://localhost:3001'
}
},
hot : true,
contentBase: path.join(__dirname, "dist"),
historyApiFallback : true,
compress: true,
port: 8080
}
react
import React from 'react';
import {connect} from 'react-redux';
import {Link} from 'react-router-dom';
class Header extends React.Component {
renderContent () {
const {auth} = this.props;
switch (auth) {
case null : return;
case false : return (
<li><a href='/auth/google'>Login with google</a></li>
)
default: return ([
<li key={'logout'}><a href='/api/logout'>Log out</a></li>
])
}
}
render () {
const {auth} = this.props;
return (
<nav>
<div className='nav-wrapper'>
<Link className="left brand-logo" to={auth ? '/whereveryouwant' : '/'}>
Your page Name
</Link>
<ul className='right'>
{this.renderContent()}
</ul>
</div>
</nav>
);
}
}
const mapStateToProps = (state) => {
return {
auth : state.auth
}
}
export default connect(mapStateToProps)(Header);
关于reactjs - 结合基于 NodeJS 的 Passport 身份验证和 ReactJS 前端,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50568645/
已经为此工作了几个小时,非常令人沮丧...... router.post('/', passport.authenticate('local-signup', function(err, user,
我正在寻找一种方法让我的客户端使用 facebook JS SDK 进行授权,然后以某种方式将此授权传输到我的 Node 服务器(以便它可以使用 fb graph api 验证请求) 我偶然发现: h
passport.socketio 抛出此错误,同时无法授权用户。 Error: Error: Failed to deserialize user out of session 我已将问题范围缩小到
passport.js 函数passport.serializeUser 和passport.serializeUser 有什么作用?这是维基百科中描述的序列化示例:http://en.wikiped
现代 Passport 和身份证的底部带有machine-readable zone (MRZ),其中包含基本标识信息(可能是OCR友好格式)。 机读区的格式指定了check digits的数量,可帮
我尝试对我的应用程序实现 passport 身份验证策略,但在尝试登录后不断收到以下错误: TypeError: passport.authenticate is not a function at
我正在将 passport 与 loopback 集成,并且工作正常,问题是如何获取访问 token 。 我有一个 web 应用程序(服务于与环回不同的服务器)所以: 发出请求(在环回后端) 这会将我
我使用带有passport-saml 策略 的 Passport 。在策略 上,有一个我想使用的函数。我知道策略是这样使用的: const SamlStrategy = require('passpo
这是我的套接字配置: // set authorization for socket.io io.set('authorization', passportSocketIo.authorize
我是 Passport.js 的新手。我一直在关注以下博客来注册用户 https://scotch.io/tutorials/easy-node-authentication-setup-and-lo
Passport 似乎是简单例份验证、不显眼且不难设置的绝佳选择。我正在构建一个使用 JWT 进行身份验证的 MEAN 堆栈,因此我查看了 Passport JWT。然而,有几件事我很困惑。 1) 假
我已经开始开发一个小项目,在客户端使用 React 和 Redux,后端是用 Node、Express 和 Passport.js 完成的我将尽力描述我几个小时以来所苦苦挣扎的事情。身份验证后,当用户
我正在使用 Passport 本地策略和 Passport Mongoose 本地来创建用户并检查用户身份验证。但是,我想探索使用电子邮件而不是用户名的选项。我按照文件的规定进行操作,但我未经授权。有
我正在使用 Passport 本地策略进行身份验证。在我的快速服务器中,我收到一个注册帖子请求,我应该为新用户将密码保存到数据库。但是我需要在保存到数据库之前对密码进行哈希处理。 但我不确定如何对其进
我正在将 node 与 express + mongoose 一起使用,并尝试将 passport.js 与 restful api 一起使用。 身份验证成功后,我不断收到此异常(我在浏览器上看到回调
我正在尝试在 JWTStrategy 中检查列入黑名单的 JWT token 。 jwtFromRequest 没有采用异步函数,所以我无法在那里检查它。 validate 函数提供对 JWT 负载而
目前,我正在通过 Google 构建登录功能,但我遇到了一些让我感到困惑的问题。 我们可以在一个项目中同时使用 Restful API 和 Graphql API 吗?除了谷歌身份验证,我们需要一些路
我正在使用与 express 配合良好的 Passport 本地策略: passport.use(localStrategy); passport.serializeUser((user, done)
我正在尝试通过passport-facebook 对用户进行身份验证,并且发生了一件非常奇怪的事情,我真的不确定。定义我的路线时,我有这行代码 app.get('/login/facebook',
当我使用 NPM 包“passport-azure-ad”尝试连接到 Azure AD 时,出现以下错误。我已成功连接到 Facebook、Google 和 MSFT Live,成功,但无法弄清楚为什
我是一名优秀的程序员,十分优秀!