基于Azure AD B2C实现Blazor与React JS的单点登录问题咨询

一、先对齐Azure AD B2C应用注册核心配置 #

• 确保Blazor和React的应用注册在同一个Azure AD B2C租户下，账户类型保持一致（比如都选“任意身份提供商或组织目录中的账户”）
• 检查React应用的重定向URI：必须匹配实际部署地址（如http://localhost:3000/auth-callback），且类型选「单页应用(SPA)」；Blazor的重定向URI类型选「Web」即可
• 两个应用必须绑定完全相同的用户流/自定义策略，同时都添加openid、profile权限并完成管理员同意

二、React端MSAL库配置要踩准关键点 #

Blazor用MSAL.NET，React用msal-react/msal-browser，核心配置必须对齐：

• authority必须完全一致：格式为https://{你的租户名}.b2clogin.com/{你的租户名}.onmicrosoft.com/{你的用户流名称}，大小写都不能错
• 缓存配置改对：把cacheLocation设为"localStorage"（默认sessionStorage无法跨应用共享），同时开启storeAuthStateInCookie: true，确保能读取到Azure AD B2C的SSO Cookie
• 示例配置代码：

import { PublicClientApplication } from '@azure/msal-browser';

const msalConfig = {
  auth: {
    clientId: "你的React应用客户端ID",
    authority: "https://your-tenant.b2clogin.com/your-tenant.onmicrosoft.com/B2C_1_SignUpSignIn",
    redirectUri: "http://localhost:3000/auth-callback",
    postLogoutRedirectUri: "http://localhost:3000/"
  },
  cache: {
    cacheLocation: "localStorage",
    storeAuthStateInCookie: true
  }
};

export const msalInstance = new PublicClientApplication(msalConfig);

三、解决SSO Cookie跨域问题 #

• 如果Blazor和React是跨顶级域名部署（比如app1.com和app2.com），需要给Azure AD B2C配置自定义域名，把SSO Cookie的域设置为父域名（如.yourdomain.com），让两个应用都能读取
• 测试时临时关闭浏览器的第三方Cookie阻止功能：部分浏览器（如Chrome）默认拦截第三方Cookie，会导致React读不到Azure AD B2C的SSO凭证

四、优化React端登录逻辑 #

不要一上来就触发登录，先检查是否已有SSO账户：

const handleLogin = async () => {
  const accounts = msalInstance.getAllAccounts();
  if (accounts.length > 0) {
    // 已有SSO账户，静默获取Token
    const request = {
      account: accounts[0],
      scopes: ["openid", "profile"]
    };
    try {
      const response = await msalInstance.acquireTokenSilent(request);
      // 用获取到的Token访问资源即可
    } catch (error) {
      // 静默失败再触发登录跳转
      await msalInstance.loginRedirect(request);
    }
  } else {
    await msalInstance.loginRedirect();
  }
};

五、调试验证步骤 #

• 打开浏览器开发者工具，到「Application -> Cookies」下，检查your-tenant.b2clogin.com是否存在x-ms-cpim-sso、x-ms-cpim-cache这类SSO Cookie
• 查看「Network」标签，看React初始化时的/authorize请求，如果返回login_required，说明没读到SSO Cookie，回头检查配置
• 再次确认两个应用的用户流/策略名称完全一致，包括大小写

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