ポップアップを使用していないとadal：loginSuccessをキャッチできません

私はui.routerを持つangularjs SPAを持っています。 LoginControllerでポップアップを使用していないとadal：loginSuccessをキャッチできません

$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'); 
    }); 
}

、私はアダルキャッチすることはできません：LOGINSUCCESSをので、私はいつもの状態をデフォルトに戻って取得（歓迎画面）。

また、私はredirectUriを設定することができますが、どうすればよいか分かりません。私はhttp://myappurl/loggedinで試して、loggedin状態をトリガーしようとしましたが、動作しません。私がしようとしている私はtemplateUrlを使用している場合、未知の理由のために、それは（アダル導入する前に、それがうまく働いていた）エラーがスローされますので、歓迎の状態のためのテンプレートがインラインである

出典

2017-03-24 Aline

この問題を修正しましたか？ –

こんにちは@ FeiXue - MSFT、私はポップアップに解決しましたが、私はまだtemplateUrlものを把握することはできません... – Aline

：

おかげ

PSしかし、問題を再現し、失敗しました。ここにあなたの参考のためにうまく動作するスクリプトは次のとおりです。

<!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）の最新バージョンを使用していました。このコードサンプルは、ポップアップページを使用してログインした後、約に移動します。コードが動作するかどうかお知らせください。それでも問題が解決しない場合、実行可能なデモを共有してもらえますか？

出典

2017-03-27 11:33:07

こんにちは！あなたの答えをありがとう。私はあなたが私のコメントの一部を見逃したと思う： "私はpopUpの設定を削除すると、私はadalをキャッチすることはできません：loginSuccessと私はいつもデフォルト状態（歓迎画面）に戻る。ポップアップを削除したいと思います。また、他の2つの問題に対処できますか？ – Aline

この問題は、場所が変更されたときに状態が初期化されるために発生します。 'adal：loginSuccess'はページがAzure ADからハッシュ値（id_tokenなど）でリダイレクトされたときに起動されます。その後、' adal'ライブラリはこのハッシュ値を取り除き、状態が再び初期化されます。 SAPアプリケーションの場合、ポップアップが推奨されます。ページリダイレクトの代わりに。ポップアップを回避策として使用することをお勧めします。 –

シナリオでページリダイレクトを実際に使用したい場合は、[here]（https://github.com/AzureAD/azure-activedirectory-library-for-js/）から新しい問題を再開することをお勧めします。問題）。 –

ポップアップを使用していないとadal：loginSuccessをキャッチできません

答えて

関連する問題