Я пробовал adal.js с веб-сайтом Angular SPA (одностраничное приложение), который получает данные с внешнего веб-сайта API (другого домена). Аутентификация с помощью SPA была простой с adal.js, но получение ее для связи с API не работает вообще, когда требуются токены-носители. Я использовал https://github.com/AzureAD/azure-activedirectory-library-for-js в качестве шаблона в дополнение к бесчисленным блогам.
Проблема в том, что когда я устанавливаю конечные точки при запуске adal.js, adal.js, похоже, перенаправляет весь исходящий трафик конечной точки на службу входа в Microsoft.
Замечания:
- Хранилище сеансов Adal.js содержит две записи adal.access.token.key. Один для идентификатора клиента приложения SPA Azure AD и один для внешнего 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).
Хранение сеансов:
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 (файл конфигурации с угловым и адальным)
(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
);
}]);
})();
Угловой код для вызова конечной точки:
$scope.getItems = function () {
$http.get("https://localhost/Api/Items")
.then(function (response) {
$scope.items = response.Items;
});
