不使用弹出窗口时无法捕获 adal:loginSuccess

Question

我有一个 angularjs SPA 与 ui.router。在我的模块配置中我有：

    $locationProvider.html5Mode(true).hashPrefix('!');
    $urlRouterProvider.otherwise('/');
    $stateProvider
      .state('welcome', {
          url: '/',
          template: '<div><button type=\"button\" class=\"btn btn-primary\" ui-sref=\"login\"><i class=\"fa fa-sign-in\"></i>&nbsp;&nbsp;Login</button></div>',
      })
        .state('login', {
            url: '/login',
            template: '<h4> logging in ... </h4>',
            controller: 'LoginController',
            controllerAs: 'vm',
            requireADLogin: true
        })
        .state('loggedin', {
            url: '/loggedin',
            templateUrl: '/app/logged-in.html',
            requireADLogin: true
        })
        .state('logout', {
            url: '/logout',
            template: '<h4> logging out ... </h4>',
            controller: 'LogoutController'
        }) ;
   adalProvider.init(
   {
       instance: 'https://login.microsoftonline.com/',
       tenant: 'mytenant.onmicrosoft.com',
       clientId: 'myappid',           
       extraQueryParameter: 'nux=1',
       popUp: true,
       cacheLocation: 'localStorage' // enable this for IE, as sessionStorage does not work for localhost.
   },
   $httpProvider
   );

在登录控制器中：

function loginController($rootScope, $state, adalService) {
    /* jshint validthis:true */
    var vm = this;
    vm.title = 'login';
    vm.activate = activate;
    activate();
    function activate() {
        adalService.login();
    }
    $rootScope.$on('adal:loginSuccess', function (event, token) {
        console.log('loggedin');
        $state.go('loggedin');
    });
}

如果我删除弹出设置，我将无法捕捉到 adal:loginSuccess，所以我总是回到默认状态（欢迎屏幕）。

此外，我知道我可以设置 redirectUri，但我不确定如何设置。我试过 http://myappurl/loggedin，试图触发登录状态，但它不起作用。

谢谢

PS：欢迎状态模板是内联的，因为未知原因，如果我使用 templateUrl，它会抛出错误（在引入 adal 之前，它工作正常）

Answer 1

我正在尝试重现该问题，但失败了。以下是运行良好的脚本供您参考：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <base href="/">
    <title></title>
    <script src="node_modules\angular\angular.js"></script>

    <script src="node_modules\adal-angular\lib\adal-angular.js"></script>
    <script src="node_modules\adal-angular\lib\adal.js"></script>

     <script src="node_modules\angular-ui-router\release\angular-ui-router.js"></script>
    <script src="node_modules\angular-route\angular-route.js"></script>

</head>
<body>
    <div ng-app="myApp">
        <div ng-controller="LoginController">
            <ul class="nav navbar-nav navbar-right">
                <li ng-show="userInfo.isAuthenticated"><a class="btn btn-link"  ng-click="logout()">Logout</a></li>
                <li ng-hide="userInfo.isAuthenticated" ><a class="btn btn-link" ng-click="login()">Login</a></li>
                <a ui-sref="home">Home</a> | <a ui-sref="about">About</a>
                <div ui-view></div>
            </ul>
        </div>
    </div>

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

 $locationProvider.html5Mode(true,false).hashPrefix('!');

 $stateProvider.state("home",{
       template: "<h1>HELLO!</h1>"
 }).state("about",{
          templateUrl: '/app/about.html',
         requireADLogin: true
 })

    adalProvider.init(
       {
           instance: 'https://login.microsoftonline.com/',
           tenant: '',
           clientId: '',           
           extraQueryParameter: 'nux=1',
           popUp:true
       },
       $httpProvider
       );
}])
    myApp.controller('LoginController', ['$rootScope','$scope', '$http', 'adalAuthenticationService', '$location','$stateParams','$state',  
                            function ($rootScope,$scope, $http, adalService, $location,  $stateParams,$state) {

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

                                    $rootScope.$on('adal:loginSuccess', function (event, token) {
                                    console.log('loggedin');
                                    $state.go('about');
                                });
    }]);

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

我使用了最新版本的 adal-angular 库 (v1.0.14)。此代码示例将在使用弹出页面登录后进入 about 状态。如果代码有效，请告诉我。如果您仍然遇到问题，您介意与我们分享一个可以运行的演示吗？

不使用弹出窗口时无法捕获 adal:loginSuccess

can't catch adal:loginSuccess when not using popup

adal

adal.js