Angular SPA adal登录调用Azure AD并答复URL，但不返回userInfo或isAuthenticated [英] Angular SPA adal login calls Azure AD and reply URL, but doesn't return userInfo or isAuthenticated

问题描述

我希望将Azure的Active Directory服务用作Angular SPA的身份验证。为此，我尝试使用用于JavaScript的Active Directory身份验证库（ADAL） 。但是，尽管它似乎可以正确重定向到登录服务，并且在输入凭据后返回到Reply URL，但是我无法在控制器中获取userInfo.isAuthenticated（userInfo为空）。

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?

以下是我的应用代码：

'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（Status = Active），其定义的应用程序具有以下配置：

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

• 登录URL： 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

• 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

版本：

• 斜角：1.0 .13


• 角：1.6.2


• 节点：6.9.5


• npm：4.1.2操作系统：


• Windows 10

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

使用 npm start运行，其中start = http://127.0.0.1:8080/../app.js

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

推荐答案

问题是由格式错误的重定向URL引起的，该URL包含字符 ！。

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.

这篇关于Angular SPA adal登录调用Azure AD并答复URL，但不返回userInfo或isAuthenticated的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！