Question

我已经使用我的SPA应用程序设置了adal和adal-angular v.1.0.10库，并取得了很大的成功。我正在使用webpack，但是在我的html页面中引用它们以避免全局范围问题（尽管我希望它是一个依赖项）。一切正常，直到浏览器尝试打开iframe以获取刷新令牌，并且每个iframe在其自身内部打开另一个iframe。它没有记录任何错误，我无法找到关于我做错的解释。所以我被迫只在一个新的隐身浏览器中运行该应用程序。我甚至会理解为什么会发生这种情况，因为我们已经与Azure AD结婚了。

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>

我的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('!');

  }]);

Answer 1

经过一系列关于GitHub的讨论后，我注意到这是adal.js中AuthenticationContext的一个问题。它在尝试进行身份验证时不断打开iframe，从而导致无限循环。我通过公开AuthenticationContext来实现它。

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

这可能仅适用于库的0.3.0版本。但它现在已经足够好了。希望他们将来会改变库，使其与现代js应用程序更加兼容。

Answer 2

在'getRequestInfo'方法的adal.js中，iframe将“查找”到AuthenticationContext的父级。这意味着AuthenticationContext必须位于窗口范围内。

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

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

Adal＆amp; Adal-Angular - 刷新令牌无限循环

2 个答案: