Angular8下microsoft-adal-angular6生成PowerBI嵌入Token问题

技术栈基础与已完成配置 #

• 项目基于 Angular 8 技术栈开发
• 登录鉴权功能通过 microsoft-adal-angular6 依赖包实现
• Power BI报告嵌入功能通过 ngx-powerbi 依赖包完成
• 已完成的前置准备：
  • 完成Azure应用注册全流程
  • 为应用配置Power BI API权限（参考对应权限配置界面截图）
  • 在Power BI服务端启用服务主体访问权限

现有配置细节 #

ADAL登录初始化参数 #

当前ADAL实例的初始化配置如下：

{
    tenant: 'my tenant id',
    clientId: 'my client id',
    redirectUri: 'http://localhost:4200',
    navigateToLoginRequestUrl: false,
    cacheLocation: 'localStorage',
    postLogoutRedirectUri: 'http://localhost:4200',
    tokenUrl: 'https://graph.microsoft.com',
    resource: 'https://analysis.windows.net/powerbi/api',
    expireOffsetSeconds: 15 * 60
}

Power BI报告嵌入渲染代码 #

页面中Power BI报告的嵌入组件代码如下：

<ngx-powerbi-component
    type="report"
    id="my-report-id"
    embedUrl="https://app.powerbi.com/reportEmbed?reportId=my-report-id&groupId=my-group-id"
    tokenType="Aad"
    [accessToken]="token from ADAL"
  ></ngx-powerbi-component>

实际运行现象 #

• 按照上述配置加载Power BI报告时持续报错（参考对应错误界面截图）
• 对照验证测试结果：通过Postman调用指定接口获取Azure AD Token，将返回的Token手动填入ngx-powerbi组件的accessToken参数后，报告可正常加载查看，对应的Postman调用逻辑如下：

  GET https://login.microsoftonline.com/vca.com/oauth2/token
  grant_type=password&client_id=[my_client_id]&client_secret=[my_client_secret]&resource=https://analysis.windows.net/powerbi/api&username=[username]&password=[password]
  

核心诉求 #

目前无法通过MS ADAL框架生成可正常用于Power BI嵌入场景的有效AD Token，需要对应的落地实现方案。

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