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

Question

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

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

我们的流程正在按预期运行。

1. 我们在端口 8080 上启动 Express 后端，使用 cookie-session 初始化 Passport:

    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”上公开 Passport 流程的路线:

    /** 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 端点。

此时，前端已正确定向到仪表板组件。我们可以在开发者控制台中看到设置了带有身份验证的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 操作和化简器。

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

如果解决方案是创建一个新路由 /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 获取到后端 URL(即 localhost:9000/facebook/callback)的发布请求，其中包含您收到的用户详细信息Facebook。

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