Question

我正在使用Angular（7.0）SPA应用程序，并希望实现Azure AD登录以进行身份验证和授权功能，并使用.NET Core 2.1 API。

Angular应用程序（目前）由3个组件组成-主页，登录和重定向。

家庭组件受Route Guard的保护-如果用户未登录他将重定向到登录组件。
登录组件检查用户是否已登录-如果不是，则将其重定向用户访问Microsoft登录页面。
如果登录成功，他将被重定向到重定向组件，然后将用户发送到默认页面即主页。

到目前为止，一切都很好，没有任何问题。当我尝试获取.NET Core API的访问令牌时，就会开始出现问题。

adal-angular4

//HTTP Interceptor
this.adal.acquireToken(resource) ...

@ azure / msal-angular

//HTTP Interceptor
this.msal.acquireTokenSilent(scopes) ...

虽然我获得了令牌，并且HTTP Interceptor毫无问题地附加了承载令牌，但是当执行这些功能时，它们创建了应用的新实例

<html>
<head>...</head>
<body>
<app-root>...</app-root>
<script type="text/javascript" src="runtime.js"></script>
<script type="text/javascript" src="polyfills.js"></script>
<script type="text/javascript" src="styles.js"></script>
<script type="text/javascript" src="vendor.js"></script>
<script type="text/javascript" src="main.js"></script>
<iframe id="msalRenewFramehttps://address.net/.../..." src="https://login.microsoftonline.com/...">
    <html>
    <head>...</head>
    <body>
    <app-root>...</app-root>
    <script type="text/javascript" src="runtime.js"></script>
    <script type="text/javascript" src="polyfills.js"></script>
    <script type="text/javascript" src="styles.js"></script>
    <script type="text/javascript" src="vendor.js"></script>
    <script type="text/javascript" src="main.js"></script>
    </body>
    </html>
</iframe>
</body>
</html>

这意味着，如果我在主页上有某种后台运行任务在构造函数中启动，则两个实例都将开始运行这些任务并访问服务器。

关于ADAL.JS，有two suggestions as to how to fix the issue，但是没有一个适用于Angular 2 +。

一个可能的解决方案是每次获取/更新令牌以从HTML中删除iframe时，但这似乎是一个很差的解决方案。

我100％确认重定向地址在Azure门户和Angular应用上正确。

上个星期一直为此苦苦挣扎。任何帮助将不胜感激。

Answer 1

我花了太多时间研究这个问题。 class Server(models.Model): name = models.CharField(max_length=20) id = models.IntegerField(primary_key=True, default=404) owner = models.ForeignKey( User, on_delete=models.CASCADE, ) users = models.ManyToManyField( User, default=owner, related_name='server_users', )尚未准备就绪，请使用旧版本的@azure/msal-angular，这会导致很多问题。因此，我们决定直接使用msal并自己实现防护和HTTP拦截器。

通过移至msal，我们可以将登录后重定向页面提取到其自己的HTML文件中，如下所示：

msal

在那之后，由于iframe中的应用重复，我们不再需要重新加载捆绑包。另外，身份验证流程要快得多。

具有Angular 2+并处理iFrame的ADAL / MSAL JS库

1 个答案: