ADAL.js 和 UI-Router 的 URL 参数重定向问题答案

【问题标题】：Redirection issue with URL parameter with ADAL.js and UI-RouterADAL.js 和 UI-Router 的 URL 参数重定向问题
【发布时间】：2019-07-22 19:10:01
【问题描述】：

我用这样的 url 参数配置了包含 url 的状态：url:route/:id1/:id2:id3 with ADAL js。当我用route/1/2/3 访问url 时，登录后，我被重定向到route/:id1/:id2/:id3?id1=1&id2=2&id3=3 而不是route/1/2/3。

我进一步调查，在 adal-angular.js 文件中，我们使用 $location.url().search(jsonParameters) 设置浏览器 url，其中 jsonParameters 是值为 {id1:1, id2:2, id3:3} 的 json 对象，这导致了 url 格式错误。

你们能指出我如何解决这个问题并重定向到正确的网址吗？

编辑：添加代码示例

我已经配置了如下指定的 AAD 路由：

$stateProvider
        .state('State1', {
            templateUrl: getViewUrl('viewUrl'),
            controller: 'homeController',
            controllerAs: 'home',
            url: '/route/:id1/:id2/:id3',
            requireADLogin: true
        })

我正在通过以下方式初始化 adal 服务提供者：

     $locationProvider.html5Mode(false);
    var endpoints = {}
    endpoints[EnvironmentConfig.url1] = EnvironmentConfig.url1;
    endpoints[EnvironmentConfig.url2] = EnvironmentConfig.url2;

    adalAuthenticationServiceProvider.init(
              {
                  instance: EnvironmentConfig.aadUrl,                           // 'https://login.microsoftonline.com/',
                  tenant: EnvironmentConfig.tenant,                             // 'microsoft.onmicrosoft.com',
                  clientId: EnvironmentConfig.clientId,                         
                  endpoints: endpoints,
                  loginResource: EnvironmentConfig.breServiceADUrl              
                  //cacheLocation: 'localStorage', // enable this for IE, as sessionStorage does not work for localhost.
              }, $httpProvider);

谢谢。

【问题讨论】：

我无法重现此问题。您是如何在 adal-angular.js 中设置浏览器 URL 的？
@FeiXue-MSFT，已将我的 Web 应用程序配置为通过 adal-angular.js 使用 Azure AD 登录。所以我用状态提供者定义了这个 url 以及 requireADLogin:true。
我还通过$routeProvider 添加了requireADLogin: true，但仍然无法重现此问题。你混合了 ui-router 和 ngRoute 吗？如果您可以提供代码示例来重现此问题，将会很有帮助。
嗨@FeiXue-MSFT，我添加了adal服务提供者的示例状态声明和初始化以供参考。我正在使用 1.0.10 版本的 ADAL.js。
帖子中的代码对您有用吗？

标签： angularjs angular-ui-router adal.js

【解决方案1】：

我阅读了 adal-angular.js 的源代码，发现重定向到带有 url 参数的链接时存在问题。我稍微修改了@Fei Xue 的代码以重现该场景。

<!-- inject:css -->
<!-- endinject -->

<!-- bower:js -->
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
    <script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.10/js/adal.min.js"></script>
    <script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.10/js/adal-angular.min.js"></script>
    <script src="//unpkg.com/angular-ui-router/release/angular-ui-router.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>


<!-- endinject -->



<!DOCTYPE html>
<html ng-app="myApp">
<head>
       <base href="/">


</head>
<body>

    <div >
        <div ng-controller="homeCtrl">
            <ul class="nav navbar-nav navbar-right">
                <li><a ui-sref="hello({id1:1,id2:2,id3:1})" ui-sref-active="active">Hello</a></li>
                <li><a href="#hello/1/2/3" ui-sref-active="active">Hello2</a></li>
                <li><a ui-sref="about" ui-sref-active="active">About</a></li>
                <li ng-show="userInfo.isAuthenticated"><a href="" ng-click="logout()">Logout</a></li>
                <li><a href="" ng-hide="userInfo.isAuthenticated" ng-click="login()">Login</a></li>
            </ul>
            <ui-view></ui-view>

        </div>
    </div>

</body>

</html>

    
<script>
        var myApp = angular.module('myApp', ['AdalAngular', 'ui.router'])
.config(['$httpProvider', 'adalAuthenticationServiceProvider', '$stateProvider','$locationProvider','$urlRouterProvider', function ($httpProvider, adalProvider, $stateProvider,$locationProvider,$urlRouterProvider) {

        $locationProvider.html5Mode(false); 
        $locationProvider.hashPrefix('');
    adalProvider.init(
       {
           instance: 'https://login.microsoftonline.com/',
           tenant: 'xxx.onmicrosoft.com',
           clientId: '<clientId>',
       },
       $httpProvider
       );


        $httpProvider.defaults.useXDomain = true;
        $httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded; charset=utf-8";



    var helloState = {
        name: 'hello',
        url: '/hello/:id1/:id2/:id3',
        template: '<h3>hello world!</h3>',
        controller: function ($stateParams) {
            // alert('kiran');
        },
        requireADLogin: true
    }

    var aboutState = {
        name: 'about',
        url: '/about',
        template: '<h3>Its the UI-Router hello world app!</h3>'
    }

    var homeState={
        name:'home',
        url:'/',
        controller:function(){
            
        },
        requireADLogin:true
    }

    $stateProvider.state(homeState);
    $stateProvider.state(helloState);
    $stateProvider.state(aboutState);


    $urlRouterProvider.otherwise('/');

}])
    myApp.controller('homeCtrl', ['$scope', '$http', 'adalAuthenticationService', '$location','$stateParams','$rootScope','$timeout',  function ($scope, $http, adalService, $location, $stateParams,$rootScope,$timeout) {
        $scope.double = function (value) { return value * 2; };

        $scope.login = function () {
            adalService.login();
        };
        $scope.logout = function () {
            adalService.logOut();
        };

        /*Fix for adal issue*/
    //     $rootScope.$on("adal:loginSuccess", function (e) {
  //              console.log('loginSuccess');
//
      //          $timeout(function () {
    //                var startPageURL = sessionStorage['adal.start.page'];
  //                  var stateParamsString = sessionStorage['adal.start.page.params'];
//
  //                  var stateParamsJson = stateParamsString ? JSON.parse(stateParamsString) : {};
//
                    //var matchedState = _.find($state.get(),
                  //      function (state) {
                //            return state.url == startPageURL;
             ///           });
           //         if (matchedState) {
         //               $state.go(matchedState.name, stateParamsJson, { reload: true });
       //             }
     //           }, 2);

      //      });
    }]);



</script>

我也添加了修复。登录成功后，adal-angular 使用 location.search 方法替换重定向的 url。但是搜索方法将存储的 json 对象转换为导致问题的查询参数。

您可以按原样运行以下代码来重现问题。在隐身浏览器中，如果我们尝试转到http://localhost:8080/hello/1/2/3，它会将我们重定向到http://localhost:8080/#/hello/:id1/:id2/:id3?id1=1&id2=2&id3=1，这是错误的。

我已经评论了这个问题的修复。取消注释代码后，它将按预期工作，它会正确地将我们重定向到http://localhost:8080/hello/1/2/3

【讨论】：

【解决方案2】：

我测试的代码和你的似乎没有什么不同，我把代码贴出来供你参考。希望对您有所帮助：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
    <script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.10/js/adal.min.js"></script>
    <script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.10/js/adal-angular.min.js"></script>
    <script src="//unpkg.com/angular-ui-router/release/angular-ui-router.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>

</head>
<body>

    <div ng-app="myApp">
        <div ng-controller="homeCtrl">
            <ul class="nav navbar-nav navbar-right">
                <li><a ui-sref="hello({id1:1,id2:2,id3:1})" ui-sref-active="active">Hello</a></li>
                <li><a href="#hello/1/2/3" ui-sref-active="active">Hello2</a></li>
                <li><a ui-sref="about" ui-sref-active="active">About</a></li>
                <li ng-show="userInfo.isAuthenticated"><a href="" ng-click="logout()">Logout</a></li>
                <li><a href="" ng-hide="userInfo.isAuthenticated" ng-click="login()">Login</a></li>
            </ul>
            <ui-view></ui-view>

        </div>
    </div>

    <script>
    var myApp = angular.module('myApp', ['AdalAngular', 'ui.router', 'ngRoute'])
.config(['$httpProvider', 'adalAuthenticationServiceProvider', '$stateProvider', '$routeProvider', function ($httpProvider, adalProvider, $stateProvider, $routeProvider) {

    var endpoints = {
        "https://localhost:44327/": "https://adfei.onmicrosoft.com/ToGoAPI",
    };

    adalProvider.init(
       {
           instance: 'https://login.microsoftonline.com/',
           tenant: 'xxx.onmicrosoft.com',
           clientId: '{clientId}',
           extraQueryParameter: 'nux=1',
           endpoints: endpoints,
       },
       $httpProvider
       );

    var helloState = {
        name: 'hello',
        url: '/hello/:id1/:id2/:id3',
        template: '<h3>hello world!</h3>',
        controller: function ($stateParams) {

        },
        requireADLogin: true
    }

    var aboutState = {
        name: 'about',
        url: '/about',
        template: '<h3>Its the UI-Router hello world app!</h3>'
    }

    $stateProvider.state(helloState);
    $stateProvider.state(aboutState);

    $routeProvider.
     when("/hello/:id1/:id2/:id3", {
         controller: "homeCtrl",
         templateUrl:  '<h3>hello world!-ngRoute</h3>',
         requireADLogin: true
     });
}])
    myApp.controller('homeCtrl', ['$scope', '$http', 'adalAuthenticationService', '$location',  function ($scope, $http, adalService, $location, $stateParams) {
        $scope.double = function (value) { return value * 2; };

        $scope.login = function () {
            adalService.login();
        };
        $scope.logout = function () {
            adalService.logOut();
        };

       
    }]);



    </script>
</body>
</html>

要测试代码，首先单击登录，然后您可以通过单击 Hello 和 About 超链接切换视图。

更新

这个问题似乎已由来自 #345 的 ADAL 版本 1.0.12 修复。我建议您将 ADAL 升级到最新版本 1.0.13 以解决此问题。

【讨论】：