如何在React应用中动态生成PowerBI访问令牌（AAD令牌）？

直接用Microsoft官方的MSAL React库就能解决静态令牌过期的问题，它会自动处理令牌的获取、刷新，以下是具体实现步骤：

1. 安装依赖 #

先安装MSAL的React和Browser包：

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

2. 配置MSAL实例 #

在项目里新建msalConfig.js，填入你的Azure AD应用信息：

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

// 替换成你自己的Azure AD应用参数
export const msalConfig = {
  auth: {
    clientId: '你的客户端ID',
    authority: 'https://login.microsoftonline.com/你的租户ID',
    redirectUri: 'http://localhost:3000' // 和Azure AD应用里配置的重定向URI一致
  },
  cache: {
    cacheLocation: 'sessionStorage',
    storeAuthStateInCookie: false
  }
};

// PowerBI API的权限范围
export const pbiScopes = ['https://analysis.windows.net/powerbi/api/.default'];

export const msalInstance = new PublicClientApplication(msalConfig);

3. 全局初始化MSAL #

在index.js里用MsalProvider包裹整个应用，让所有组件都能访问MSAL实例：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { MsalProvider } from '@azure/msal-react';
import { msalInstance } from './msalConfig';
import App from './App';

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

4. 在组件中获取并使用令牌 #

在需要调用PowerBI API的组件里，用useMsal钩子获取令牌，示例：

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

const PowerBIReportFetcher = () => {
  const { instance, accounts } = useMsal();

  // 获取访问令牌的函数
  const getAccessToken = async () => {
    try {
      // 优先静默获取令牌（自动刷新过期令牌）
      const response = await instance.acquireTokenSilent({
        account: accounts[0],
        scopes: pbiScopes
      });
      return response.accessToken;
    } catch (err) {
      // 静默失败时弹出登录窗口
      const response = await instance.acquireTokenPopup({
        scopes: pbiScopes
      });
      return response.accessToken;
    }
  };

  // 调用PowerBI REST API的示例
  const fetchReports = async () => {
    const token = await getAccessToken();
    const res = await fetch('https://api.powerbi.com/v1.0/myorg/reports', {
      headers: {
        'Authorization': `Bearer ${token}`
      }
    });
    const reports = await res.json();
    console.log('PowerBI报表列表:', reports);
  };

  return (
    <button onClick={fetchReports}>获取报表列表</button>
  );
};

export default PowerBIReportFetcher;

关键注意点 #

• MSAL会自动处理令牌刷新，当令牌快过期时，acquireTokenSilent会后台请求新令牌，完全无需手动干预。
• 确保你的Azure AD应用已经添加了Power BI Service的相关权限（根据场景选委托权限或应用权限），并且完成了管理员同意（应用权限需要）。
• 如果是纯后端调用PowerBI API，也可以用服务主体获取应用令牌，但React前端一般用交互式的委托权限模式。

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