如何将 Facebook 身份验证添加到我的反应应用程序？答案

【问题标题】：How to add facebook authentication to my react app?如何将 Facebook 身份验证添加到我的反应应用程序？
【发布时间】：2017-12-18 03:26:07
【问题描述】：

我使用 express 作为后端。我在后端实现了 facebook 身份验证。

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

router.get('/login/facebook/callback',
    passport.authenticate('facebook',{
        successRedirect : '/home',
        failureRedirect:'/'
})

);

现在我想通过我的 react 应用调用它，这样当用户登陆主页时，首先他应该通过 facebook 进行身份验证，然后只有他才能看到主页。我该怎么做？

我尝试使用 react-router，但我不明白如何使用 react-router 调用后端。我还使用 fetch 命令获取了 /login/facebook ：

componentDidMount(){
    fetch("127.0.0.1:3001/login/facebook");

但它给了我 CORS 错误。

我的 React 应用程序位于 127.0.0.1:3000，快递服务器位于 127.0.0.1:3001。

【问题讨论】：

标签： node.js reactjs express

【解决方案1】：

如果这个问题只是在开发模式下，那么丹尼尔的回答是正确的。

无论如何，我建议避免直接从 :3000 应用程序调用 :3001 api。这就是我要做的。

我将按如下方式编辑 fetch 调用，

componentDidMount(){
    fetch("/login/facebook");
}

此调用将由为 react 应用程序提供服务的后端接收。现在有三个案例，

案例 1：您的文件服务应用将有一个代理方法，可以将请求转发到 API。例如阅读here

案例 2 这是我的推荐方法。我会简单地在 :3000 服务器中编写身份验证逻辑，并且只使用 :3001 API 来处理应用程序的业务逻辑。

案例 3：如果您有一个后端应用程序 (:3000)，比如使用 expressJs 编写，您可以将请求转发到 :3001 API。这是一个示例代码，

client.send({
    method: req.method,
    path: req.url,
    data: req.body,
    params: req.params
}).then( (response) => {
    // Something
}).catch( (err) => {
    // Handle error
});

这里的客户端是一个模块，它使用request 模块进行HTTP 调用。您可以将上述调用实现为快速中间件，以将其用于所有 HTTP 调用。

【讨论】：

【解决方案2】：

有几种选择：

如果你使用 webpack 开发服务器，你可以为你的 api 设置一个代理。见here

您可以在开发过程中暂时禁用 cors 验证。见here

【讨论】：