如何在Vue.js前端和.Net 5后端中使用Azure AD对用户进行身份验证

tquggr8v  于 2023-04-12  发布在  Vue.js
关注(0)|答案(1)|浏览(249)

我们目前正在从.Net MVC迁移到Vue.js前端。在我们的MVC版本中,我们有一个自定义的Attribute,它使用Azure AD在某些页面上对用户进行身份验证。该属性只会检查他们是否已经登录到Microsoft,如果没有,则将他们重定向到我们组织的登录名。自从迁移到Vue.js后,我们在尝试重定向的时候会得到一个Cross-Origin Request Blocked的错误。在线查看,看起来我们需要转移到微软提供的OpenId的非API解决方案。我们仍然有同样的跨域请求阻塞问题。我不知道从这里到哪里去。下面是我们的Startup.cs是如何设置的,以及我正在测试的控制器。
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()));
            });
         }

控制器

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

            return Json(response);
        }
7lrncoxx

7lrncoxx1#

尝试重定向时出现跨域请求阻止错误。
谢谢@Zhi Lv的评论。
您需要安装包

Microsoft.AspNetCore.Cors
要解决此问题,您需要将以下代码添加到Startup.cs文件中。

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

ConfigureServices方法中的默认策略

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(); 
}); });  
  }

controller level中,您需要添加属性以允许所有原点。

[EnableCors("AllowAllOrigins")]

Vue应用程序需要使用MSAL.js或ADAL.js处理身份验证。它必须使用OAuth隐式流获取后端API的访问令牌。
有关详细信息,请参阅SO link.

相关问题