如何在React.js中通过@azure/msal-react自定义Azure AD SSO认证错误信息？

针对你在React应用中使用@azure/msal-react时，用户不在指定AD组触发Azure默认错误弹窗的问题，以下是几个可行的解决方案：

1. 切换到Redirect登录模式（推荐） #

Popup登录模式下，错误弹窗由Azure AD认证页面直接触发，无法拦截或自定义。改用Redirect模式后，认证错误会带回你的应用，可完全在应用内处理：

步骤1：修改登录逻辑为Redirect #

const login = () => {
  instance.loginRedirect({
    scopes: ["profile", "email"],
  });
};

步骤2：监听登录失败事件并处理 #

在MSAL实例初始化时添加事件回调，捕获错误码并做自定义处理：

import { PublicClientApplication, EventType } from "@azure/msal-browser";

const instance = new PublicClientApplication({
  auth: {
    clientId: "你的客户端ID",
    authority: "你的租户ID/租户域名",
    redirectUri: window.location.origin, // 或自定义回调地址
  },
});

// 监听登录失败事件
instance.addEventCallback((event) => {
  if (event.eventType === EventType.LOGIN_FAILURE) {
    const error = event.error;
    // 针对用户不在组的错误码AADSTS50105做处理
    if (error.errorCode === "AADSTS50105") {
      // 重定向到自定义无权限页面
      navigate("/unauthorized", { 
        state: { message: "您不属于授权访问组，请联系管理员" } 
      });
    } else {
      // 处理其他登录错误
      console.error("登录失败：", error);
      // 可显示通用自定义错误提示
    }
  }
});

步骤3：在路由中处理回调页面 #

确保你的路由配置包含MSAL的回调路由（通常是/或自定义redirectUri），可使用MsalAuthenticationTemplate或手动处理：

import { MsalAuthenticationTemplate, useMsal } from "@azure/msal-react";

function AuthCallback() {
  const { instance } = useMsal();
  // 手动处理回调（可选，MSAL会自动处理，但可在这里加额外逻辑）
  instance.handleRedirectPromise().catch(err => {
    if (err.errorCode === "AADSTS50105") {
      navigate("/unauthorized");
    }
  });
  return <div>处理登录中...</div>;
}

// 在路由中添加
<Route path="/" element={<AuthCallback />} />

2. 优化Popup模式下的错误处理（仅备选） #

如果必须使用Popup模式，虽然无法阻止Azure的默认错误弹窗，但可以在用户关闭弹窗后，显示自定义错误提示：

const login = async () => {
  try {
    const res = await instance.loginPopup({
      scopes: ["profile", "email"],
    });
    // 注意：MSAL返回的是小写idToken，原代码的IdToken是错误的
    if (res.idToken) {
      navigate("/about");
    }
  } catch (err) {
    // 根据错误码判断场景
    if (err.errorCode === "AADSTS50105") {
      // 显示自定义错误提示
      alert("您没有权限访问该应用，请联系管理员");
      // 或重定向到自定义错误页
      // navigate("/unauthorized");
    } else {
      console.error("登录错误：", err);
    }
  }
};

3. 提前校验用户组（需额外权限） #

如果你的应用有Microsoft Graph API权限，可以在用户发起登录前，先通过Graph API查询用户所属组，提前拦截无权限用户：

// 示例：调用Graph API查询用户组（需提前获取访问令牌）
const checkUserGroup = async () => {
  const tokenResponse = await instance.acquireTokenSilent({
    scopes: ["User.Read", "GroupMember.Read.All"],
  });
  const response = await fetch("https://graph.microsoft.com/v1.0/me/memberOf", {
    headers: { Authorization: `Bearer ${tokenResponse.accessToken}` },
  });
  const groups = await response.json();
  // 检查是否存在目标组
  const hasAccess = groups.value.some(group => group.id === "目标组ID");
  if (!hasAccess) {
    // 直接显示自定义错误，不触发Azure登录
    alert("您没有权限访问该应用");
    return false;
  }
  return true;
};

// 修改登录逻辑
const login = async () => {
  const hasAccess = await checkUserGroup();
  if (hasAccess) {
    await instance.loginPopup({ scopes: ["profile", "email"] });
    navigate("/about");
  }
};

注意：此方案需要在Azure AD中为应用添加GroupMember.Read.All权限，且用户需同意该权限，适用场景有限。

关键说明 #

• localizedString仅用于自定义MSAL组件的本地化文本（如登录按钮文字），无法修改Azure AD认证页面的错误提示，因此该思路不适用。
• 常见的无组权限错误码为AADSTS50105，可根据此错误码精准处理场景。

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