Question

我使用url参数配置了包含url的状态，例如：url:route/:id1/:id2:id3和ADAL js。当我使用route/1/2/3点击网址时，登录后，我被重定向到route/:id1/:id2/:id3?id1=1&id2=2&id3=3而不是route/1/2/3。

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

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

编辑：添加代码示例

我按照以下规定配置了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);

感谢。

Answer 1

我测试的代码与您的代码没有什么不同，我发布代码供您参考。希望它有所帮助：

<!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 和关于超链接切换视图。

更新

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

Answer 2

我阅读了adal-angular.js的源代码，发现在使用url参数重定向到链接时存在问题。我已经修改了@Fei Xue的代码来重现这个场景。

＆＃13;

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

＆＃13;

我也添加了修复程序。 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

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

2 个答案:

更新