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

Question

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

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

我们的流程按预期运行。

1. 我们在端口 8080 上启动快速后端，使用 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);

2. 用户单击我们组件之一上的登录按钮，该按钮指向/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>)}

3. 我们的 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');
});

3. 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 发出请求，这是如何完成的？

提前致谢。

Answer 1

我一直面临同样的问题。 我现在得到了解决方案。 假设您的前端在localhost:3000和后端在localhost:9000您已经将 facebook 的回调 URL 设置为 localhost:9000/facebook/callback，对吗？

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

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