添加 Azure AD 身份验证时出现 CORS 错误 [英] CORS error when adding Azure AD authentication

问题描述

尝试将 Azure AD 身份验证添加到具有 .net core 2.1 后端的 Angular 7 Web 应用程序.

Trying to add Azure AD authentication to an Angular 7 webapp with a .net core 2.1 backend.

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

However, I get the CORS error during the request.

"在 'https://login.microsoftonline.com/ 处访问 XMLHttpRequest.......'(重定向自 'https://localhost:5001/api/auth/login') 来自 origin 'https://localhost:5001' 已被 CORS 策略阻止:没有 'Access-Control-Allow-请求的资源上存在 Origin' 标头."

"Access to XMLHttpRequest at 'https://login.microsoftonline.com/.......' (redirected from 'https://localhost:5001/api/auth/login') from origin 'https://localhost:5001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

所以我尝试在启动管道中添加一些 CORS 策略.

So I tried adding some CORS policy in the startup pipe-line.

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) 从客户端提取令牌，然后将令牌传递给服务器进行验证?

Or am I going the wrong way about it? Should I use some third pary "ADAL" npm package (https://www.npmjs.com/package/adal-angular) to extract the token from the client side and then pass the token to the server for validation?

如果我导航到登录 URL，例如:localhost:5000/api/auth/login --> 我将转到 AAD 登录页面，并在成功验证时重定向回来.但是如果我从代码中触发它，我会收到 CORS 错误.

If I navigate to the login URL, e.g: localhost:5000/api/auth/login --> I get set off to the AAD login page, and redirected back at successful authentication. But if I trigger it from code, I get the CORS error.

推荐答案

你的方法有点错误.您已配置 OIDC + Cookies，但想要使用 XHR 调用它.

Your approach is a bit wrong. You've configured OIDC + Cookies, yet want to call it with an XHR.

典型的方法是:

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

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

Some samples/articles that may help:

• https://github.com/Azure-Samples/active-directory-angularjs-singlepageapp-dotnet-webapi
• https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/MSALAngularDemoApp
• https://github.com/azure-samples/active-directory-dotnet-native-aspnetcore-v2
• https://joonasw.net/view/azure-ad-authentication-aspnet-core-api-part-1
• https://joonasw.net/view/azure-ad-authentication-aspnet-core-api-part-2

请记住，ADAL 只能用于 AAD v1 端点，MSAL 只能用于 v2 端点.

Keep in mind ADAL can only be used with the AAD v1 endpoint and MSAL with the v2 endpoint.

这篇关于添加 Azure AD 身份验证时出现 CORS 错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！