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

Question

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

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

1. http://localhost:8080/auth/facebook
2. 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
3. http://localhost:8080/auth/facebook/callback?code=A_LOT_OF_CHARS

在我的应用中：

1. http://localhost:5000/auth/facebook
2. 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
3. https://www.facebook.com/v2.12/dialog/oauth?redirect_uri=http%3A%2F%2Flocalhost%3A5000%2Fapi%2Foauth%2Ffacebook%2Fcallback#=

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

参数app_id是必需的

在 Facebook 页面上。

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

Answer 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。希望对你有帮助