Angular SPA adal login calls Azure AD and reply URL, but doesn't return userInfo or isAuthenticated

问题

I'm hoping to use Azure's Active Directory Service for authentication as part of an Angular SPA. To that end, I am trying to use Active Directory Authentication Library (ADAL) for JavaScript. But while it seems to correctly redirect to login services and, after credential entry, returns to the Reply URL, I am not able to get userInfo.isAuthenticated (userInfo is empty) within my controller.

How would I go about debugging why authentication doesn't appear to be finishing?

The following is my app code:

'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]);

My controller code:

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

The view for the home controller is:

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

Which results in:

status:false
user:
aud:
iss:

Within Azure management, I have an Active Directory (Status=Active), with a defined Application with the following configuration:

• sign-on URL: http://127.0.0.1:8080/app/index.html
• client id: 91dc4efa-xxxx-xxxx-xxxx-c579f5f07ceb
• reply id: http://127.0.0.1:8080/app/index.html

The following appears in the log messaging after login button press:

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

Versions:

• adal-angular: 1.0.13
• angular: 1.6.2
• node: 6.9.5
• npm: 4.1.2 OS:
• Windows 10

Running using 'npm start' where start=http://127.0.0.1:8080/../app.js

回答1:

The issue was caused by the malformed redirect URL which contains the character '!'.

After I modify the code below, I can get the authentication information well:

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]

Please let me know it it helps.

来源：https://stackoverflow.com/questions/42261710/angular-spa-adal-login-calls-azure-ad-and-reply-url-but-doesnt-return-userinfo