Как исправить ошибку CORS при запросе API с проверкой подлинности Azure AD - PullRequest
0 голосов
/ 19 сентября 2019

Цель этого проекта - аутентификация пользователей с помощью Azure Active Directory с использованием .NET Core 2.2

Мне удается аутентифицировать пользователя, напрямую отправляя запрос в моем браузере.Например, если я звоню 'http://localhost:44353/api/azureauth' из моего браузера, у меня нет проблем.

Но если я звоню из проекта Angular, я получаю следующие ошибки:

Access to XMLHttpRequest at 'https://login.microsoftonline.com/{tenant_id}/oauth2/authorize?client_id={client_id}2&redirect_uri=https%3A%2F%2Flocalhost%3A44353%2Fsignin-oidc&response_type=id_token&scope=openid%20profile&response_mode=form_post&nonce={nonce}'
(redirected from 'https://localhost:44353/api/azureauth/me') from origin 'null' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Cross-Origin Read Blocking (CORB) blocked cross-origin response https://login.microsoftonline.com/{tenant_id}/oauth2/authorize?client_id={client_id}&redirect_uri=https%3A%2F%2Flocalhost%3A44353%2Fsignin-oidc&response_type=id_token&scope=openid%20profile&response_mode=form_post&nonce={nonce} with MIME type text/html. 
See https://www.chromestatus.com/feature/5629709824032768 for more details.

Вот мой Startup.cs:

    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        public void ConfigureServices(IServiceCollection services)
        {
            services.Configure<CookiePolicyOptions>(options =>
            {
                options.CheckConsentNeeded = context => true;
                options.MinimumSameSitePolicy = SameSiteMode.None;
            });

            services.AddAuthentication(AzureADDefaults.AuthenticationScheme)
                .AddAzureAD(options => Configuration.Bind("AzureAd", options));

            services.Configure<OpenIdConnectOptions>(AzureADDefaults.OpenIdScheme, options =>
            {
                options.Authority = options.Authority + "/v2.0/";
                options.TokenValidationParameters.ValidateIssuer = false;
            });

            services.AddMvc(options =>
            {
                var policy = new AuthorizationPolicyBuilder()
                    .RequireAuthenticatedUser()
                    .Build();
                options.Filters.Add(new AuthorizeFilter(policy));
            });

            services.AddCors(options =>
            {
                options.AddPolicy("CorsPolicy",
                    builder => builder.AllowAnyOrigin()
                        .AllowAnyMethod()
                        .AllowAnyHeader()
                        .AllowCredentials()
                );
            });
        }

        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseHsts();
            }

            app.UseHttpsRedirection();
            app.UseStaticFiles();
            app.UseCookiePolicy();

            app.UseAuthentication();

            app.UseMvc();

            app.UseCors("CorsPolicy");
        }

Вот один из моих контроллеров:

    [Route("api/[controller]"), EnableCors("CorsPolicy")]
    [ApiController]
    public class AzureAuthController
    {
        public IActionResult Me()
        {
            return new JsonResult("ok");
        }
    }

Вот служба в Angular, которая вызывает .NET Core API:

import { Injectable, Inject } from '@angular/core';
import { map } from 'rxjs/operators';
import { HttpHeaders, HttpClient } from '@angular/common/http';

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json',
    'Accept': 'application/json',
    'Authorization': '',
    'Access-Control-Allow-Credentials': '*',
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Headers': '*'
  })
};

@Injectable({
  providedIn: 'root'
})
export class AzureAuthService {

  private baseUrl = 'https://localhost:44353/api/azureauth';

  constructor(protected http: HttpClient) {
  }

  public me() {
    return this.http.get(`${this.baseUrl}`, httpOptions).
      pipe(
        map((data) => {
          return data;
        }, (err) => {
          console.log('An error occured', err);
        })
      );
  }
}

Я не понимаю проблемы, зная, что разрешаю все происхождение и методы, как в запросах Angular, так и в управлении CORS в .NET Core API

Я упоминаю, чтоПроект представляет собой пример проекта Azure AD с ASP.NET Core (https://github.com/Azure-Samples/active-directory-aspnetcore-webapp-openidconnect-v2/tree/master/1-WebApp-OIDC/1-1-MyOrg) Спасибо за ваши ответы

Ответы [ 2 ]

0 голосов
/ 20 сентября 2019

Возможно, вам придется просмотреть информацию, которую вы указали как «Аудитория».

Откройте appsettings.json
Возьмите токен на предъявителя, полученный вашим Angular App, и вставьте его в форму по адресу jwt.io.
Для аудитории введите значение, найденное в поле «aud».
Для Эмитента введите значение, найденное в поле «iss».

Более подробная информация здесь (шаг 7): https://blogs.perficient.com/2019/07/11/securing-your-web-api-using-azure-active-directory/

Надеюсь, это поможет.

0 голосов
/ 20 сентября 2019

Как вам было предложено, вам необходима библиотека аутентификации Active Directory, например ADAL или MSAL, для выполнения процесса аутентификации.

Зарегистрируйте клиентское приложение и включите неявное разрешение OAuth2 для доступа к вашему API.Посмотрите этот пример проекта кода: Вызов веб-API, защищенного Azure AD, в одностраничном приложении AngularJS .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...