如何在 MEAN 应用程序中实施 facebook 身份验证以防止 CORS 问题?
How can I implement the facebook authentication in a MEAN application preventing CORS problems?
我正在使用完整的 MEAN 堆栈实现一个应用程序。
我创建了一个登录页面来注册 facebook,以便能够显示个人资料页面。但是我发现了一些问题。出于这个原因,我创建了一个较小版本的 webapp,并保持相同的项目结构。
完整的可执行代码(仅替换 "client id" 和 "secret")为 "npm install" 和 "nodemon" 之后可在此处获得:https://github.com/Ks89/MEAN-OAuth_Example
如果我调用(使用浏览器)我创建的其余 API 以在“http://localhost:3000/api/auth/facebook”使用 facebook 登录,一切都会好起来的!
但是如果我想做同样的事情,点击 "Login" 按钮,我会收到如图所示的错误:
我知道这个问题与 CORS 有关,但我如何在我的应用程序中解决这个问题,同时保持相同的项目结构?
我不想将 "rest path" 放在 HTML 中。我尝试了很多天不同的解决方案都没有成功。
如果你愿意,可以直接在我创建的应用程序上进行实验,这个应用程序正是我为写这个问题而创建的 ;)。
如果确实有必要,我可以在此处 post 完整的源代码,但我更喜欢将有条理的可执行代码放入存储库中以解决这个特定问题。
请给我一些想法,希望能给我一个解决方案,因为我真的被封锁了。
passport-facebook
存储库中的示例路由适用于多页应用,而不是 ajax 请求。如果您查看这些路由在做什么,/auth/facebook
只是重定向到 Facebook,用户应该在必要时登录并授权您的应用程序。当您从 angular 发出相同的请求时,它会遵循重定向并尝试加载 Facebook 页面,但浏览器会阻止您,如您的控制台屏幕截图所示。如果 Facebook 希望允许您跨来源请求他们的登录表单,那么 CORS 将是相关的,但他们不会这样做,因为这基本上会让您成为网络钓鱼者。
看起来您正在尝试在不离开页面的情况下处理身份验证,但在某些时候您将需要用户离开您的站点并被重定向到 Facebook 以完成 OAuth 流程。您可以打开一个包含 Facebook OAuth 对话框的 pop-up(看起来这是 Facebook JavaScript SDK 默认执行的操作),或者只使用您应用程序的当前选项卡和 [=12= 这样简单的东西].
我正在使用完整的 MEAN 堆栈实现一个应用程序。 我创建了一个登录页面来注册 facebook,以便能够显示个人资料页面。但是我发现了一些问题。出于这个原因,我创建了一个较小版本的 webapp,并保持相同的项目结构。 完整的可执行代码(仅替换 "client id" 和 "secret")为 "npm install" 和 "nodemon" 之后可在此处获得:https://github.com/Ks89/MEAN-OAuth_Example
如果我调用(使用浏览器)我创建的其余 API 以在“http://localhost:3000/api/auth/facebook”使用 facebook 登录,一切都会好起来的! 但是如果我想做同样的事情,点击 "Login" 按钮,我会收到如图所示的错误:
我知道这个问题与 CORS 有关,但我如何在我的应用程序中解决这个问题,同时保持相同的项目结构? 我不想将 "rest path" 放在 HTML 中。我尝试了很多天不同的解决方案都没有成功。
如果你愿意,可以直接在我创建的应用程序上进行实验,这个应用程序正是我为写这个问题而创建的 ;)。
如果确实有必要,我可以在此处 post 完整的源代码,但我更喜欢将有条理的可执行代码放入存储库中以解决这个特定问题。
请给我一些想法,希望能给我一个解决方案,因为我真的被封锁了。
passport-facebook
存储库中的示例路由适用于多页应用,而不是 ajax 请求。如果您查看这些路由在做什么,/auth/facebook
只是重定向到 Facebook,用户应该在必要时登录并授权您的应用程序。当您从 angular 发出相同的请求时,它会遵循重定向并尝试加载 Facebook 页面,但浏览器会阻止您,如您的控制台屏幕截图所示。如果 Facebook 希望允许您跨来源请求他们的登录表单,那么 CORS 将是相关的,但他们不会这样做,因为这基本上会让您成为网络钓鱼者。
看起来您正在尝试在不离开页面的情况下处理身份验证,但在某些时候您将需要用户离开您的站点并被重定向到 Facebook 以完成 OAuth 流程。您可以打开一个包含 Facebook OAuth 对话框的 pop-up(看起来这是 Facebook JavaScript SDK 默认执行的操作),或者只使用您应用程序的当前选项卡和 [=12= 这样简单的东西].