使用Passport + Facebook + Express + create-react-app + React-Router + proxy进行身份验证

Question

TLDR:如何从我的React应用程序中的页面启动Facebook Auth进程？

我发现很多帖子都涉及我在这篇文章标题中列出的大多数但不是全部的项目.而且我非常接近于让这个工作,但必须有一些我缺少的东西.

我的应用程序包含一个使用react-router进行路由的create-react-app前端.我在开发环境中运行端口51000.在package.json中,我使用"proxy"将其他路由重定向到我的快速服务器,在端口51001上运行.这通常用于在我的React组件中发出命中服务器的请求.例如:

axios.get('/api/some-stuff')

在我的React组件中调用时,这将成功命中我的Express服务器.

我想确保我的后端路由经过身份验证,并且我选择通过passport-facebook使用Facebook身份验证.我设置它就像我见过的许多在线教程一样.例如,我在我的快速服务器上有一个名为'/ auth/facebook'的路由.如果我去localhost:51001/auth/facebook,它会将我重定向到facebook登录,然后将我重定向回我给它的路线.所以流程按预期工作.

我遇到的具体问题是让React成功启动并完成触发auth的api调用.我试过两种方法.

方法1:通过ajax调用路由

我在componentDidMount中调用了以下内容:

axios.get('/auth/facebook')

这成功点击我的快速服务器,但随后立即在浏览器控制台中生成以下错误:

XMLHttpRequest无法加载 https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http% ... 2Flocalhost%3A51000%2Fauth%2Ffacebook%2Fcallback&client_id = XYZ.从' https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http% ... 2Flocalhost%3A51000%2Fauth%2Ffacebook%2Fcallback&client_id = XYZ' 重定向到' https://www.facebook.com/login. php？skip_api_login = 1&api_key = XYZ ... _&display = page&locale = en_US&logger_id = 7f30b5a1-2ad1-dc31-f08b-70d3cfdd55fa'已被CORS策略阻止:请求的资源上没有"Access-Control-Allow-Origin"标头.因此不允许来源' http:// localhost:51000 '访问.

**方法2:在浏览器中转到路线**

我尝试过的另一件事,就是我在所有教程中看到的,是添加一个链接到我的一个页面,它只是导航到身份验证路径.例如:

<a href="/auth/facebook">Login with Facebook</a>

但是,当我点击这个时,我最终只能访问http:// localhost:51000/auth/facebook,或者只是我的React应用程序中的空白页面.我没有启动代理,当我在浏览器中访问此路由时,我在Express服务器上看不到任何活动,即使它不是我在react-router中定义的路由.

所以我有点卡在这里.单击该标记是否已触发针对我的Express服务器触发的路由？有没有办法让react-router忽略某些路由,以便将它们重定向到我的快速服务器？这似乎在进行AJAX调用时工作正常,但如果我转到localhost:51000/not/a/route,这不会导致请求被重定向到Express.它只加载没有内容的反应页面.

任何帮助表示赞赏.

谢谢,

-担

编辑

所以我现在有点工作,虽然我完全不相信这是"正确"的做事方式.

在我的反应应用程序(召回在端口51000上运行),我有以下链接:

<a href="http://localhost:51001/auth/facebook">Facebook Login</a>

请注意,这直接指向我的API服务器,而不是指向反应路由.导航到此链接会点击快速服务器,并立即重定向到Facebook.登录重定向回我的Express facebook回调,它本身重定向到http:// localhost:51000/somePage,现在回到我的反应应用程序.

理想情况下,该标记将转到/ api/auth/facebook,而不是硬编码转到不同的URL /端口.如果/当我弄清楚如何让react-router通过它而不是像处理它需要加载的页面那样处理时,我会更新这个问题.

编辑2

我对另一个告诉我的人开放,但我认为我目前的做法实际上非常好.我考虑了生产过程中的表现.我将在www.example.com上找到我的反应网站,我的快速服务器可通过api.example.com访问.我登录Facebook的链接将是"api.example.com/auth/facebook".假设成功验证,回调将重定向到"www.example.com/some/route".我认为跳转到"api"URL来执行登录是合理的.最终,试图让react-router忽略某些路由是没有意义的,因为我所有的api调用都将是一条明确的路由.

我意识到我没有为他人提供完整有用的解决方案.一旦我将它们放在一起,我将包含一个包含此登录流程的回购链接,以防其他人发现它有用.

**编辑3**

这是我的项目的链接.让整个项目运行并不是一件轻而易举的事,但只有少数与auth流相关的文件.

您可以在此处查看回购:https://github.com/dan-goyette/Portfolio

Express服务器路由器的位置如下:

https://github.com/dan-goyette/Portfolio/blob/master/portfolio-server/src/Routing/auth.js

在UI中,我使用此组件触发对Express服务器的调用:

https://github.com/dan-goyette/Portfolio/blob/75ca9326e6227d0601cdfa4c0cece672bd347302/portfolio-ui/src/Components/SocialMenuButton/SocialMenuButton.js

你可以在https://www.dan-goyette.com/home看到它,右上角的按钮.

Answer 1

我今天遇到了同样的问题，并通过不使用 的create-react-app代理解决了它，而是在我的后端设置了一个代理到create-react-app.

在我的 Express 应用程序结束时，我有

 // all routes above

 if (env.isDevelopment()) {
   const proxy = require('express-http-proxy')
   app.use('/*', proxy('http://localhost:3000'))
 } else {
   // probably serve up build version in production
 }

只需记住在客户端的 json 包中关闭代理，否则最终可能会出现无限代理循环或其他情况。