ADAL/MSAL JS libraries with Angular 2+ and dealing with iFrames

user_5132661 0
Viewed 749

I'm working on Angular (7.0) SPA app and want to implement Azure AD login for authentication and authorization functionality and consumes .NET Core 2.1 API.

Angular app (at the moment) consists of 3 components - home, login and redirect.

  • Home component is protected by Route Guard - if user is not logged in he gets redirected to login component.

  • Login component checks if user is logged in - if he isn't he gets redirected user to Microsoft login page.

  • If login is successful, he gets redirected to Redirect component, which then sends user to default page, which is home page.

Everything so far works perfectly fine without any issues. The problems start occurring when I try to acquire access token for my .NET Core API.

adal-angular4

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

@azure/msal-angular

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

While I get the tokens and HTTP Interceptor attaches bearer tokens without any problems, when these functions are executed, they create a new instance of the app

<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>

Which means that if I have some sort of a background running task on homepage which gets started in constructor, both instances will start running these tasks and hitting the server.

When it comes to the ADAL.JS, there are two suggestions as to how to fix the issue, however none of them apply to Angular 2+.

One possible solution for this would be each time token is acquired/renewed to remove the iframe from HTML however this feels like pretty poor solution.

I'm 100% sure that the redirect addresses are correct on Azure Portal and on Angular app.

Been struggling with this for last week. Any help would be greatly appreciated.

adal msal angular
1 Answers

I spent too much time investigating this. @azure/msal-angular is not ready yet and use an old version of msal which cause a lot of problems. So we decided to use msal direcly and implement the guard and HTTP interceptor by ourselves.

By moving to msal we were able to extract the post login redirect page in its own HTML file like so: 

<script type="text/javascript" src="https://alcdn.msauth.net/lib/1.2.1/js/msal.js"
  integrity="sha384-9TV1245fz+BaI+VvCjMYL0YDMElLBwNS84v3mY57pXNOt6xcUYch2QLImaTahcOP" crossorigin="anonymous"></script>
<script>
  new Msal.UserAgentApplication({ auth: config })
    .handleRedirectCallback((err, res) => {
      if (err) {
        console.error(err);
        return;
      }
    });
</script>

After that, we got no more bundles reload due to app duplicated in iframe. Also the auth flow is much faster.

user_59606320
Related