Ошибка CORS при добавлении аутентификации Azure AD - PullRequest
0 голосов
/ 19 ноября 2018

Попытка добавить аутентификацию Azure AD в веб-приложение Angular 7 с бэкэндом .net core 2.1.

Однако во время запроса я получаю сообщение об ошибке CORS.

"Доступ к XMLHttpRequest по адресу'https://login.microsoftonline.com/.......' (перенаправлено из' https://localhost:5001/api/auth/login') из источника 'https://localhost:5001' заблокировано политикой CORS: в запрошенном ресурсе отсутствует заголовок' Access-Control-Allow-Origin ''. "

Поэтому я попытался добавить некоторую политику CORS в конвейер запуска.

Startup.cs

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

        public IConfiguration Configuration { get; }    

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddCors(config => config
             .AddPolicy("SiteCorsPolicy", builder => builder
               .AllowAnyHeader()
               .AllowAnyMethod()
               .AllowAnyOrigin()
               .AllowCredentials()
              )
           ); // <--- CORS policy - allow all for now

            services.AddAuthentication(options =>
            {
                options.DefaultChallengeScheme = OpenIdConnectDefaults.AuthenticationScheme;
                options.DefaultSignInScheme = CookieAuthenticationDefaults.AuthenticationScheme;
                options.DefaultAuthenticateScheme = CookieAuthenticationDefaults.AuthenticationScheme;                
            })
            .AddOpenIdConnect(options =>
            {
                options.Authority = "https://login.microsoftonline.com/MY_AD_DOMAIN.onmicrosoft.com";   // ad domain            
                options.ClientId = "my_client_id"; // client guid
                options.ResponseType = OpenIdConnectResponseType.IdToken;
                options.CallbackPath = "/auth/signin-callback";
                options.SignedOutRedirectUri = "https://localhost:5000";
                options.TokenValidationParameters.NameClaimType = "name";
            }).AddCookie();

            services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);

            // In production, the Angular files will be served from this directory
            services.AddSpaStaticFiles(configuration =>
            {
                configuration.RootPath = "ClientApp/dist";
            });
        }

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

            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
                app.UseHsts();
            }

            app.UseCors("SiteCorsPolicy"); // <--- CORS policy
            app.UseHttpsRedirection();
            app.UseStaticFiles();
            app.UseSpaStaticFiles();

            app.UseAuthentication();
            app.UseMvc(routes =>
            {
                routes.MapRoute(
                    name: "default",
                    template: "{controller}/{action=Index}/{id?}");
            });

            app.UseSpa(spa =>
            {
                spa.Options.SourcePath = "ClientApp";
                if (env.IsDevelopment())
                {
                    spa.UseAngularCliServer(npmScript: "start");
                }
            });
        }
    }

angularauth service

login() {        
    const url = this.baseUrl + "api/auth/login";
    this._http.get(url).subscribe(response => {
      console.log(response);
    });
  }

Или я поступаю не так? Нужно ли использовать какой-нибудь третий пакет "ADAL" npm (https://www.npmjs.com/package/adal-angular) для извлечения токена со стороны клиентаа затем передать токен на сервер для проверки?

Если я перейду к URL-адресу входа в систему, например: localhost: 5000 / api / auth / login -> я получу доступ к странице входа в AAD иперенаправлен обратно при успешной аутентификации. Но если я запускаю его из кода, я получаю ошибку CORS.

1 Ответ

0 голосов
/ 20 ноября 2018

Ваш подход немного ошибочен.Вы настроили файлы cookie OIDC +, но хотите вызывать их с помощью XHR.

Типичный подход заключается в следующем:

  • Настройка проверки подлинности токена JWT Bearer в API
  • Использование ADAL / MSAL на внешнем интерфейсе для аутентификации пользователя + получение токена доступа для внутреннего интерфейса
  • Присоединение токена доступа к XHR, чтобы они аутентифицировались

Некоторые образцы / статьи, которые могут помочь:

Имейте в виду, что ADAL может использоваться только с конечной точкой AAD v1, а MSAL - с конечной точкой v2.

...