Argthtjtr

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

However, I get the CORS error during the request.

"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."

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");

                }

            });

        }

    }

angular auth service

login() {        

    const url = this.baseUrl + "api/auth/login";

    this._http.get(url).subscribe(response => {

      console.log(response);

    });

  }

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?

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.

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

The typical approach would be to:

• Configure JWT Bearer token authentication on the API


• Use ADAL/MSAL on the front-end to authenticate the user + acquire an access token for the back-end


• Attach the access token to XHRs so they are authenticated

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/lib/msal-angular/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

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