针对Azure AD受保护的后端在本地运行Angular5应用

时间:2018-10-13 08:29:09

标签: azure angular5 azure-active-directory azure-web-sites

我们有一个带有DotNet OData后端API的Angular5应用程序。该应用程序托管在一个Web应用程序中,该应用程序具有一个用于Angular5应用程序的虚拟目录和一个用于DotNet后端的虚拟目录。该Web应用程序由Azure AD保护,并为该网站定义了Azure AD应用程序。

一切正常。我们在前端没有身份验证代码(在服务调用中设置了“ withCredentials:true”除外),但显然整个应用程序都受到了Azure AD的保护,使得前端能够无问题地调用后端(Azure使您可以在进行身份验证时进行身份验证您可以访问Angular5前端。

当我们尝试开发前端时,问题就来了。在开发Angular5时,需要在本地运行Angular5代码,因此我建立了一个Web应用程序,该程序仅托管后端代码,并在其中指向Angular5应用程序的本地配置。此操作在使用401进行第一个后端调用时失败。我们的一位开发人员发现,如果您仅使用同一浏览器将URL插入后端,即将失败的调用从浏览器网络开发人员标签复制到新的浏览器标签中,相同的浏览器),您将经历身份验证过程,然后再次运行本地Angular5应用程序时,它将起作用。我们以为找到了解决方法,直到我们注意到由于某种原因这似乎只能解决“只读”调用。 GET有效,OPTIONS有效,但POST失败,但显示为401。我在后端放置了一些调试代码,但似乎甚至没有调用此代码(即Azure,不是我们的后端阻止了调用)。

因此,我试图弄清楚如何使本地Angular5实例表现为Web应用程序托管的实例,但是我无法弄清楚我需要做什么。我也找不到其他人在这样做,所以我找不到解决方案。

我已经尝试了各种主动为前端获取令牌的解决方案(例如,设置/.auth/me,使用adal5进行“登录”等),但是似乎所有可能的解决方案最终都被CORS击败了。我们的后端有一个localhost:4200的Allow-Origin,但这不适用于login.windows.com的身份验证步骤。我尝试将localhost:4200放在Azure Web App的CORS设置中,但随后它抱怨缺少Allow-Authentication标头,并且我没有办法强制Azure提供它。我在线阅读这是因为Azure没想到人们会使用“ cookie身份验证”,所以经过一些研究,我发现由于“ withCredentials:true”调用而使用了“ cookie身份验证”,因此我更改了所有那些虚假的。然后,Allow-Authentication失败消失了,但是在授权期间,我刚遇到了更多的CORS失败(login.windows.com)。

所以我真的被困在这里。我不敢相信我是世界上唯一一个尝试对Azure AD安全的Azure Web应用程序后端运行Angular5本地实例的人,但是我找不到任何成功完成此操作的人的例子。我还希望避免进行繁琐的本地身份验证,因为当与后端托管在同一Azure Web应用程序上时,代码可以按原样完美运行。有没有人像我描述的那样可以正常工作?

0 个答案:

没有答案