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

问题描述 投票：3回答：1

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

目前，Angular应用包含3个组件-主页，登录和重定向。

  • [Home component）受Route Guard保护-如果用户未登录他被重定向到登录组件。

  • Login component检查用户是否已登录-如果不是，则将其重定向用户登录Microsoft登录页面。

  • 如果登录成功，他将被重定向到重定向组件，然后将用户发送到默认页面，即主页。

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

adal-angular4

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

@@ azure / msal-angular

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

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

<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应用上是正确的。

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

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

angular adal msal
1个回答
0
投票

我花了很多时间来研究这个问题。 @azure/msal-angular尚未准备就绪，请使用旧版本的msal，这会引起很多问题。因此，我们决定直接使用msal并自行实现防护和HTTP拦截器。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.