React单页应用集成Azure DevOps：实现用户登录与工作项获取

1. 在Azure AD中注册SPA应用 #

• 登录Azure门户，进入Azure Active Directory，注册单页应用程序类型的新应用
• 在「API权限」中添加Azure DevOps的用户权限：搜索「Azure DevOps」，按需选择WorkItem.Read、WorkItem.ReadWrite等权限，随后由企业管理员完成「授予管理员同意」操作
• 记录应用的客户端ID和租户ID，后续React应用配置会用到

2. 用MSAL.js处理身份验证流程 #

使用官方的MSAL.js库实现SPA的OAuth2.0 PKCE授权流，这是针对单页应用的安全登录方案，无需存储客户端密钥。

安装依赖 #

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

初始化MSAL实例 #

在React入口文件（如index.js）中配置MSAL：

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

const msalConfig = {
  auth: {
    clientId: '你的客户端ID',
    authority: 'https://login.microsoftonline.com/你的租户ID',
    redirectUri: 'http://localhost:3000' // 需与Azure AD注册的重定向URI完全一致
  }
};

const msalInstance = new PublicClientApplication(msalConfig);

ReactDOM.render(
  <MsalProvider instance={msalInstance}>
    <App />
  </MsalProvider>,
  document.getElementById('root')
);

添加登录组件 #

创建触发登录的按钮组件：

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

const LoginButton = () => {
  const { instance } = useMsal();

  const handleLogin = () => {
    instance.loginPopup({
      scopes: ['https://dev.azure.com/你的组织ID/.default'] // scope格式需匹配Azure DevOps权限范围
    });
  };

  return <button onClick={handleLogin}>用ADO账号登录</button>;
};

export default LoginButton;

3. 获取访问令牌并调用ADO工作项API #

登录成功后，通过MSAL获取访问令牌，再以此调用Azure DevOps REST API。

获取访问令牌 #

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

const getAccessToken = async () => {
  const { instance, accounts } = useMsal();
  const activeAccount = accounts[0];

  if (!activeAccount) {
    throw new Error('用户未登录');
  }

  const response = await instance.acquireTokenSilent({
    account: activeAccount,
    scopes: ['https://dev.azure.com/你的组织ID/.default']
  });

  return response.accessToken;
};

调用工作项API示例 #

以获取单个工作项为例：

const fetchWorkItem = async (workItemId) => {
  const token = await getAccessToken();
  const orgName = '你的组织名称';
  const projectName = '你的项目名称';

  const response = await fetch(
    `https://dev.azure.com/${orgName}/${projectName}/_apis/wit/workitems/${workItemId}?api-version=7.1-preview.3`,
    {
      headers: {
        'Authorization': `Bearer ${token}`
      }
    }
  );

  if (!response.ok) {
    throw new Error('获取工作项失败');
  }

  return response.json();
};

4. 关键注意事项 #

• 权限匹配：Azure AD应用注册的权限必须与React中请求的scope对应，否则令牌会因权限不足无法调用API
• 重定向URI一致性：开发/生产环境的SPA地址需提前在Azure AD中注册为合法重定向URI
• 自动令牌刷新：MSAL会自动处理令牌过期刷新，无需手动维护，解决了PAT的有效期问题
• 多用户权限隔离：每个用户登录后获取专属访问令牌，调用API时会以该用户的ADO权限访问工作项，天然支持多用户场景

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