如何在混合 ASP.NET Core MVC（后端）和 Vuejs SPA（前端）中配置 Azure AD 身份验证？
我的应用程序是一种混合方法，使用 ASP.NET Core MVC 作为后端。我有各种控制器，我的前端使用它们从数据库中提取数据，并在 MS Graph 上进行 API 调用。我使用以下 program.cs 文件来在用户首次登录网站时启动身份验证：
//authentication pipline
builder.Services.AddHttpContextAccessor();
var initialScopes = builder.Configuration.GetValue<string>("DownstreamApi:Scopes")?.Split(' ');
builder.Services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
.AddMicrosoftIdentityWebApp(options =>
{
builder.Configuration.Bind("AzureAd", options);
options.Events = new OpenIdConnectEvents
{
//Tap into this event to add a UserID Claim to a new HttpContext identity
OnTokenValidated = context =>
{
//This query returns the UserID from the DB by sending the email address in the claim from Azure AD
string query = "select dbo.A2F_0013_ReturnUserIDForEmail(@Email) as UserID";
string connectionString = builder.Configuration.GetValue<string>("ConnectionStrings:DBContext");
string signInEmailAddress = context.Principal.FindFirst Value("preferred_username");
using (var connection = new SqlConnection(connectionString))
{
var queryResult = connection.QueryFirst(query, new { Email = signInEmailAddress });
var claims = new List<Claim>
{
new Claim("UserID", queryResult.UserID.ToString())
};
var appIdentity = new ClaimsIdentity(claims);
context.Principal.AddIdentity(appIdentity);
}
return Task.CompletedTask;
},
};
}).EnableTokenAcquisitionToCallDownstreamApi(initialScopes)
.AddMicrosoftGraph(builder.Configuration.GetSection("DownstreamApi"))
.AddInMemoryTokenCaches();
//Add Transient Services
builder.Services.AddTransient<IOneDrive, OneDrive>();
builder.Services.AddControllers(options =>
{
var policy = new AuthorizationPolicyBuilder()
.RequireAuthenticatedUser()
.Build();
options.Filters.Add(new AuthorizeFilter(policy));
}).AddMicrosoftIdentityUI();
builder.Services.AddRazorPages().AddRazorPagesOptions(options =>
{
options.Conventions.AllowAnonymousToFolder("/Login");
options.Conventions.AuthorizeFolder("/");
options.Conventions.AuthorizeFolder("/files");
}).AddMicrosoftIdentityUI();
// Add the UI support to handle claims challenges
builder.Services.AddServerSideBlazor()
.AddMicrosoftIdentityConsentHandler();
builder.Services.AddRequiredScopeAuthorization();
在 Azure AD 门户中，我的应用程序注册为 Web 应用程序。因此，当用户最初访问该网站时，他们会被重定向到 https://login.microsoftonline.com/blahblah 以开始登录过程。这是由 Azure AD 身份平台自动执行的。然后，一旦登录发生，它们就会被重定向到加载 VueJS spa 的本地主机 (localhost:43862)。我的 spa 使用各种 axios 请求到控制器，它们提取数据，vue 路由器加载组件。然而，我的问题是用户需要重新登录，因为 cookie 已过期或者他们在另一个选项卡中注销。过期会话发出的下一个 axios 请求不会将用户重定向到 Azure 登录屏幕，而是会导致 CORS 错误。因此，我需要让我的 axios 请求强制页面重定向到 Azure AD 登录屏幕（这可能是最糟糕的想法，因为 CORS 策略会导致错误），或者让它返回到 localhost/login 的重定向，这是我自己的自定义登录屏幕使用 Azure AD 登录按钮，不应影响 CORS。那么如何拦截此 Azure AD 重定向到 Azure AD 登录并替换为我自己的？
我还尝试返回 401 错误代码，以便我可以在 axios 请求中检查该错误代码，但无济于事，它什么也不做。如果我在那里放置一个断点，它确实会命中此代码，但不会更改响应的状态代码，我仍然得到 302。我的代码是尝试添加到事件中：
OnRedirectToIdentityProvider = context =>
{
context.Response.StatusCode = 401;
return Task.CompletedTask;
}
我的其他想法是也许我应该设置 CORS 策略以允许从 login.microsoft.com 进行重定向？或者这是不好的做法？
