使用Passport + Facebook + Express + create-react-app + React-Router +代理进行身份验证 [英] Authentication with Passport + Facebook + Express + create-react-app + React-Router + proxy
问题描述
TLDR：我如何从我的React应用程序中的页面启动Facebook Auth进程？
TLDR: How do I initiate the Facebook Auth process from a page in my React application?
我发现了很多涉及最多的帖子，但是并非所有我在这篇博文标题中列出的项目。而且我已经接近完成这项工作了，但肯定有我缺少的东西。
I've found quite a few posts that touch on most, but not all, of the items I've listed in the title of this post. And I'm pretty close to getting this working, but there must be something I'm missing.
我的应用程序包含一个使用react-router进行路由的create-react-app前端。我在我的开发环境中的端口51000上运行它。在package.json中，我使用代理将其他路由重定向到运行在端口51001上的我的快速服务器。通常，该操作可用于在命中该服务器的React组件中发出请求。例如：
My app consists of a create-react-app front-end using react-router for routing. I have this running on port 51000 in my development environment. In package.json, I'm using "proxy" to redirect other routes to my express server, running on port 51001. This works in general for making requests within my React components that hit the server. For example:
axios.get('/api/some-stuff')
在我的React组件中调用时，这将成功命中我的Express服务器。
When calling within my React component, this will successfully hit my Express server.
我想确保我的后端路由经过了身份验证，并且我选择通过Passport-facebook使用Facebook auth。我已经按照看过的许多在线教程进行了设置。例如，我在快递服务器上有一条名为 / auth / facebook的路由。如果我转到localhost：51001 / auth / facebook，它会将我重定向到facebook进行登录，然后将我重定向到我给它的路由。这样的流程可以按预期工作。
I want to ensure that my back-end routes are authenticated, and I've chosen to use Facebook auth via passport-facebook. I've set this up just like the many online tutorials I've seen. For example, I have a route on my express server named '/auth/facebook'. If I go to localhost:51001/auth/facebook, it redirects me to facebook to login, and then redirects me back to some the route I gave it. So that flow works as expected.
我遇到的特定问题是让React成功地启动并完成触发auth的api调用。我尝试了两种方法。
The specific problem I'm having is getting React to successfully initiate and complete the api call that triggers auth. I have tried two approach.
方法1：通过ajax调用路线
我在我的componentDidMount中调用了以下内容：
I called the following in my componentDidMount:
axios.get('/auth/facebook')
这成功命中了我的快递服务器，但立即在浏览器控制台中生成了以下错误：
This successfully hits my express server, but then immediate generates the following error in the browser console:
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 …_&显示= page& locale = zh_CN& logger_id = 7f30b5a1-2ad1-dc31-f08b-70d3cfdd55fa'
已被CORS策略阻止：请求中不存在 Access-Control-Allow-Origin
标头资源。因此，不允许访问源
' http：// localhost：51000 '。
XMLHttpRequest cannot load https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http%…2Flocalhost%3A51000%2Fauth%2Ffacebook%2Fcallback&client_id=XYZ. Redirect from 'https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http%…2Flocalhost%3A51000%2Fauth%2Ffacebook%2Fcallback&client_id=XYZ’ to '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' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:51000' is therefore not allowed access.
**方法2：转到浏览器中的路由**
**Approach 2: Going to the route in the browser **
另一件事是我我在所有教程中都看到过，已经尝试过将链接添加到我的其中一个页面，该链接可以简单地导航到身份验证路由。例如：
The other thing I've tried, which I've seen in all the tutorials, is to add a link to one of my pages that simply navigates to the authentication route. For example:
<a href="/auth/facebook">Login with Facebook</a>
但是，当我单击此按钮时，我只会出现在 http：// localhost：51000 / auth / facebook ，或者只是我的React应用中的空白页。我没有的代理没有加入，即使我不是在react-router中定义的路由，在浏览器中转到该路由时，Express服务器上也没有任何活动。
However, when I click this, I just end up at http://localhost:51000/auth/facebook, or just a blank page in my React app. The proxy I have doesn't kick in, and I don't see any activity on my Express server when I go to this route in the browser, even though it's not a Route I've defined in react-router.
所以我有点卡在这里。单击该标签是否应该触发该路由针对我的Express服务器？有没有办法告诉react-router忽略某些路由，以便将它们重定向到我的Express服务器？进行AJAX调用时，这似乎工作正常，但如果我转到localhost：51000 / not / a / route，则不会导致请求重定向到Express。它只是加载没有内容的反应页面。
So I'm a bit stuck here. Should clicking that tag have triggered that route to be fired against my Express server? Is there a way to tell react-router to ignore certain routes so that they're redirected to my express server? This seems to work fine when making AJAX calls, but if I go to localhost:51000/not/a/route, this doesn't cause the request to be redirected to Express. It just loads a react page with no content.
感谢您的帮助。
谢谢
-丹
编辑
所以我现在有点工作了，尽管我一点也不相信这是正确的工作方式。
So I kind of have this working now, though I'm not at all confident it' the "right" way to do things.
在我的react应用程序（该召回运行在端口51000上）中，我具有以下链接：
In my react app (which recall is running on port 51000), I have the following link:
<a href="http://localhost:51001/auth/facebook">Facebook Login</a>
请注意，这直接指向我的API服务器，而不是响应路径。导航到此链接将命中快递服务器，并立即重定向到Facebook。登录重定向到我的Express facebook回调，该回调本身也重定向到 http：// localhost：51000 / somePage 现在回到我的应用程序。
Note that this is pointing directly at my API server, not at a react route. Navigating to this link hits the express server, and immediately redirects to Facebook. Logging in redirects back to my Express facebook callback, which itself redirects to http://localhost:51000/somePage, which is now back to my react app.
理想情况下，该标签将转到/ api / auth / facebook，而不是硬编码转到其他URL /端口。如果/当我弄清楚如何使react-router通过它而不是将其视为需要加载的页面时，我将更新此问题。
Ideally that tag would be going to a /api/auth/facebook, instead of hard-coded to go to a different URL/port. I'll update this issue if/when I figure out how to get react-router to pass that through instead of treating it like a page it needs to load.
编辑2
我愿意告诉别人否则，但是我认为我目前的做法实际上还不错。我考虑了事情在生产中的表现。我将在www.example.com上建立我的React网站，并通过api.example.com访问我的Express服务器。我到Facebook登录名的链接将是 api.example.com/auth/facebook。假设身份验证成功，则回调将重定向到 www.example.com/some/route。我认为反弹到 api URL进行登录是合理的。最终，试图让react-router忽略某些路由毫无意义，因为我所有的api调用都将是一条显式路由。
I'm open to someone telling me otherwise, but I think my current approach is actually pretty much fine. I considered how things will behave in production. I will have my react site at www.example.com, with my express server accessible via api.example.com. My link to the Facebook login will be to "api.example.com/auth/facebook". The callback, assuming successful auth, will redirect to "www.example.com/some/route". I think it's reasonable to bounce over to the "api" URL to perform the login. Ultimately there's no point in trying to get react-router to ignore certain routes, since all of my api calls will be to an explicit route.
我知道我不是为他人提供完整而有用的解决方案。将所有内容放在一起后，我将提供指向我的存储库的链接，其中包含此登录流程，以防其他人发现它有用。
I realize I'm not providing a complete helpful solution to others. Once I have it all put together, I'll include a link to my repo that contains this login flow, in case anyone else finds it helpful.
**编辑3 **
这是我项目的链接。要使整个项目都运行起来并不是一件容易的事，但是只有少量文件与auth流相关联。
Here are links to my project. It won't be trivial to get the whole project running, but there are only a handful of files associated with the auth flow.
您可以在此处查看存储库：< a href = https://github.com/dan-goyette/Portfolio rel = noreferrer> https://github.com/dan-goyette/Portfolio
You can view the repo here: https://github.com/dan-goyette/Portfolio
Express服务器路由器在这里：
The Express server router for this is here:
https://github.com/dan-goyette/Portfolio/blob/master/portfolio-server/src/Routing/auth.js
在用户界面中，我正在使用以下组件触发对快递服务器的调用：
In the UI, I'm triggering calls to the express server using this component:
您可以在 https://www.dan-goyette.com/home ，位于右上角的按钮。
You can see it working at https://www.dan-goyette.com/home, the button at the top right.
推荐答案
我也遇到了这个问题-更改CRA代理配置似乎可以解决问题：
I was also running into this issue - changing the CRA proxy config seemed to do the trick:
"proxy": {
"/api": {
"target": "http://localhost:3001/"
}
}
OAuth链接位于 / api / auth / foo ，CRA应用位于 localhost：3000 ，而快速应用位于本地主机：3001
Where the OAuth link is located at /api/auth/foo, CRA app is at localhost:3000, and the express app is at localhost:3001
这篇关于使用Passport + Facebook + Express + create-react-app + React-Router +代理进行身份验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
