我如何能实现在一个简陋的应用程序preventing CORS问题Facebook的身份验证？ [英] How can I implement the facebook authentication in a MEAN application preventing CORS problems?

问题描述

我实施使用完整的堆栈MEAN一个应用程序。
我创建了一个登录页面与Facebook好感能够显示个人资料页。但是，我发现了一些问题。出于这个原因，我创建了Web应用程序的缩小版，保持相同的项目结构。
完整的code，可执行故宫安装和nodemon后（仅更换客户端ID和秘密），可以在这里找到：的 https://github.com/Ks89/MEAN-OAuth_Example

I'm implementing an application using the full MEAN stack. I created a login page to signup with facebook to be able to show a profile page. But I discovered some problems. For this reason, I created a smaller version of my webapp, maintaining the same project structure. The complete code, executable (only replacing "client id" and "secret") with "npm install" and after "nodemon" is available here: https://github.com/Ks89/MEAN-OAuth_Example

如果我会打电话给（使用浏览器），我创建了与Facebook登录的REST API HTTP：//本地主机：3000 / API /认证/ Facebook的，一切都会好的！
但是，如果我会想要做同样的事情，点击登录按钮，我会收到错误，如图：

If I'll call (with a browser) the rest API that I created to login with facebook at "http://localhost:3000/api/auth/facebook", everything will be ok! But if I'll want to do the same thing, clicking on the "Login" button, I'll receive the error as in figure:

我知道问题是关系到CORS，但我怎么能要在我的应用程序解决这个问题，保持相同的项目结构？
我不想把休息路径的HTML中。我试过没有成功多天不同的解决方案。

I know that the problem is related to CORS, but how can I'll fix this in my application, maintaining the same project structure? I don't want to put the "rest path" inside the HTML. I tried for many days different solutions without success.

如果你愿意，实验直接在我的应用程序，我创建正是写这个问题。）

If you want, experiment directly on my application that I created exactly to write this question ;).

如果真的有需要，我就可以在这里发表了整个源$ C ​​$ C，但我preFER一个有组织的和可执行code到存储库中针对此问题。

If really necessary, I'll able to post the entire source code here, but I prefer an organized and executable code into a repository for this particular question.

请，给我一些想法，希望一个解决方案，因为我真的封锁。

Please, give me some ideas and hopefully a solution, because I'm really blocked.

推荐答案

从的例子路线护照的Facebook 回购旨在用于多页的应用程序，而不是Ajax请求。如果你看一下这些路线都在做， / auth /中的Facebook 只是一个重定向至Facebook，用户有望在必要时登录和授权的应用程序。当你从那个角度同样的要求，它遵循重定向并尝试加载的Facebook页面，但浏览器阻止你作为控制台截图显示。 CORS将有关如果Facebook想，可以请求跨原点的登录表单，但他们不这样做，因为这将基本上让你成为一个钓鱼者。

The example routes from the passport-facebook repo are intended for multipage apps, not ajax requests. If you look at what those routes are doing, /auth/facebook is just a redirect to Facebook where the user is expected to log in if necessary and authorize your application. When you make that same request from angular, it follows the redirect and tries to load the Facebook page, but the browser blocks you as your console screenshot shows. CORS would be relevant if Facebook wanted to allow you to request their login form across origins, but they don't because that would basically make you a phisher.

它看起来像你试图处理身份验证，而不必离开页面，但在某些时候，你会需要用户离开你的网站，以完成OAuth的流量重定向到Facebook。您可以打开一个弹出包含Facebook的OAuth的对话框（它看起来这是Facebook的的JavaScript SDK做什么默认情况下）或只使用你的应用程序的当前选项卡以简单的东西如＆LT;一个NG -href ={{facebookOauthUrl}}＆gt;在Facebook和LT登录; / A＆GT;

It looks like you're trying to handle authentication without leaving the page, but at some point you're going to need the user to leave your site and be redirected to Facebook in order to complete the OAuth flow. You can either open a pop-up containing the Facebook OAuth dialog (it looks like this is what the Facebook JavaScript SDK does by default) or just use your app's current tab with something as simple as <a ng-href="{{facebookOauthUrl}}">Log in with Facebook</a>.

这篇关于我如何能实现在一个简陋的应用程序preventing CORS问题Facebook的身份验证？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！