带有ADAL.js和UI-Router的URL参数的重定向问题 [英] Redirection issue with URL parameter with ADAL.js and UI-Router
问题描述
我使用url参数配置了包含url的状态，例如： url：route /：id1 /：id2：id3 和ADAL js。当我用 route / 1/2/3 击url时，登录后，我是否被重定向到 route /：id1 /：id2 /：id3？ id1 = 1& id2 = 2& id3 = 3 而不是 route / 1/2/3 。
I configured the state which contains url with url parameters like this: url:route/:id1/:id2:id3 with ADAL js. When I hit url with route/1/2/3, after login, I am redirected to route/:id1/:id2/:id3?id1=1&id2=2&id3=3 instead of route/1/2/3.
我进一步研究了adal-angular.js文件，我们使用 $ location.url（）。search（jsonParameters）设置浏览器URL 其中 jsonParameters 是值为 {id1：1，id2：2，id3：3} 导致网址格式错误。
I investigated further and in adal-angular.js file, we are setting browser url with $location.url().search(jsonParameters) where jsonParameters is json object with value {id1:1, id2:2, id3:3} which is causing the url malformation.
你们能为我指出如何解决此问题并重定向到正确的url的正确方向吗？
Can you guys point me in correct direction on how to solve this issue and redirect to proper url?
编辑：添加代码示例
我已按照指定配置了AAD路由
I have configured the AAD route as specified below:
$stateProvider
.state('State1', {
templateUrl: getViewUrl('viewUrl'),
controller: 'homeController',
controllerAs: 'home',
url: '/route/:id1/:id2/:id3',
requireADLogin: true
})
我正在通过以下方式初始化adal服务提供商：
I am initializing the adal sevice provider in following way:
$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参数的链接时存在问题。我已经通过@Fei Xue修改了一些代码以重现该场景。
I read the source code for adal-angular.js and found out that there is an issue when redirecting to the link with url parameters. I have modified code by @Fei Xue little bit to reproduce the scenario.
<!-- 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对象转换为导致问题的查询参数。
I have added fix also. Adal-angular uses location.search method to replace the redirected url after successful login. But search method converts stored json object to query parameters which is causing the issue.
您可以按下面的代码运行以重现此问题。在隐身浏览器中，如果我们尝试转到 http：// localhost：8080 / hello / 1/2/3 ，它将重定向到 http ：// localhost：8080 /＃/ hello /：id1 /：id2 /：id3？id1 = 1& id2 = 2& id3 = 1 ，这是错误的。
You can run below code as is to repro the issue. In incognito browser if we try to go to http://localhost:8080/hello/1/2/3 and it will redirect us to http://localhost:8080/#/hello/:id1/:id2/:id3?id1=1&id2=2&id3=1 which is wrong.
我已评论了此问题的解决方法。取消注释代码后，它将按预期工作，它将正确地将我们重定向到 http：// localhost：8080 / hello / 1/2/3
I have commented the fix for this issue. After uncommenting the code and it will work as expected and it will correctly redirect us to http://localhost:8080/hello/1/2/3
这篇关于带有ADAL.js和UI-Router的URL参数的重定向问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
