Проблема с CORS при добавлении аутентификации Azure AD (с MSAL) в приложении angular - PullRequest
Новая
       76

Проблема с CORS при добавлении аутентификации Azure AD (с MSAL) в приложении angular

1 голос
/ 26 января 2020

В настоящее время я занимаюсь разработкой Angular 8 Frontend & asp. net core 3.1 внутреннего приложения, в котором я использую Azure AD для аутентификации пользователей.

Поток приложения выглядит так: Затем.

Пользователь пытается войти или получить доступ к маршруту, который защищен / защищен в моем приложении Angular, поэтому пользователь перенаправляется на страницу входа Azure. Так что теперь приложение Angular имеет токен, необходимый для отправки на мой asp бэкэнд. Мой бэкэнд получает токен вместе с запросом API. бэкэнд проверяет токен и отвечает на вызов API.

ПРОБЛЕМА

При выполнении вызова API меня перенаправляют на страницу входа, но после входа в систему. Я получаю эта ошибка .

После входа в систему я получаю действительный токен от azure по URL: http://localhost: 4200 / # id_token = << TOKEN >>

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

Не уверен насчет этого, но я не вижу никаких токенов, переданных в этих заголовках. Хотя я использую HTTP INTERCEPTORS для добавления токена в мои заголовки каждого запроса. Может ли это быть проблемой?

МОЙ КОД

Backend

Startup.cs 

    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
        //other config services


        services.AddAuthentication(AzureADDefaults.BearerAuthenticationScheme)
            .AddAzureADBearer(options => Configuration.Bind("AzureActiveDirectory", options));

        services.AddCors((opt =>
        {
            opt.AddPolicy("FrontEnd", builder => builder
                            .WithOrigins("http://localhost:4200")
                            .AllowAnyMethod()
                            .AllowAnyHeader()
                            .AllowCredentials()
                        );
        }));
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        //other configurations

        app.UseAuthentication();
        app.UseAuthorization();

        app.UseCors("FrontEnd");

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
        });


    }
}

Простой API 

[Route("api/[controller]")]
[ApiController]
[EnableCors("FrontEnd")]
[Authorize]
public class GezinnenController : ControllerBase
{
    //Constructor & properties

    // GET: api/Gezinnen
    [HttpGet]
    public async Task<ActionResult<IEnumerable<GezinForLijstDto>>> GetGezinnen()
    {
        var gezinnen = await _unitOfWork.GezinRepo.GetAllAsync(null, "Personen,Gemeente");

        var gezinnenForLijstDto = _mapper.Map<IEnumerable<GezinForLijstDto>>(gezinnen);

        return Ok(gezinnenForLijstDto);
    }

Angular

App.module.ts 

  import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
  import { MsalModule, MsalInterceptor } from '@azure/msal-angular';
  //other imports

  export const protectedResourceMap:
     [string, string[]][] = [['https://localhost:5001/api/gezinnen', ['api://<<API Client ID>>/api-access']] ];

  @NgModule({
     declarations: [
        ...
     ],
     imports: [
        ...
        MsalModule.forRoot({
           clientID: '<<Frontend Client ID>>',
           authority: 'https://login.microsoftonline.com/<<API tenant ID>>',
           consentScopes: [ 'user.read', 'api://<<API Client ID>>/api-access' ],
           protectedResourceMap: protectedResourceMap }),
     ],
     providers: [
        {
        provide: HTTP_INTERCEPTORS,
        useClass: MsalInterceptor,
        multi: true
     }],
     bootstrap: [
        AppComponent
     ]
  })
  export class AppModule { }

Может кто-нибудь помочь мне исправить это? Я начинаю отчаяться: -)

Ответы [ 2 ]

0 голосов
/ 29 января 2020

Для устранения ошибки CORS, в ваших startup.cs, вы можете переместить app.UseCors ("FrontEnd") выше app.UseAuthentication ()

0 голосов
/ 28 января 2020

Рабочая среда:

1. Модифицируйте сервер, добавив заголовок Access-Control-Allow-Origin: *, чтобы разрешить перекрестные запросы из любого места (или укажите домен вместо *). Это должно решить вашу проблему.

2.Использование Angular прокси

Для получения более подробной информации вы можете обратиться к этой статье .

...