Среда
Конфигурация
Вызов
Когда WebAPI вызывается напрямую через браузер, задача аутентификации AzureAD работает нормально, и вызов авторизуется. Однако, когда Angular вызывает WebAPI, вызов аутентификации AzureAD вызывает проблему CORS.
Приложение Angular не буду вызывает Azure напрямую (через adal-angular), оно должно вызываться только через WebAPI. Приложение Angular успешно вызывает незащищенные функции GET / POST на WebAPI, поэтому подключение Angular-WebAPI в порядке.
(Обновление 1Angular APP вызывает ADAL-ANGULAR для аутентификации в Azure и получения токена, затем тот же токен передается в качестве носителя в WebAPI.)
Есть мысли, что мне здесь не хватает? При необходимости может быть предоставлен любой конкретный код / конфигурация.
Код
WebAPI
[HttpGet]
[Authorize]
[Route(ApiEndPoint.AzureAD.GetMyProfile)]
public async Task<ADUser> GetUserProfile()
{
ADUser user = null;
GraphFacade graphFacade = new GraphFacade(this.graphServiceClient);
user = await graphFacade.GetMyProfileDetails();
return user;
}
Угловой
Authenticate(): Observable<any> {
this.authServerUrl = "https://localhost:44371/"; // This is where WebAPI is running
let httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) };
let authRequest = this._http.get<any>(this.authServerUrl + '/api/aduser/profile', httpOptions);
return authRequest;
}
Сообщение об ошибке
Failed to load https://login.microsoftonline.com/common/oauth2/v2.0/authorize?client_id=fba45f7b : Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
Это цель, однако я могу ошибаться в своем дизайне. пожалуйста, порекомендуйте





Это не так. Клиент Http перенаправит вас на страницу (в вашем случае - страницу входа в AAD). Он только извлекает / отправляет контент с / на ресурс. Вы можете выполнить перенаправление с помощью window.location.replace (), но это, вероятно, не то, что вы хотите (токен не вернется в ваше приложение angular).
Вам нужно выбрать Библиотека аутентификации Active Directory, например adal-js или MSAL (вы найдете пакеты Angular NPM для обоих) и настроить компонент с настройками AAD. Затем вы можете вызвать вход в систему из своего клиента Angular и запросить access_token для вашего API. Теперь вы должны передавать access_token в HTTP-заголовке авторизации с каждым запросом, который вы делаете к своему (защищенному) API.
Обратите внимание, что вы должны создать другое приложение в AAD, которое представляет ваш пользовательский интерфейс Angular, и предоставить этому приложению доступ к вашему API.
Мне не нужен токен в моем приложении angular, токен предназначен только для уровня WebAPI. Проверим способ на основе MSAL, а затем обновим дальше. Спасибо
Если вы защищаете свой API с помощью аутентификации AAD, вам понадобится этот токен в приложении Angular.
Теперь я использовал плагин ADAL и успешно получил токен и профиль пользователя. Однако при отправке этого токена в WebAPI запрос проверки подлинности WebAPI (от Azure) снова вызывает ошибку CORS (как и выше) .... Нужны ли мне еще какие-либо изменения на стороне веб-API?
Да, вам нужно будет добавить URL-адрес вашего пользовательского интерфейса в Allowed Origin в настройках CORS (в вашем приложении API)
WebAPI позволяет всем , *, .. Angular может вызывать API, где аутентификация анонимна успешно. Здесь AzureAD выдает ошибку CORS
Ах, хорошо, но тогда ошибка не связана ни с одним клиентом, это ваш API, у которого есть проблема с вызовом AAD - правильно?
Веб-API, если он вызывается независимо, может успешно аутентифицироваться через свои собственные конфигурации. Он терпит неудачу только при вызове через Angular. Нужно ли мне упоминать какие-либо конкретные детали конфигурации (на уровне кода или лазурного уровня)?
Хм, извините, тогда это выходит за рамки моей компетенции.
Обновлять. Я выполнил задание api графика через сам angular, используя логин через angular-adal. Но соответствующий токен доступа не может быть использован при отправке в веб-api ... Проблема лазурного снова приводит к COR
Для тех кто смотрит на msal-angular MsalHttpInterceptor.
Я сделал собственную реализацию MsalInterceptor для решения проблем с protectedResourceMap.
Это мой собственный блок кода:
// #region own workaround in order not to put every api endpoint url to settings
if (!scopes && req.url.startsWith(this.settingsService.apiUrl)) {
scopes = [this.auth.getCurrentConfiguration().auth.clientId];
}
// #endregion
// If there are no scopes set for this request, do nothing.
if (!scopes) {
return next.handle(req);
}
PS: Проголосуйте за подстановочный знак в protectedResourceMap https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/1776
Вы ожидаете, что при вызове / api / aduser / profile в приложении angular вас перенаправят на страницу AAD SigninPage?