Power BI、Angular 和 ADAL.JS

Question

我正在尝试在Angular应用程序中嵌入Power BI，我正在使用基于adal.js的angular-adal4 npm包进行身份验证。身份验证正常工作，并且应用程序正在检索令牌，但是当我尝试使用该令牌嵌入Power BI报告时，我从Power BI服务中检索到403错误。我已经检查了应用程序在Azure中的权限是否正确，我能够使用.NET库提取正确的令牌，并在angular应用程序中使用令牌代码嵌入成功。我一直在阅读adal.js库，发现它发送的请求响应类型为"id_token"，而我使用.NET的示例发送响应类型为"code"。经过大量测试，我被卡在这个点上。我不确定我是否向adal.js发送了不正确的配置，或者该库是否无法为Power BI检索正确的令牌。是否有人能帮助我解决这个问题？非常感谢任何建议/最佳实践分享。链接AAD Configuration。配置信息如下：adalConfig: { instance: "https://login.microsoftonline.com/", tenant: 'xx.com', clientId: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', loginResource: "https://analysis.windows.net/powerbi/api", postLogoutRedirectUri: 'http://localhost:4200/logout', },

import { Injectable } from '@angular/core';
import { Component, OnInit, Inject, ViewChild, ElementRef, EventEmitter, Output } from '@angular/core';
import { service as PBIService, IEmbedConfiguration, Embed, models } from 'powerbi-client';
import { Adal4Service } from 'adal-angular4';

@Injectable()
export class EmbedingReports {
    component: Embed;
    @Output() embedded: EventEmitter<number> = new EventEmitter<number>();

    constructor (private adalService: Adal4Service, @Inject('PowerBIService') public powerBIService: PBIService.Service) {}

    public embedReport(groupId:string, reportId:string, powerbiFrame: ElementRef) {
        var tokenType  = models.TokenType.Aad;
        var embedUrl  = `https://app.powerbi.com/reportEmbed?reportId=${reportId}&groupId=${groupId}`;
       
        var accessToken = this.adalService.userInfo.token;
        var id = reportId;
        var type = 'report';
        let config: IEmbedConfiguration = {
            accessToken,
            tokenType,
            embedUrl,
            type,
            id
        }
      
        if (this.validateOptions(accessToken, embedUrl)) {
            this.embed(powerbiFrame.nativeElement, config);
        }
    }

    public embedDashboard(htmlElement, groupId:string, dashboardId:string, powerbiFrame: ElementRef){
        var tokenType  = models.TokenType.Aad;
        var embedUrl  = `https://app.powerbi.com/dashboardEmbed?dashboardId=${dashboardId}&groupId=${groupId}`;
        var accessToken = this.token;
        var id = dashboardId;
        var type = "dashboard";
        let config: IEmbedConfiguration = {
            accessToken,
            tokenType,
            embedUrl,
            type,
            id
        }
      
        if (this.validateOptions(accessToken, embedUrl)) {
        this.embed(powerbiFrame.nativeElement, config);
        }
    }


    private embed(element: HTMLElement, config: IEmbedConfiguration) {
        this.component = this.powerBIService.embed(element, config);
        this.embedded.emit((this.component as any));
      }
    
    
    private validateOptions(accessToken: string, embedUrl: string): boolean {
        if (!(typeof embedUrl === 'string' && embedUrl.length > 0)
            || !(typeof accessToken === 'string' && accessToken.length > 0)
        ) {
            return false;
        }
        return true;
    }
}

- Javier Rodriguez

---

你解决了吗？ - Unnie

Answer 1

请确保Aad令牌中具有正确的"aud"属性，以便可以与powerbi/api端点通信...

另外，请确保您已在Azure门户中授予权限，并在令牌中具有正确的范围，即当您在Azure（或Power BI）注册应用程序时，已添加了正确的嵌入式报告权限（Reports.Read.All）或仪表板权限（Dashboard.Read.All）。

- RBreuer