Question

我希望将Azure的Active Directory服务用作Angular SPA的一部分进行身份验证。为此，我正在尝试使用Active Directory Authentication Library (ADAL) for JavaScript。但是，虽然它似乎正确地重定向到登录服务，并且在凭据输入后返回到答复URL，我无法在我的控制器中获得userInfo.isAuthenticated（userInfo为空）。

我如何进行调试，为什么认证似乎没有完成？

以下是我的应用代码：

'use strict';

var myClientApplication = angular.module('myApplication', [
    'ngRoute', 'myControllerModule', 'AdalAngular'
]);

Logging = {
    level: 3,
    log: function (message) {
        console.log(message);
    }
};

var appStart = function($routeProvider, $httpProvider, adalProvider) {
    $routeProvider.when('/xxx', {
        templateUrl: '/app/views/xxx.html',
        controller: 'xxxController',
        requireADLogin: true
    }).when('/home', {
        templateUrl: '/app/views/home.html',
        controller: 'homeController',
        requireADLogin: false
    }).otherwise({
        redirectTo: '/home'
    });

    adalProvider.init({
        instance: 'https://login.microsoftonline.com/',
        tenant: 'mydefaultdomain.onmicrosoft.com',
        clientId: '91dc4efa-xxxx-xxxx-xxxx-c579f5f07ceb',
        endPoints: {},
        //anonymousEndpoints: {},
        extraQueryParameter: 'nux=1',
        cacheLocation: 'localStorage',
    }, $httpProvider);
};

myClientApplication.config(['$routeProvider', '$httpProvider',  'adalAuthenticationServiceProvider', appStart]);

我的控制器代码：

'use strict'

var myControllerModule = angular.module('myControllerModule', []);

myControllerModule.controller('homeController', ['$scope',   'adalAuthenticationService', function ($scope, adalService) {
    $scope.userInfo = adalService.userInfo;
    $scope.login = function() {
        adalService.login()
    }
    $scope.logout = function() {
        adalService.logOut()
    }
}]);

myControllerModule.controller('xxxController', ['$scope', function($scope){}]);

家庭控制器的视图是：

<div class="container">
<button class="btn btn-primary" title="Login" ng-click="login()">Login</button>
<button class="btn btn-primary" title="Logout" ng-click="logout()">Logout</button>

<p>status:{{userInfo.isAuthenticated}}</p>
<p>user:{{userInfo.userName}}</p>
<p>aud:{{userInfo.profile.aud}}</p>
<p>iss:{{userInfo.profile.iss}}</p>

结果是：

status:false
user:
aud:
iss:

在Azure管理中，我有一个Active Directory（状态=活动），其中定义的应用程序具有以下配置：

登录网址：http://127.0.0.1:8080/app/index.html
客户ID：91dc4efa-xxxx-xxxx-xxxx-c579f5f07ceb
回复ID：http://127.0.0.1:8080/app/index.html

按下登录按钮后，日志消息中会出现以下内容：

// I think this is coming to index
app.js:10 Wed, 15 Feb 2017 22:45:09 GMT:1.0.13-VERBOSE: Location change event from http://127.0.0.1:8080/app/index.html#!#id_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJ…-4325-bcff-5bb5e5a552b9&session_state=709884dd-ad85-4b58-b403-d3155ab441cc to http://127.0.0.1:8080/app/index.html#!#id_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJ…-4325-bcff-5bb5e5a552b9&session_state=709884dd-ad85-4b58-b403-d3155ab441cc
// I think this is the redirect for the home controller
app.js:10 Wed, 15 Feb 2017 22:45:10 GMT:1.0.13-VERBOSE: Location change event from http://127.0.0.1:8080/app/index.html#!#id_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJ…-4325-bcff-5bb5e5a552b9&session_state=709884dd-ad85-4b58-b403-d3155ab441cc to http://127.0.0.1:8080/app/index.html#!/home#id_token=eyJ0eXAiOiJKV1QiLCJhbG…-4325-bcff-5bb5e5a552b9&session_state=709884dd-ad85-4b58-b403-d3155ab441cc
// Don't know what this means?
app.js:10 Wed, 15 Feb 2017 22:45:10 GMT:1.0.13-VERBOSE: Url: /app/views/home.html maps to resource: null

版本：

adal-angular：1.0.13
angular：1.6.2
node：6.9.5
npm：4.1.2操作系统：
Windows 10

使用＆＃39; npm start＆＃39;其中start = http://127.0.0.1:8080/../app.js

Answer 1

该问题是由格式错误的重定向网址引起的，其中包含字符＆＃39; ！＆＃39;。

修改下面的代码后，我可以很好地获取身份验证信息：

var appStart = function ($routeProvider, $httpProvider, adalProvider, $locationProvider) {
    $locationProvider.hashPrefix('');//add this line to fix the URL
    $routeProvider.when('/xxx', {
        templateUrl: 'spa/app/views/xxx.html',
        controller: 'xxxController',
        requireADLogin: true
    }).when('/home', {
        templateUrl: '/app/views/home.html',
        controller: 'homeController',
        requireADLogin: false
    }).otherwise({
        redirectTo: '/home'
    });

    adalProvider.init({
        instance: 'https://login.microsoftonline.com/',
        tenant: 'xxx.onmicrosoft.com',
        clientId: 'xxxx-5d42-4e62-858e-9d5864b71f7a',
        endPoints: {},
        popUp:true,
        //anonymousEndpoints: {},
        extraQueryParameter: 'nux=1',
        cacheLocation: 'localStorage',
    }, $httpProvider);
};

//add $locationProvider
myClientApplication.config(['$routeProvider', '$httpProvider', 'adalAuthenticationServiceProvider', '$locationProvider', appStart]

请让我知道它有帮助。

Angular SPA adal登录调用Azure AD和回复URL，但不返回userInfo或isAuthenticated

1 个答案: