从onelogin进行身份验证并重定向到仪表板

Question

我有一个使用create-react-app创建的带有react/redux前端和express后端的应用程序。我想使用onelogin和passportjs进行身份验证。遵循本指南(https://developers.onelogin.com/quickstart/authentication/nodejs)我可以设置所有内容，问题是，我的express服务器在5000端口上运行，但react应用程序在3000端口上运行。

如果我去localhost:3000/login，什么都不会发生，如果我去了localhost:5000/login，我确实用一个登录名进行了身份验证，但什么都没有返回，它只是被卡住了。

这是我的/login代码

app.get('/login', passport.authenticate('openidconnect', {
successReturnToOrRedirect: "/",
scope: 'profile',
}));

这是回调

app.get('/oauth/callback', passport.authenticate('openidconnect', {
callback: true,
successReturnToOrRedirect: '/',
failureRedirect: '/login'
}));

这是完整的代码(https://github.com/onelogin/onelogin-oidc-node/blob/master/1.%20Auth%20Flow/app.js)

我理解为什么会发生这种情况，因为我的express服务器没有呈现任何内容。但是我该怎么处理呢？

Answer 1

重定向到localhost:3000/create而不是/create修复了它。不确定是否是最佳实践。

app.get('/login', passport.authenticate('openidconnect', {
successReturnToOrRedirect: "localhost:3000/create",
scope: 'profile',
}));
app.get('/oauth/callback', passport.authenticate('openidconnect', {
callback: true,
successReturnToOrRedirect: 'http://localhost:3000/create',
failureRedirect: 'http://localhost:3000/login'
}));

Answer 2

您必须将请求代理到后端，将此行添加到您的包中。json

"proxy": "http://127.0.0.1:5000/"

您是如何从前端提出身份验证请求的？当使用react进行身份验证时，我使用react路由器，然后使用axios对进行身份验证

因此，当用户提交登录表单时，我会向登录路径发出post请求，以返回JWT(我以前从未使用过护照(。来自客户端I的所有未来请求都包括jwt，以验证用户是否已通过身份验证。

import Cookies from "js-cookie";
import QueryString from "query-string";
import axios from 'axios';

let myUrl =  "login/";
let myData = QueryString.stringify({
...this.state.form, 
});
axios.post(myUrl, myData,{
headers: {
"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
"cache-control": "no-cache",
},
})
.then((response) => {
// store token in cookies
// redirect to authenticated route
Cookies.set('token', response.data.token,  { expires: 1/24 }) 
})
.catch((error) => {
//handle displaying error to user here
})

如果您没有使用react路由器，或者试图从后端提供数据，而不是从前端检索数据，请告诉我，我会更改我的帖子以适应您的身份验证流程