Adal & Adal-Angular - refresh token infinite loop

问题:

I've setup the adal and adal-angular v.1.0.10 libraries with my SPA application with mostly great success. I am using webpack, but reference these in my html page in hopes of avoiding global scope issues (though I'd like it to be a dependency). Everything works until the browser attempts to open an iframe to acquire a refresh token, and each iframe opens another iframe inside itself. It logs no errors, and I can't find an explanation as to what I'm doing wrong. So I'm forced to only run the application in a fresh incognito browser. I would appreciate even an explanation as to why this is happening, as we are very married to Azure AD.

relevant sections of index.html

<md-button aria-label="Login" ng-if="!userInfo.isAuthenticated" ng-click="login()">
  Login
</md-button>

<script src="build/app.bundle.js" charset="utf-8"></script>
<script src="Scripts/adal.min.js" charset="utf-8"></script>
<script src="Scripts/adal-angular.min.js" charset="utf-8"></script>

my app.js

angular.module('myApp', ['AdalAngular', require('angular-route'), require('angular-animate'), require('angular-sanitize'), 'ngCookies', etc..])
  .config(['$routeProvider', '$locationProvider', '$mdThemingProvider', '$httpProvider', 'adalAuthenticationServiceProvider',
    function ($routeProvider, $locationProvider, $mdThemingProvider, $httpProvider, adalProvider) {

      // azure ad init
      adalProvider.init({
          instance: 'https://login.microsoftonline.com/',
          tenant: TENANT,
          clientId: CLIENTID,
          cacheLocation: 'localStorage',
          anonymousEndpoints: []
        },
        $httpProvider
      );

      $routeProvider
        .when('/home', {
        templateUrl: '/App/Layout/home.html'
      })
      .when('/admin', {
        templateUrl: '/App/Admin/admin.html',
        requireADLogin: true
      })
      etc...

      $locationProvider.html5Mode(true).hashPrefix('!');

  }]);

回答1:

After a long series of discussions on GitHub, it was brought to my attention that this was an issue with the AuthenticationContext in adal.js. It keeps opening an iframe while trying to authenticate, causing an infinite loop. I got it to work by exposing the AuthenticationContext.

var AuthenticationContext = require('expose?AuthenticationContext!./../Scripts/adal.js');
require('./../Scripts/adal-angular.js');

This may only work with the versions 0.3.0 version of the library. But it's good enough for now. Hopefully they will alter the library in the future to make it more compatible with modern js applications.

回答2:

In adal.js in 'getRequestInfo' method, the iframe will 'look' into the parent for the AuthenticationContext. This means that the AuthenticationContext has to be on window scope.

//ES6
import AuthenticationContext from "adal-angular/lib/adal";
window.AuthenticationContext = AuthenticationContext;
...

//ES5
window.AuthenticationContext = require("adal-angular/lib/adal");
...