Power BI、Angular和ADAL.JS

Question

我正在尝试将Power BI嵌入到Angular应用程序中，我使用的是angular-adal4npm包，它基于adal.js进行身份验证。

身份验证工作正常，应用程序正在检索令牌，但当我尝试使用该令牌嵌入Power BI报告时，我从Power BI服务检索到403错误。

我已经检查了应用程序在Azure中的权利是正确的，我能够使用.NET库和angular应用程序中的令牌代码提取正确的令牌，嵌入正在工作。

我一直在阅读adal.js库，我看到它正在发送一个带有response_type "id_token“的请求，而我在.NET中使用的示例是发送一个response_type”代码“。

经过很多测试之后。我被困在这一点上了。

我不确定是向adal.js发送了错误的配置，还是库无法检索到电源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;
    }
}

​

Answer 1

确保Aad令牌内部具有正确的'aud‘属性，以便它可以与powerbi/api端点通信...

此外，请确保你已在Azure门户中授予权限并在令牌中具有正确的作用域，即，在Azure (或Power BI)中注册你的应用程序时，你已将正确的权限添加到嵌入报告(Reports.Read.All)或仪表板(Dashboard.Read.All)中