facebook-passport 在 node.js 后端带有 react-redux答案

【问题标题】：facebook-passport with react-redux on node.js backendfacebook-passport 在 node.js 后端带有 react-redux
【发布时间】：2019-03-21 15:10:12
【问题描述】：

很抱歉，如果之前有人问过这个问题，我们已经研究并观看了一些教程，但似乎没有一个能够解决我们对如何在客户端处理用户的疑问。

我们正在尝试使用 Node.js 上的护照通过 Facebook（或任何其他策略提供者）进行身份验证，通过触发来自 React/Redux 应用程序的流程，我希望在用户登录时允许访问某些组件在。

我们的流程按预期运行。

我们在端口 8080 上启动 express 后端，使用 cookie-session 初始化护照：

    const app = express();
    // Use JSON for req.body
    app.use(bodyParser.json());
    // Set up cookies for passport logged in sessions
    app.use(cookieSession(settings.cookies));
    // Initialize passport
    app.use(passport.initialize());
    app.use(passport.session()); // Calls serializeUser & deserializeUser
    // Share static files
    app.use(express.static(path.join(__dirname, '../build')));
    // Register  routes
    app.use('/auth', authRouter);

用户点击我们的一个组件上的登录按钮，它指向 /auth/facebook API

            render() {
        return (<div className="container">
            <h3>You need to be logged in to see this</h3>
            {/*Using a fetch onClick does not work because of CORS, use <a> */}
            <a href="https://localhost:8080/auth/facebook">
                <button >LOGIN WITH FACEBOOK</button>
            </a>
            </div>)}

我们的 express 应用在 'auth' 上公开护照流的路线：

    /** authRouter **/
router.get('/facebook', passport.authenticate('facebook', { scope: ['email'] }));

//Facebook will redirect the user to this URL after approval.  
router.get('/facebook/callback', passport.authenticate('facebook'), (req, res) => {
    res.redirect('/dashboard');
});

Facebook 登录显示弹出窗口，用户被重定向到 /facebook/callback 端点。

此时前端已正确定向到仪表板组件。我们可以在开发者控制台中看到设置了 auth 的 cookie。但我们不知道如何访问后端 req.user 中的用户信息。

我们希望在显示使用此数据的其他组件之前访问用户信息。入口点 app.js 使用 React Routes，例如：

  render() {
    return (
      < BrowserRouter >
        <div className='App'>
          <Layout title={'Passport Demo'}>
            <Route exact path='/' render={() => { return (<h1>This would be home</h1>) }} />
            {/* Hide other components unless logged in */}
            {this.state.isLoggedIn ?
              <div>
                <Route path='/dashboard' component={Home} />
                <Route path='/explore' component={Explore} />
              </div> : <Login />
            }
          </Layout>
        </div>
      </BrowserRouter >
    );
  }

从 Facebook 成功重定向后，我们如何设置 isLoggedIn 和用户数据状态？ -- 理想情况下使用 redux 操作和 reducer。

我们如何将用户数据从后端传递到前端？

如果解决方案是创建一个新路由 /users 只是为了获取数据，我仍然需要访问 userID/token 以使用 fetch 或 axios 发出请求，这是如何完成的?.

提前致谢。

【问题讨论】：

标签： node.js reactjs facebook react-redux passport.js

【解决方案1】：

我也遇到过同样的问题。我现在得到了解决方案。让你的前端在localhost:3000，后端在localhost:9000 你把facebook的回调地址设置为localhost:9000/facebook/callback吧？

您需要将其更改为localhost:3000/login/social（只是一个示例，表明您需要将回调 URL 更改为前端路由）。因此，这条路线将获取用户详细信息，就像您在后端收到的一样（localhost:9000/facebook/callback）。现在从localhost:3000/login/social 获取一个帖子请求到后端 URL（即localhost:9000/facebook/callback），其中包含您从 Facebook 收到的用户详细信息。

现在，不是从后端重定向，而是 res.send(token)，这样您就可以在前端接收令牌。然后重定向

【讨论】：