如何在React SPA中通过UI修改Azure AD用户角色（附Graph API示例）

核心结论 #

• 可以通过应用内UI实现用户AD组的添加/移除，但必须调用Microsoft Graph API——用户组数据存储在Azure AD中，SPA本身无直接修改权限，只能通过Graph API操作。
• 操作前提：当前登录用户需具备Azure AD的组管理权限（如全局管理员、组管理员），且应用注册已配置好Graph API的相应权限并完成管理员同意。

步骤1：配置Azure AD应用权限 #

在Azure AD应用注册中，添加以下Delegated权限（SPA仅支持Delegated权限），并完成管理员同意：

• GroupMember.ReadWrite.All：允许读取和修改组成员
• User.Read：允许获取当前用户基础信息（用于获取用户ID）

步骤2：React应用内实现逻辑 #

2.1 扩展MSAL配置，添加Graph API范围 #

在MSAL初始化配置中加入Graph API的权限范围：

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

const msalConfig = {
  auth: {
    clientId: "你的应用Client ID",
    authority: "https://login.microsoftonline.com/你的租户ID",
    redirectUri: "你的SPA重定向URI",
  },
};

const pca = new PublicClientApplication(msalConfig);

// Graph API权限范围
const graphScopes = ["GroupMember.ReadWrite.All", "User.Read"];

2.2 获取Graph API访问令牌 #

封装函数获取访问Graph的令牌：

async function getGraphToken() {
  const account = pca.getAllAccounts()[0];
  if (!account) throw new Error("用户未登录");

  const response = await pca.acquireTokenSilent({
    account: account,
    scopes: graphScopes,
  });
  return response.accessToken;
}

2.3 实现添加/移除用户到组的函数 #

// 添加用户到指定组
async function addUserToGroup(groupId, userId) {
  const token = await getGraphToken();
  const response = await fetch(`https://graph.microsoft.com/v1.0/groups/${groupId}/members/$ref`, {
    method: "POST",
    headers: {
      Authorization: `Bearer ${token}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      "@odata.id": `https://graph.microsoft.com/v1.0/users/${userId}`
    })
  });

  if (!response.ok) {
    const error = await response.json();
    throw new Error(error.error.message);
  }
  return response;
}

// 从指定组移除用户
async function removeUserFromGroup(groupId, userId) {
  const token = await getGraphToken();
  const response = await fetch(`https://graph.microsoft.com/v1.0/groups/${groupId}/members/${userId}/$ref`, {
    method: "DELETE",
    headers: {
      Authorization: `Bearer ${token}`
    }
  });

  if (!response.ok) {
    const error = await response.json();
    throw new Error(error.error.message);
  }
  return response;
}

2.4 界面组件示例（实现修改组的UI） #

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

function GroupManagement() {
  const { instance } = useMsal();
  const [groupId, setGroupId] = useState("目标组ID"); // 替换为你的测试组ID
  const [message, setMessage] = useState("");

  // 获取当前用户的Azure AD对象ID
  const getCurrentUserId = () => {
    const account = instance.getAllAccounts()[0];
    return account?.idTokenClaims?.oid;
  };

  const handleAddToGroup = async () => {
    try {
      const userId = getCurrentUserId();
      await addUserToGroup(groupId, userId);
      setMessage("已成功添加用户到组");
      // 刷新用户权限状态，触发界面更新
      await instance.acquireTokenSilent({
        account: instance.getAllAccounts()[0],
        scopes: ["openid", "profile", "email"] // 你的应用权限范围
      });
      window.dispatchEvent(new Event("userRolesUpdated"));
    } catch (err) {
      setMessage(`添加失败：${err.message}`);
    }
  };

  const handleRemoveFromGroup = async () => {
    try {
      const userId = getCurrentUserId();
      await removeUserFromGroup(groupId, userId);
      setMessage("已成功从组移除用户");
      // 刷新用户权限状态
      await instance.acquireTokenSilent({
        account: instance.getAllAccounts()[0],
        scopes: ["openid", "profile", "email"]
      });
      window.dispatchEvent(new Event("userRolesUpdated"));
    } catch (err) {
      setMessage(`移除失败：${err.message}`);
    }
  };

  return (
    <div>
      <h3>组权限管理</h3>
      <button onClick={handleAddToGroup}>添加到测试组</button>
      <button onClick={handleRemoveFromGroup}>从测试组移除</button>
      <p>{message}</p>
    </div>
  );
}

export default GroupManagement;

2.5 监听角色变化，更新界面 #

在需要根据角色渲染的组件中，监听权限更新事件：

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

function RoleBasedComponent() {
  const { instance } = useMsal();
  const [hasTestGroupAccess, setHasTestGroupAccess] = useState(false);
  const testGroupId = "你的测试组ID";

  // 获取用户所属组并判断权限
  async function checkUserGroupAccess() {
    const token = await getGraphToken();
    const response = await fetch(`https://graph.microsoft.com/v1.0/me/memberOf`, {
      headers: { Authorization: `Bearer ${token}` }
    });
    const data = await response.json();
    const isInGroup = data.value.some(group => group.id === testGroupId);
    setHasTestGroupAccess(isInGroup);
  }

  useEffect(() => {
    checkUserGroupAccess();
    // 监听权限更新事件，实时刷新状态
    const handleRolesUpdate = () => checkUserGroupAccess();
    window.addEventListener("userRolesUpdated", handleRolesUpdate);
    return () => window.removeEventListener("userRolesUpdated", handleRolesUpdate);
  }, []);

  return (
    <div>
      {hasTestGroupAccess ? (
        <p>你拥有测试组权限，可以访问专属功能</p>
      ) : (
        <p>你没有测试组权限，无法访问此功能</p>
      )}
    </div>
  );
}

注意事项 #

• 只有具备组管理权限的用户才能执行添加/移除操作，普通用户无此权限。
• 测试时建议使用Azure AD测试租户，避免影响生产环境。
• 调用Graph API后，需重新获取用户令牌或组信息，才能让界面实时更新权限状态。

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