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

by

0👍

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.

Leave a comment