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

Question

我有一个带有react / redux前端的应用程序，并表达了使用create-react-app创建的后端。我想使用onelogin和Passportjs进行身份验证。遵循本指南（https://developers.onelogin.com/quickstart/authentication/nodejs），我能够设置所有内容，问题是，我的快速服务器在端口5000上运行，但是react应用程序在端口3000上运行。

[如果我转到localhost:3000/login，则不会发生任何事情，并且如果我转到localhost:5000/login，我的确会通过onelogin进行身份验证，但是什么都不会返回，并且只会卡住。

这是我的/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）

我理解为什么这一切都会发生，因为我的快递服务器没有渲染任何东西。但是我该如何处理？

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

您必须将请求代理到后端，然后将此行添加到packages.json

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

您如何从前端发出身份验证请求？使用react进行身份验证时，我使用react-router，然后使用axios进行身份验证

因此，当用户提交登录表单时，我向登录路由发出了发帖请求以返回JWT（我之前没有使用过护照）。将来来自客户端的所有请求都包括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 Router或试图从后端提供数据，而希望从前端检索数据，请告诉我，我将更改帖子以适合您的身份验证流程