Question

我必须将我的AngularJS SPA与Azure AD集成。有一个示例应用程序（https://github.com/Azure-Samples/active-directory-angularjs-singlepageapp）。该示例工作正常，我使用该示例应用程序登录时没有问题。

但是样本使用了一些非常旧版本的jquery（1.11.1）和angular（1.2.25）。我使用jquery 3.1.1和angular 1.6.4。

当我将这些版本与示例应用程序一起使用时，我无法登录。

我正在重定向到login.microsoftonline.com，回复时使用302授权回复一个非常长的查询字符串，页面卡在那里，意味着在浏览器地址栏中保留了那个长网址。

如果我将脚本更改为旧版本，请刷新页面并重试我已登录。

这是登录后地址栏中的网址 https://localhost:44326/notworking.html#!/Home#id_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsIng1dCI6IjlGWERwYmZNRlQyU3ZRdVhoODQ2WVR3RUlCdyIsImtpZCI6IjlGWERwYmZNRlQyU3ZRdVhoODQ2WVR3RUlCdyJ9.eyJhdWQiOiJhMWNmMDk4Yy01NjJkLTQ4ZDgtYjE0OC0yZDVhMDVjM2E5ZTQiLCJpc3MiOiJodHRwczovL3N0cy53aW5kb3dzLm5ldC9mNTUzZTMyOS05ZGFiLTQ3NzUtOTUyMy1lNjIyNjY4NzdlM2QvIiwiaWF0IjoxNDk3Mjc2NDYyLCJuYmYiOjE0OTcyNzY0NjIsImV4cCI6MTQ5NzI4MDM2MiwiYWlvIjoiWTJaZ1lJZ291c1AzT09LNlFkTVBkMmVYOXkvU3RwdzJmWjFtNVA5RTBMWGphTGVCbEQwQSIsImFtciI6WyJwd2QiLCJtZmEiXSwiZmFtaWx5X25hbWUiOiJGYWJpYW4iLCJnaXZlbl9uYW1lIjoiVG9ueSIsImlwYWRkciI6IjE4My44OS4zOC4zOSIsIm5hbWUiOiJUb255Iiwibm9uY2UiOiJkYTVjMzhmYy04ODNkLTRhMTItYThlYy01ZDZiYjZhNDcxNTQiLCJvaWQiOiI0YjZjYmQxYS1lMDE0LTQ5ZTYtYWI1OC0wMDdkMDZlMTNiOWIiLCJwbGF0ZiI6IjMiLCJzdWIiOiJXZTFHR05OcjUxX0VFX21hR1BjRWItcURELXlrbWFEUVE1eWVvbk8xQnRNIiwidGlkIjoiZjU1M2UzMjktOWRhYi00Nzc1LTk1MjMtZTYyMjY2ODc3ZTNkIiwidW5pcXVlX25hbWUiOiJ0b255QGZvbGxvd3RoZXNuYWtlLmNvbSIsInVwbiI6InRvbnlAZm9sbG93dGhlc25ha2UuY29tIiwidXRpIjoiTzZoTW5VMU5WRVdJdU9VZnlPVWtBQSIsInZlciI6IjEuMCJ9.cAsr5-yngyjJpMkuP6mHBSY3B0-4kFK8DNUItvB05qNalrcGHGxONG73idvUQ8gjmYrM3RfNXhZmvy2VmSx1o7CIHJouEXMelgPlnrNuboKV0m4RRRbQCmk5poP7tj_rpBZf6fFGHzPGPb_3g23hE2CetGs51BQVJHuGyygMIshR9aVRXL-_5rvLNIVWjUXK-H8cLEqXpB9INqx2_ol8D3_HGR_oqJDxSUlg3XU1cOBPeCC4r3RYkurbsoRChL-jT_DtUyP6xBCsP3odoNiKn2e8pKJHD1St0zPm34o16d4sHIE7aK2RdDnmAvQ2LowBOrcQVshIhvK5TLLNiunOQA&state=bed45624-0432-417c-8fcd-d4a1b0b5e07a&session_state=60afa4fc-05b5-4ce8-8c67-8442d34fdaf9

我没有登录。

有关如何使其发挥作用的任何想法？

这是我的控制器

"use strict";
angular.module("todoApp", ["ngRoute","AdalAngular"])
.config(["$routeProvider", "$httpProvider", "adalAuthenticationServiceProvider", function ($routeProvider, $httpProvider, adalProvider) {

$routeProvider.when("/Home", {
    controller: "homeCtrl",
    templateUrl: "/App/Views/Home.html"
}).when("/TodoList", {
    controller: "todoListCtrl",
    templateUrl: "/App/Views/TodoList.html",
    requireADLogin: true
}).when("/UserData", {
    controller: "userDataCtrl",
    templateUrl: "/App/Views/UserData.html"
}).otherwise({ redirectTo: "/Home" });

adalProvider.init(
    {
        instance: "https://login.microsoftonline.com/", 
        tenant: "",
        clientId: "",
        extraQueryParameter: "nux=1",
        //cacheLocation: 'localStorage', // enable this for IE, as sessionStorage does not work for localhost.
    },
    $httpProvider
    );
}]);

Answer 1

请按照tomidix提到的建议，解决此问题。以下是供您参考的代码：

app.js

'use strict';
angular.module('todoApp', ['ngRoute','AdalAngular'])
.config(['$routeProvider', '$httpProvider', 'adalAuthenticationServiceProvider', '$locationProvider', function ($routeProvider, $httpProvider, adalProvider, $locationProvider) {

    $routeProvider.when("/Home", {
        controller: "homeCtrl",
        templateUrl: "/App/Views/Home.html",
    }).when("/TodoList", {
        controller: "todoListCtrl",
        templateUrl: "/App/Views/TodoList.html",
        requireADLogin: true,
    }).when("/UserData", {
        controller: "userDataCtrl",
        templateUrl: "/App/Views/UserData.html",
    }).otherwise({ redirectTo: "/Home" });

    adalProvider.init(
        {
            instance: 'https://login.microsoftonline.com/', 
            tenant: 'xxxx.onmicrosoft.com',
            clientId: '',
            extraQueryParameter: 'nux=1',
            //cacheLocation: 'localStorage', // enable this for IE, as sessionStorage does not work for localhost.
        },
        $httpProvider
        );

    $locationProvider.html5Mode(false).hashPrefix('');

}]);

adal.js无法使用最新版本的angular和jquery

1 个答案: