使用Azure AD与MSAL实现SPA应用间的单点登录（SSO）

我之前帮团队搞定过多子域名SPA的MSAL.js单点登录问题，你的核心痛点确实是session storage的同源隔离限制，下面给你几个经过验证的最佳实践，一步步来解决：

一、先理清MSAL.js SSO的核心逻辑 #

首先得明确：MSAL.js的跨应用SSO本质上依赖Azure AD在**根域名（xyz-corp.com）**下设置的认证Cookie，而不是前端的sessionStorage/localStorage。sessionStorage只是MSAL用来缓存当前应用的token，跨子域名时没法直接共享，但只要Azure AD的SSO Cookie存在，其他SPA就能静默获取token，实现无缝登录。

二、关键配置调整（必做） #

1. 统一MSAL基础配置 #

所有SPA的MSAL实例必须确保以下配置一致：

• authority：指向同一个Azure AD租户（比如https://login.microsoftonline.com/your-tenant-id/）
• clientId：如果是不同的应用注册，确保每个应用都在同一个租户下，并且已在Azure AD门户中配置了对应子域名的重定向URI（比如https://appA.xyz-corp.com/auth-callback）
• 开启storeAuthStateInCookie：将这个配置项设为true，MSAL会把认证状态存在根域名的Cookie中，跨子域名时能读取到，避免静默请求失败

示例配置代码：

const msalConfig = {
  auth: {
    clientId: "your-client-id",
    authority: "https://login.microsoftonline.com/your-tenant-id/",
    redirectUri: "https://appA.xyz-corp.com/auth-callback",
    storeAuthStateInCookie: true // 关键配置，跨子域名共享认证状态
  },
  cache: {
    cacheLocation: "localStorage", // 可选，比sessionStorage更持久，配合SSO Cookie使用效果更好
    storeAuthStateInCookie: true
  }
};

const msalInstance = new msal.PublicClientApplication(msalConfig);

2. 实现静默获取token的逻辑 #

在每个SPA的初始化阶段，不要直接跳登录页，而是先尝试静默获取token：

async function initAuth() {
  const account = msalInstance.getAllAccounts()[0];
  if (account) {
    try {
      const response = await msalInstance.acquireTokenSilent({
        scopes: ["user.read"], // 替换为你的应用所需权限
        account: account
      });
      // 成功静默获取token，处理登录后逻辑
      console.log("已自动登录", response.accessToken);
    } catch (error) {
      // 静默失败，说明无有效SSO会话，跳转登录页
      if (error instanceof msal.InteractionRequiredAuthError) {
        await msalInstance.loginRedirect({ scopes: ["user.read"] });
      } else {
        console.error("认证异常", error);
      }
    }
  } else {
    // 未找到账户，跳转登录页
    await msalInstance.loginRedirect({ scopes: ["user.read"] });
  }
}

// 页面加载时执行初始化
initAuth();

这样用户在appA登录后，打开appB时，acquireTokenSilent会自动读取Azure AD的根域名Cookie，完成静默认证，无需重复登录。

三、进阶优化方案 #

1. 使用统一登录入口（可选） #

可以在根域名（比如https://xyz-corp.com/login）部署一个专门的登录SPA，所有子域名SPA都跳转到这里完成认证，成功后重定向回对应应用。这样所有应用共享同一个登录会话，减少重复配置。

2. 配置Azure AD跨域权限 #

确保在Azure AD门户中做好以下设置：

• 进入应用注册 -> 目标应用 -> 认证，添加所有子域名的重定向URI
• 如果使用授权码流，确保勾选"允许授权码流"（推荐使用授权码流而非隐式流）

四、常见问题排查 #

• 若静默获取token失败，检查浏览器是否阻止了第三方Cookie（现代浏览器默认可能阻止，需引导用户开启，或使用PKCE模式适配）
• 确保所有SPA都使用HTTPS，Azure AD的SSO Cookie仅在HTTPS环境下生效
• 建议使用MSAL.js v2.x及以上版本，兼容性和稳定性更好

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