How to authenticate users using Azure AD in a Vue.js front-end and .Net 5 back-end

Question

We are currently in the process of moving from .Net MVC to a Vue.js front-end. In our MVC version, we have a custom Attribute that uses Azure AD to authenticate users at certain pages. The attribute would just check if they were already logged into Microsoft and if not, redirect them to our organization's login. Since making the move to Vue.js, we get a Cross-Origin Request Blocked error when attempting the redirect. Looking online, it seemed like we needed to move to the Non-API solution Microsoft offers with OpenId. We are still having the same Cross-Origin Request Blocked issue with that solution as well. I am not sure where to go from here. Below is how our Startup.cs is setup and the controller I am testing with.

Startup.cs

public void ConfigureServices(IServiceCollection services)
        {
            services.AddCors();
            services.AddHttpClient();
            services.AddMemoryCache();

            services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
                .AddMicrosoftIdentityWebApp(_configuration.GetSection("AzureAd"));

            services.AddAuthorization(options =>
            {
                options.AddPolicy("AuthorizeAccess",
                    policy => policy.Requirements.Add(new Helpside.Domain.Attributes.AuthorizeAccessAttribute()));
            });
         }

Controller

        [Authorize]
        [HttpGet("Test")]
        public JsonResult Test()
        {
            var response = "Test";

            return Json(response);
        }

Can you share the detailed Cross-Origin Request Blocked error message? In Asp.net core, to enable Cross-Origin Requests (CORS), you need to use the UseCors() middleare enables the CORS middleware and use the AddCors method call adds CORS services to the app's service container, then set the allowed Origins, more detail information, see Enable Cross-Origin Requests (CORS) in ASP.NET Core. — Zhi Lv
– Zhi Lv, Commented Apr 6, 2023 at 5:58

Sourav · Accepted Answer · 2023-04-06 07:36:43Z

You are getting a Cross-Origin Request Blocked error when attempting the redirect.

Thanks @ Zhi Lv for the comments.

You need to Install-Package

enter image description here

Microsoft.AspNetCore.Cors

To fix this issue, you need to add the below code to your Startup.cs file.

builder.Services.AddCors(options => 
{ 
    options.AddPolicy(name:MyAllowSpecificOrigins, policy => 
    {            policy.WithOrigins("http://example.com", "http://www.contoso.com"); 
    });
});

Default Policy in ConfigureServices Method

public  void  ConfigureServices(IServiceCollection services)  {  
services.AddCors(options =>  
{ 
options.AddDefaultPolicy( builder =>  { builder.WithOrigins("[https://localhost:47531](https://localhost:47531/)",  "[http://localhost:4430](http://localhost:4430/)")  .AllowAnyHeader()  
.AllowAnyMethod(); 
}); });  
  }

In the controller level you need to add the attribute to allow all origins.

[EnableCors("AllowAllOrigins")]

The Vue app needs to handle the authentication with MSAL.js or ADAL.js. And it has to acquire access tokens to your back-end API using the OAuth implicit flow.

For further information refer to the SO link.

Collectives™ on Stack Overflow

How to authenticate users using Azure AD in a Vue.js front-end and .Net 5 back-end

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related