Question

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

我发现很多帖子涉及我在本帖子标题中列出的大部分内容，但不是全部内容。我已经非常接近于让这个工作，但必须有一些我不知道的东西。

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

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

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

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

我遇到的具体问题是让React成功启动并完成触发身份验证的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。重定向＆＃39; https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http% ... 2Flocalhost％3A51000％2Fauth％2Ffacebook％2Fcallback＆amp; client_id = XYZ'to ＆＃39; https://www.facebook.com/login.php?skip_api_login=1&api_key=XYZ ... _＆安培;显示=页面＆安培;语言环境= EN_US＆安培; logger_id = 7f30b5a1-2ad1-DC31-f08b-70d3cfdd55fa＆＃39; 被CORS政策阻止：No＆＃39; Access-Control-Allow-Origin＆＃39; 标头出现在请求的资源上。起源＆＃39; http://localhost:51000＆＃39;因此不允许访问。

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

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

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

但是，当我点击此内容时，我只是在http://localhost:51000/auth/facebook结束，或者只是我的React应用中的空白页面。我没有启动代理，当我在浏览器中访问此路线时，我在Express服务器上看不到任何活动，即使它不是路线I＆＃39;在react-router中定义。

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

感谢任何帮助。

谢谢，

-Dan

修改

所以我现在有点工作了，虽然我完全没有信心这个＆＃39; ＆＃34;权利＆＃34;做事的方式。

在我的反应应用程序中（召回在端口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的链接将是＆＃34; api.example.com/auth/facebook"。假设成功验证，回调将重定向到＆＃34; www.example.com/some/route"。我认为反弹到＆＃34; api＆＃34;是合理的。用于执行登录的URL。最终，试图让react-router忽略某些路由是没有意义的，因为我所有的api调用都是明确的路由。

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

**编辑3 **

以下是我项目的链接。让整个项目运行起来并不容易，但是只有少数文件与auth流相关联。

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

Express服务器路由器就在这里：

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

在用户界面中，我使用此组件触发对快速服务器的调用：

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

您可以在https://www.dan-goyette.com/home处看到它，右上角的按钮。

Answer 1

我也遇到了这个问题 - 更改CRA代理配置似乎可以解决问题：

"proxy": {
   "/api": {
      "target": "http://localhost:3001/"
   }
}

OAuth链接位于/api/auth/foo，CRA应用位于localhost:3000，快递应用位于localhost:3001

Answer 2

我今天遇到了同样的问题并且没有使用create-react-app的代理解决了问题，而是在我的后端设置代理create-react-app。

在我的快递应用的 end ，我有

 // 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中的代理，否则最终会出现无限代理循环或其他问题。

Answer 3

编辑：我之前的回答与此问题无关，但没有解决。在我的情况下，整个事情是由CLI生成的index.js中的registerServiceWorker引起的。只需删除它，一切都会像它应该的那样工作。

//Remove this lines from index.js
import registerServiceWorker from './registerServiceWorker'

registerServiceWorker();

Answer 4

您可以将create react app localhost server添加到web api。转到console.developers.google.com并将create-react-app localhost添加到＆＃34; Authorized JavaScript origin＆＃34;和＃34;授权重定向URI＆＃34;。

Answer 5

我通过使用＆＃34;有效OAuth重定向URI＆＃34;修复了此问题。 Facebook登录产品部分的Facebook开发者设置中的字段，例如http://your-domain.loc:5000/auth/facebook。

Facebook Auth按钮应为：

<a href="http://your-domain.loc:5000/auth/facebook">Login with Facebook</a>

你应该把你的Facebook重定向网址放在那里。我的例子还有一件事：我在我的应用程序上使用3000端口用于本地节点服务器，5000用于API请求。

我使用/etc/hosts来使用我的域名，而不是localhost。

127.0.0.1   your-domain.loc

适合我。

此外，GitHub资源上还有另外一个问题 - https://github.com/facebook/create-react-app/issues/3502

使用Passport + Facebook + Express + create-react-app + React-Router + proxy

5 个答案: