Learn & Learn-Angular - 刷新令牌无限循环

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

在adal.js中的'getRequestInfo'方法中，iframe会'look'进入AuthenticationContext的父级。这意味着 AuthenticationContext 必须在 window 范围内。

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

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

Learn & Learn-Angular - 刷新令牌无限循环

Adal & Adal-Angular - refresh token infinite loop

azure

angularjs

azure-active-directory

adal

webpack