如何将 facebook-passport 与 express api 集成到 react 应用程序中？

Posted 2023-02-19

【中文标题】如何将 facebook-passport 与 express api 集成到 react 应用程序中？

【英文标题】：How to integrate facebook-passport in react app with express api?

【发布时间】：2018-08-22 20:18:16

【问题描述】：

我创建了 express api 服务器，它在 localhost:5000 上运行，react 应用程序在 localhost:3000 上运行。现在我正在尝试集成 facebook 身份验证。

我关注了Scotch's tutorial about authenticatation using passport，以便将 facebook 身份验证集成到我自己的应用程序中。我已经克隆了他的repo，在facebook developers 上设置了facebook 登录，它可以正常工作。使用他的示例，我尝试在我的应用程序中设置此流程，但没有成功。在 Firefox 控制台中，我注意到一个差异 - 当我在 scotch 的应用程序中单击“使用 facebook 登录”时，有 3 个请求：

http://localhost:8080/auth/facebook https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http://localhost:8080/auth/facebook/callback&scope=public_profile,email&client_id=CLIENT_ID http://localhost:8080/auth/facebook/callback?code=A_LOT_OF_CHARS

在我的应用中：

http://localhost:5000/auth/facebook https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http://localhost:5000/api/oauth/facebook/callback&scope=public_profile,email&client_id=CLIENT_ID https://www.facebook.com/v2.12/dialog/oauth?redirect_uri=http%3A%2F%2Flocalhost%3A5000%2Fapi%2Foauth%2Ffacebook%2Fcallback#=

所以第三个请求有所不同 - Scotch 被重定向到他的回调，但在我的应用程序中我得到了一个消息链接

参数app_id是必需的

在 Facebook 页面上。

我应该如何配置 react 以使其工作？

【参考方案1】：

您的快递应用中是否有重定向路线？像这样的。

app.get('/auth/facebook/callback',
  passport.authenticate('facebook',  failureRedirect: '/login' ),
  function(req, res) 
    // Successful authentication, redirect home.
    res.redirect('/');
 );

如果你仍然卡住，你可以在这里阅读文档https://github.com/jaredhanson/passport-facebook#readme。希望对你有帮助

【讨论】：

是的，我有。后来我添加了一个简单的 html 页面，其中包含一个正常工作的“/api/oauth/facebook”链接，所以问题出在 react app

您是否在 (developers.facebook.com/apps?) 上创建应用程序？如果是，您可以检查您的 app_id 是否与您护照中的 clientId 匹配？

是的，护照上的一切都很好。正如我在之前的评论中提到的，问题出在客户端