如何通过React/TypeScript程序向AAD中的M365组添加应用所有者

前提条件 #

• 你已拥有目标M365组的所有者权限
• 已在AAD中注册你的React应用，并配置了正确的API权限
• 已获取要添加为所有者的AAD应用的目录对象ID（不是客户端ID，在AAD应用注册的「概述」页查看）

步骤1：安装依赖 #

安装MSAL身份验证包和Graph API相关工具：

npm install @azure/msal-react @azure/msal-browser axios

步骤2：配置MSAL身份验证 #

初始化MSAL实例，用于获取访问Graph API的令牌：

// src/authConfig.ts
import { PublicClientApplication, Configuration } from '@azure/msal-browser';

export const msalConfig: Configuration = {
  auth: {
    clientId: '你的React应用客户端ID',
    authority: 'https://login.microsoftonline.com/你的租户ID',
    redirectUri: 'http://localhost:3000', // 你的应用重定向URI
  },
  cache: {
    cacheLocation: 'sessionStorage',
    storeAuthStateInCookie: false,
  }
};

export const msalInstance = new PublicClientApplication(msalConfig);
// 所需权限：仅操作你拥有的组，用Group.ReadWrite.OwnedBy足够
export const graphScopes = ['Group.ReadWrite.OwnedBy'];

步骤3：获取Graph访问令牌 #

封装获取令牌的函数，确保已登录用户能拿到有效令牌：

// src/graphUtils.ts
import { msalInstance, graphScopes } from './authConfig';

export async function getGraphAccessToken(): Promise<string> {
  const activeAccount = msalInstance.getActiveAccount();
  if (!activeAccount) {
    throw new Error('用户未登录，请先完成身份验证');
  }

  const tokenResponse = await msalInstance.acquireTokenSilent({
    account: activeAccount,
    scopes: graphScopes,
  });

  return tokenResponse.accessToken;
}

步骤4：调用Graph API添加应用为组所有者 #

通过POST请求将AAD应用关联为M365组的所有者：

// src/groupOperations.ts
import axios from 'axios';
import { getGraphAccessToken } from './graphUtils';

export async function addAppAsGroupOwner(groupId: string, appObjectId: string): Promise<void> {
  const accessToken = await getGraphAccessToken();
  
  await axios.post(
    `https://graph.microsoft.com/v1.0/groups/${groupId}/owners/$ref`,
    {
      "@odata.id": `https://graph.microsoft.com/v1.0/directoryObjects/${appObjectId}`
    },
    {
      headers: {
        Authorization: `Bearer ${accessToken}`,
        'Content-Type': 'application/json'
      }
    }
  );
}

步骤5：在React组件中调用操作 #

在业务组件中集成上述函数，实现交互操作：

// src/components/AddAppOwner.tsx
import React, { useState } from 'react';
import { addAppAsGroupOwner } from '../groupOperations';

const AddAppOwner = () => {
  const [groupId, setGroupId] = useState('');
  const [appObjectId, setAppObjectId] = useState('');
  const [status, setStatus] = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setStatus('处理中...');
    try {
      await addAppAsGroupOwner(groupId, appObjectId);
      setStatus('应用已成功添加为组所有者');
    } catch (err) {
      console.error('添加失败:', err);
      setStatus('添加失败，请检查组ID、应用对象ID或权限配置');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>M365组ID：</label>
        <input
          type="text"
          value={groupId}
          onChange={(e) => setGroupId(e.target.value)}
          required
        />
      </div>
      <div>
        <label>AAD应用目录对象ID：</label>
        <input
          type="text"
          value={appObjectId}
          onChange={(e) => setAppObjectId(e.target.value)}
          required
        />
      </div>
      <button type="submit">添加应用为组所有者</button>
      {status && <p>{status}</p>}
    </form>
  );
};

export default AddAppOwner;

关键注意事项 #

• 权限验证：必须为你的React应用在AAD中添加Group.ReadWrite.OwnedBy委托权限，并获得管理员同意
• 对象ID区分：务必使用AAD应用的「目录对象ID」，而非客户端ID（Application ID），两者是不同的标识
• 错误处理：实际生产环境中需细化错误分支，比如令牌过期、组不存在、权限不足等场景的提示

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