如何从Azure Active Directory获取用户并在React中生成DisplayName下拉列表

前提条件 #

• 在Azure Active Directory中注册单页应用（SPA），配置重定向URI（例如http://localhost:3000）
• 为应用添加Delegated权限：Directory.Read.All，并由管理员完成权限同意
• 安装依赖包：

  npm install @azure/msal-react @azure/msal-browser @microsoft/microsoft-graph-client
  

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

在项目中创建authConfig.js，初始化MSAL实例：

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

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

export const msalInstance = new PublicClientApplication(msalConfig);

export const loginRequest = {
  scopes: ['Directory.Read.All'], // 对应添加的权限
};

步骤2：获取Azure AD用户并渲染下拉列表 #

创建UserDropdown.js组件，实现用户获取和下拉列表渲染：

import { useMsal, useMsalAuthentication } from '@azure/msal-react';
import { loginRequest } from './authConfig';
import { Client } from '@microsoft/microsoft-graph-client';
import { TokenCredentialAuthenticationProvider } from '@microsoft/microsoft-graph-client/authProviders/azureTokenCredentials';
import { useState, useEffect } from 'react';

export default function UserDropdown() {
  const { instance } = useMsal();
  const { result } = useMsalAuthentication(loginRequest);
  const [users, setUsers] = useState([]);

  useEffect(() => {
    if (!result?.accessToken) return;

    // 初始化Graph客户端
    const authProvider = new TokenCredentialAuthenticationProvider(
      instance.getTokenCredential(loginRequest.scopes),
      { scopes: loginRequest.scopes }
    );
    const graphClient = Client.initWithMiddleware({ authProvider });

    // 调用Graph API获取用户（仅返回displayName和id）
    const fetchUsers = async () => {
      try {
        const userResponse = await graphClient.api('/users')
          .select('displayName,id')
          .get();
        setUsers(userResponse.value);
      } catch (err) {
        console.error('获取用户列表失败:', err);
      }
    };

    fetchUsers();
  }, [result, instance]);

  return (
    <select>
      <option value="">请选择用户</option>
      {users.map(user => (
        <option key={user.id} value={user.id}>
          {user.displayName}
        </option>
      ))}
    </select>
  );
}

步骤3：在应用中注入MSAL Provider #

修改App.js，用MsalProvider包裹整个应用：

import { MsalProvider } from '@azure/msal-react';
import { msalInstance } from './authConfig';
import UserDropdown from './UserDropdown';

function App() {
  return (
    <MsalProvider instance={msalInstance}>
      <div className="App">
        <h1>Azure AD用户选择器</h1>
        <UserDropdown />
      </div>
    </MsalProvider>
  );
}

export default App;

关键注意事项 #

• 分页处理：如果Azure AD中用户超过100个，Graph API会返回分页数据，需要检查响应中的@odata.nextLink并循环调用直到获取全部用户
• 权限问题：确保已完成Directory.Read.All权限的管理员同意，否则普通用户无法获取全量用户列表
• 性能优化：用户量较大时，建议添加搜索过滤或分页加载逻辑，避免一次性加载过多数据

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