Angular 5 вызывает защищенный AzureAD WebAPI приводит к CORS

Среда

  • Интерфейс Angular 5
  • ASP.NET WebAPI 2
  • Аутентификация AzureAD через WebAPI

Конфигурация

  • WebAPI поддерживает CORS для всех (***)
  • AzureAD - это включенный OAuthImplicitFlow.
  • Angular и WebAPI размещены в одном IIS, разных портах

Вызов

Когда 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.

Вы ожидаете, что при вызове / api / aduser / profile в приложении angular вас перенаправят на страницу AAD SigninPage?

Martin Brandl 29.05.2018 08:46

Это цель, однако я могу ошибаться в своем дизайне. пожалуйста, порекомендуйте

NitinSingh 29.05.2018 08:49
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
5
2
1 574
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Это не так. Клиент 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, а затем обновим дальше. Спасибо

NitinSingh 29.05.2018 09:04

Если вы защищаете свой API с помощью аутентификации AAD, вам понадобится этот токен в приложении Angular.

Martin Brandl 29.05.2018 09:07

Теперь я использовал плагин ADAL и успешно получил токен и профиль пользователя. Однако при отправке этого токена в WebAPI запрос проверки подлинности WebAPI (от Azure) снова вызывает ошибку CORS (как и выше) .... Нужны ли мне еще какие-либо изменения на стороне веб-API?

NitinSingh 06.06.2018 14:28

Да, вам нужно будет добавить URL-адрес вашего пользовательского интерфейса в Allowed Origin в настройках CORS (в вашем приложении API)

Martin Brandl 06.06.2018 14:31

WebAPI позволяет всем , *, .. Angular может вызывать API, где аутентификация анонимна успешно. Здесь AzureAD выдает ошибку CORS

NitinSingh 06.06.2018 14:33

Ах, хорошо, но тогда ошибка не связана ни с одним клиентом, это ваш API, у которого есть проблема с вызовом AAD - правильно?

Martin Brandl 06.06.2018 14:42

Веб-API, если он вызывается независимо, может успешно аутентифицироваться через свои собственные конфигурации. Он терпит неудачу только при вызове через Angular. Нужно ли мне упоминать какие-либо конкретные детали конфигурации (на уровне кода или лазурного уровня)?

NitinSingh 06.06.2018 15:44

Хм, извините, тогда это выходит за рамки моей компетенции.

Martin Brandl 06.06.2018 16:02

Обновлять. Я выполнил задание api графика через сам angular, используя логин через angular-adal. Но соответствующий токен доступа не может быть использован при отправке в веб-api ... Проблема лазурного снова приводит к COR

NitinSingh 15.06.2018 15:29

Для тех кто смотрит на 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

Другие вопросы по теме