添加 Azure AD 身份验证时出现 CORS 错误答案

【问题标题】：CORS error when adding Azure AD authentication添加 Azure AD 身份验证时出现 CORS 错误
【发布时间】：2020-09-22 22:28:01
【问题描述】：

尝试将 Azure AD 身份验证添加到具有 .net core 2.1 后端的 Angular 7 webapp。

但是，我在请求期间收到了 CORS 错误。

“从源 'https://localhost:5001' 访问 XMLHttpRequest 在 'https://login.microsoftonline.com/.......'（从 'https://localhost:5001/api/auth/login' 重定向）已被 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");
                }
            });
        }
    }

角度认证服务

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 错误。

【问题讨论】：

是您的 xhr 配置的 withCredentials bc，它不适用于 cookie
@DanielA.White 我不这么认为，我该如何检查？

标签： c# angular azure-active-directory angular7 .net-core-2.1

【解决方案1】：

您的方法有点错误。您已经配置了 OIDC + Cookie，但想使用 XHR 调用它。

典型的方法是：

在 API 上配置 JWT Bearer 令牌身份验证
在前端使用 ADAL/MSAL 对用户进行身份验证 + 为后端获取访问令牌
将访问令牌附加到 XHR 以便对其进行身份验证

一些可能有帮助的示例/文章：

请记住，ADAL 只能与 AAD v1 端点一起使用，而 MSAL 只能与 v2 端点一起使用。

【讨论】：