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

我使用express作为后端。我在后端实施了Facebook身份验证。如何将Facebook身份验证添加到我的反应应用程序？

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

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

）;

现在我想通过我的反应应用程序调用它，以便当用户登陆主页时，首先他应该通过Facebook进行身份验证，然后才能看到主页。我怎样才能做到这一点？

我试过使用react-router，但我不明白如何使用react-router调用后端。使用fetch命令我也取/登录/ Facebook的：

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

但它给了我CORS错误。

我的反应应用程序是在127.0.0.1:3000和表示服务器在127.0.0.1:3001。

来源

2017-12-18 ASHUTOSH CHANDRA

有几种选择：

如果您正在使用的WebPack开发服务器，你可以设置一个代理您的API。请参阅here

您可以在开发过程中临时禁用cors验证。请参阅here

来源

2017-12-18 03:49:35

如果此问题仅在开发模式下，那么Daniel的答案是正确的。

无论如何，我建议避免直接从：3000应用程序调用：3001 API。这是我会做的。

我将编辑取调用如下，

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

此呼叫将由服务于反应应用后端被接收。现在有案件，

案例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调用。

来源

2017-12-18 04:38:57

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

回答

相关问题