【发布时间】：2015-09-02 11:47:42
【问题描述】：
我正在使用 Angular SPA（单页应用程序）网站尝试 adal.js，该网站从外部 Web API 站点（不同域）获取数据。使用 adal.js 对 SPA 进行身份验证很容易，但是当需要承载令牌时，让它与 API 通信根本不起作用。除了无数的博客，我还使用https://github.com/AzureAD/azure-activedirectory-library-for-js 作为模板。
问题是，当我在启动 adal.js 时设置端点时，adal.js 似乎将所有传出端点流量重定向到微软的登录服务。
观察：
- Adal.js 会话存储包含两个 adal.access.token.key 条目。一个用于 SPA Azure AD 应用程序的客户端 ID，另一个用于外部 api。只有 SPA 令牌具有价值。
- 如果我不将 $httpProvider 注入 adal.js，则调用会转到外部 API，我会得到 401 作为回报。
- 如果我手动将 SPA 令牌添加到 http 标头（授权：不记名“令牌值”），我会得到 401 作为回报。
我的理论是 adal.js 无法检索端点的令牌（可能是因为我在 SPA 中配置了错误），并且由于无法获取所需的令牌，它会停止到端点的流量。 SPA 令牌不能用于 API，因为它不包含所需的权限。 为什么 adal.js 没有获取端点令牌，我该如何解决？
附加信息：
- 客户端 Azure AD 应用程序配置为对 API 使用委派权限，并且 oauth2AllowImplicitFlow = true 在应用程序清单中。
- API Azure AD 应用程序配置为模拟和 oauth2AllowImplicitFlow = true（不认为这是必需的，但尝试过）。它是多租户。
- API 配置为允许所有 CORS 来源，并且当另一个使用模拟（混合 MVC (Adal.net) + Angular）的 Web 应用程序使用它时，它可以正常工作。
会话存储：
key (for the SPA application): adal.access.token.keyxxxxx-b7ab-4d1c-8cc8-xxx value: eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsIng1dCI6Ik1u...
key (for API application): adal.access.token.keyxxxxx-bae6-4760-b434-xxx
value:
app.js（Angular 和 adal 配置文件）
(function () {
'use strict';
var app = angular.module('app', [
// Angular modules
'ngRoute',
// Custom modules
// 3rd Party Modules
'AdalAngular'
]);
app.config(['$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider) {
$routeProvider
// route for the home page
.when('/home', {
templateUrl: 'App/Features/Test1/home.html',
controller: 'home'
})
// route for the about page
.when('/about', {
templateUrl: 'App/Features/Test2/about.html',
controller: 'about',
requireADLogin: true
})
.otherwise({
redirectTo: '/home'
})
//$locationProvider.html5Mode(true).hashPrefix('!');
}]);
app.config(['$httpProvider', 'adalAuthenticationServiceProvider',
function ($httpProvider, adalAuthenticationServiceProvider) {
// endpoint to resource mapping(optional)
var endpoints = {
"https://localhost/Api/": "xxx-bae6-4760-b434-xxx",
};
adalAuthenticationServiceProvider.init(
{
// Config to specify endpoints and similar for your app
clientId: "xxx-b7ab-4d1c-8cc8-xxx", // Required
//localLoginUrl: "/login", // optional
//redirectUri : "your site", optional
extraQueryParameter: 'domain_hint=mydomain.com',
endpoints: endpoints // If you need to send CORS api requests.
},
$httpProvider // pass http provider to inject request interceptor to attach tokens
);
}]);
})();
调用端点的Angular代码：
$scope.getItems = function () {
$http.get("https://localhost/Api/Items")
.then(function (response) {
$scope.items = response.Items;
});
【问题讨论】：
-
我想我可能有同样的问题。这个你搞定了吗？
-
不。如果我弄明白了，我会告诉你的？？？？
-
开始赏金。我和你的情况完全一样，我已经尝试了我能想到的一切，阅读了 ADAL quickstart Gtithub 网站上的所有信息，甚至还买了 Vittorio 的血腥书！我简直不敢相信这么简单的场景根本行不通！
-
@BjørnF.Rasmussen 我已在github.com/Azure-Samples/… 上完整记录了我的麻烦，它与您的非常相似。如果你想联系我，也许我们可以就这个问题交换一些想法。谢谢。
-
感谢您的意见@ShailenSukul。由于这些问题，我现在放弃了单页应用程序方法，而是使用 SignalR 开发 MVC6 架构。如果你让它工作，请告诉我:)
标签： adal.js