Angular无需账密/客户端密钥获取Azure AD访问令牌用于Power BI咨询

核心说明 #

• 你当前获取的访问令牌scope不匹配，是因为登录请求时未指定Power BI API的目标scope，只需修改MSAL请求的scope参数即可解决
• 隐式流可以使用，不过目前Azure AD针对单页应用更推荐带PKCE校验的授权码流，两者均不需要你提供client_secret，也不需要额外的后端服务参与，符合你的参数限制
• 如果你已经完成了AAD登录，无需重复走交互流程，调用MSAL的静默获取token接口即可直接拿到Power BI scope的访问令牌，不需要用户二次操作

Angular 实现示例（基于MSAL v2） #

1. 安装依赖 #

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

2. 应用模块配置（app.module.ts） #

import { MsalModule, MsalRedirectComponent } from '@azure/msal-angular';
import { PublicClientApplication, InteractionType } from '@azure/msal-browser';

@NgModule({
  imports: [
    // 其他业务模块
    MsalModule.forRoot(
      new PublicClientApplication({
        auth: {
          clientId: '你的client_id',
          authority: 'https://login.microsoftonline.com/你的tenant_id',
          redirectUri: '你的redirect_uri',
        },
        cache: {
          cacheLocation: 'localStorage',
          storeAuthStateInCookie: false,
        }
      }),
      {
        interactionType: InteractionType.Redirect,
        authRequest: {
          // 可保留原有业务需要的scope
          scopes: ['api://<你的原有API ID>/user_impersonation', 'openid', 'profile']
        }
      },
      {
        interactionType: InteractionType.Redirect,
        protectedResourceMap: new Map([
          // 配置Power BI API对应的scope映射
          ['https://api.powerbi.com/v1.0/myorg', ['https://analytics.windows.net/powerbi/api/.default']]
        ])
      }
    )
  ],
  bootstrap: [AppComponent, MsalRedirectComponent]
})
export class AppModule { }

3. 静默获取Power BI访问令牌 #

import { MsalService } from '@azure/msal-angular';

@Component({
  // 组件基础配置
})
export class PowerbiComponent {
  constructor(private msalService: MsalService) {}

  async getPowerBiAccessToken(): Promise<string> {
    const result = await this.msalService.acquireTokenSilent({
      scopes: ['https://analytics.windows.net/powerbi/api/.default'],
      account: this.msalService.instance.getAllAccounts()[0]
    });
    return result.accessToken;
  }
}

4. 换取Power BI嵌入令牌 #

拿到上一步的access_token后，调用Power BI接口生成嵌入令牌即可：

async generateEmbedToken(powerBiAccessToken: string, groupId: string, reportId: string) {
  const res = await fetch(`https://api.powerbi.com/v1.0/myorg/groups/${groupId}/reports/${reportId}/GenerateToken`, {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${powerBiAccessToken}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      accessLevel: 'View'
    })
  });
  const data = await res.json();
  return data.token;
}

注意事项 #

• AAD应用注册需将redirect_uri配置为单页应用类型，无需手动开启隐式流，MSAL v2默认使用PKCE授权码流
• Power BI API权限需配置为应用权限（而非委托权限），且已完成管理员同意
• 禁止在前端代码中存储任何client_secret、证书等敏感凭证

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