Power BI、Angular 和 ADAL.JS答案

【问题标题】：Power BI, Angular and ADAL.JSPower BI、Angular 和 ADAL.JS
【发布时间】：2018-03-16 05:11:50
【问题描述】：

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

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

我已经检查了应用程序在 Azure 中的正确性，我能够使用 .NET 库并使用嵌入工作的角度应用程序中的令牌代码提取正确的令牌。

我一直在阅读 adal.js 库，我看到它正在发送一个带有 response_type “id_token”的请求，而我在 .NET 中使用的示例是发送一个 response_type “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;
    }
}

【问题讨论】：

你解决了吗？

标签： angular access-token powerbi powerbi-embedded adal.js

【解决方案1】：

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

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

【讨论】：