使用ADAL.JS+Cookie认证调用JWT WebAPI时授权弹窗过多

我来帮你搞定这个烦人的重复授权弹窗问题，结合你的环境（ASP.NET Core MVC门户+跨域JWT WebAPI+ADAL.js），我整理了几个核心的解决思路和实操步骤：

一、先搞懂为啥弹窗这么多 #

其实核心原因无非这几个：

• 跨域Cookie限制：不同域名下，门户的登录Cookie没法被WebAPI识别，导致每次调用API都得重新获取令牌，触发授权弹窗
• ADAL.js令牌缓存没利用好：没正确配置令牌缓存，每次调用都重新发起认证请求，自然弹窗不断
• 门户OIDC配置缺失：ASP.NET Core MVC的OpenIdConnect没设置令牌转发逻辑，导致前端每次调用API都得用户再授权一次

二、优化ADAL.js的令牌获取逻辑，尽量静默拿令牌 #

ADAL.js本身支持静默获取令牌，别一上来就弹窗口，先从缓存里找，找不到再弹：

1. 初始化ADAL时开启本地存储缓存，这样跨标签页也能复用令牌：

const authContext = new AuthenticationContext({
  clientId: '你的应用客户端ID',
  authority: 'https://login.microsoftonline.com/你的租户ID',
  cacheLocation: 'localStorage', // 用localStorage比sessionStorage持久
  redirectUri: window.location.origin + '/auth-callback' // 要和Azure AD注册的重定向URI一致
});

2. 调用API前先尝试静默获取令牌，失败了再弹窗口：

// 调用WebAPI前的令牌获取逻辑
authContext.acquireTokenSilent('你的WebAPI资源ID')
  .then(token => {
    // 拿到令牌后正常调用API
    fetch('https://你的API域名/api/目标接口', {
      headers: {
        'Authorization': `Bearer ${token}`
      }
    })
    .then(res => res.json())
    .then(data => { /* 处理返回数据 */ });
  })
  .catch(error => {
    // 只有静默获取失败（比如令牌过期、缓存为空）才弹授权窗口
    authContext.acquireTokenPopup('你的WebAPI资源ID')
      .then(token => { /* 调用API */ })
      .catch(popupErr => { /* 处理弹窗失败的情况 */ });
  });

三、让ASP.NET Core门户帮你转发令牌，减少前端折腾 #

既然你的门户是ASP.NET Core MVC，完全可以让后端来处理令牌转发，前端只需要登录一次就行：

1. 在Startup.cs里配置OpenIdConnect时，开启令牌保存：

services.AddAuthentication(options => {
  options.DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme;
  options.DefaultChallengeScheme = OpenIdConnectDefaults.AuthenticationScheme;
})
.AddCookie()
.AddOpenIdConnect(options => {
  options.ClientId = "你的应用客户端ID";
  options.Authority = "https://login.microsoftonline.com/你的租户ID";
  options.SaveTokens = true; // 把访问令牌和刷新令牌存在Cookie里
  options.ResponseType = "code id_token";
  options.Scope.Add("你的WebAPI资源ID"); // 要申请访问WebAPI的权限
});

2. 在MVC控制器里，从HttpContext取出令牌，转发给WebAPI：

public async Task<IActionResult> ShowApiData()
{
  // 从Cookie里取出之前保存的访问令牌
  var accessToken = await HttpContext.GetTokenAsync("access_token");
  
  var httpClient = new HttpClient();
  httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", accessToken);
  
  // 后端调用WebAPI，不受浏览器跨域限制
  var response = await httpClient.GetAsync("https://你的API域名/api/目标接口");
  var apiData = await response.Content.ReadFromJsonAsync<你的数据模型>();
  
  return View(apiData);
}

这样前端只需要在登录时授权一次，后续所有API调用都由后端转发令牌，彻底避免前端弹窗。

四、搞定跨域CORS配置，确保令牌能正常传递 #

因为WebAPI和门户不在同一个域名，得给WebAPI配置正确的CORS规则：
在WebAPI的Startup.cs里添加CORS策略：

services.AddCors(options => {
  options.AddPolicy("AllowPortalAccess", policy => {
    policy.WithOrigins("https://你的门户域名") // 指定允许的门户域名
          .AllowAnyHeader()
          .AllowAnyMethod()
          .AllowCredentials(); // 允许携带凭证（比如Cookie、令牌）
  });
});

// 在Configure中间件里启用CORS
app.UseCors("AllowPortalAccess");

五、最后检查配置一致性 #

确保ADAL.js和ASP.NET Core的OIDC配置完全一致：

• 两者用同一个clientId、tenantId和WebAPI资源ID
• 重定向URI（redirectUri）要和Azure AD应用注册里的配置完全匹配

按照这些步骤来，应该就能把重复授权弹窗的问题解决掉了。

内容的提问来源于stack exchange，提问作者Sat Thiru