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

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

0 голосов
/ 29 мая 2018

Среда

  • Угловой 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 в порядке.

( Update 1 Angular 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;
  }

Сообщение об ошибке

Не удалось загрузить https://login.microsoftonline.com/common/oauth2/v2.0/authorize?client_id=fba45f7b: Ответ на предпечатный запрос не проходит контроль доступапроверка: в запрашиваемом ресурсе отсутствует заголовок «Access-Control-Allow-Origin».Исходный объект 'null', следовательно, не имеет доступа.

1 Ответ

0 голосов
/ 29 мая 2018

Это не так, как это работает.Http-клиент никогда не перенаправит вас на страницу (в вашем случае страницу входа AAD).Он только получает / отправляет контент с / на ресурс.Вы можете выполнить перенаправление, используя window.location.replace () , но это, вероятно, не то, что вам нужно (токен не вернется в ваше угловое приложение).

Вам нужно выбрать Библиотеку аутентификации Active Directory вроде adal-js или MSAL (вы найдете пакеты Angular NPM для обоих) инастроить компонент с вашими настройками AAD.Затем вы можете выполнить вход в свой клиент Angular и запросить access_token для вашего API.Теперь вам нужно передавать access_token в HTTP-заголовке авторизации при каждом запросе к вашему (защищенному) API.

Обратите внимание, что вам нужно создать еще одно приложение в AAD, которое представляет ваш угловой интерфейс, и предоставить этому приложению доступ.к вашему API.

...