在Angular UI应用中嵌入Power BI

Question

我们已经开发了一个 Power BI 报告，我们有一个要求是将 Power BI 报告嵌入到 Angular 应用程序中。Angular 应用程序使用 OAuth 身份验证。我们已经了解了如何嵌入 Power BI 报告（如链接中所述 - 面向客户的嵌入 https://learn.microsoft.com/en-us/power-bi/developer/embedding#embedding-for-your-customers）。

我们还需要对 Power BI 报告进行精细的授权。是否可以根据登录到 Angular UI 应用程序的用户来过滤数据？

- Silly John

Answer 1

是的，这是可能的，我使用过Ngx-power-bi。请尝试以下内容：

private powerBiService: NgxPowerBiService;
private pbiContainerElement: HTMLElement;

private reportId = "YOUR REPORT ID";
private groupId = "YOUR GROUP ID";
private filterPaneEnabled= false;
private navContentPaneEnabled= true;
    
constructor(private authService: AuthService,private dashboardService:DashboardService) {
this.powerBiService = new NgxPowerBiService();
}

ngOnInit() {

//Get the token from backend, You may use switchMap or flatMap 
//to get the user data (table, column, value etc)

this.dashboardService.getAccessToken().pipe(untilDestroyed(this)).subscribe(token=>{
    const config = {
        type: 'report',
        id: this.reportId,
        embedUrl:
          'https://app.powerbi.com/reportEmbed?' +
          'reportId='+this.reportId +
          '&groupId='+ this.groupId,
        accessToken:token.accessToken,
        settings: {
          filterPaneEnabled: this.filterPaneEnabled,
          navContentPaneEnabled: this.navContentPaneEnabled
        },
        filters:[{
            $schema: "http://powerbi.com/product/schema",
            filterType:1,
            target: {
              table: "Master", // filter table
              column: "companyId" // filter column
            },
            operator: "In",
            values: [101]   // value that you need to filter

          }]
      };
    this.pbiContainerElement = <HTMLElement>(document.getElementById('pbi-container'));
    this.powerBiService.embed(this.pbiContainerElement, config);
})

   
   

- varman

---

你能帮我理解如何访问Azure门户中的PowerBI实例吗？目前，PowerBi实例仅在Azure中创建，我可以在那里获取cliendTD。然后我将在PowerBI中创建仪表板和报告。如何将PowerBI仪表板和报告嵌入我的Angular应用程序中？ - Mr. Learner

我已经阅读了您的评论，内容很容易理解。但是我唯一困惑的是如何通过Azure门户访问我的PowerBI仪表板。如果可能的话，请分享一些代码片段或Stackblitz演示。 - Mr. Learner

@Mr.Learner，这已经是一段时间以前的事情了，而且我也没有接触过。但我会尽力而为。 - varman

非常感谢您的回复。我已经花了更多时间在这上面，尽我最大努力去理解和实现它，但是即使有适当的微软文档，我仍然无法做到。所以请分享您的知识。 - Mr. Learner

Answer 2

你可以通过两种方式实现这一点 - 在嵌入报告时定义筛选器，或使用行级安全性。

在嵌入Power BI元素时，您正在初始化一个配置。此对象的属性之一是在加载报告时要预应用的筛选器。目前支持以下筛选器类型：

export enum FilterType {
  Advanced = 0,
  Basic = 1,
  Unknown = 2,
  IncludeExclude = 3,
  RelativeDate = 4,
  TopN = 5,
  Tuple = 6
}

这些类型对应于筛选器，当在浏览器或Power BI Desktop中显示报告时，您可以应用这些筛选器。有关每种筛选器类型具有哪些属性以及如何使用它的更多信息，请参见文档中的Filters页面。例如，基本筛选器需要定义表格和列，应用筛选器的比较运算符，以及相应的值，例如：

const basicFilter: pbi.models.IBasicFilter = {
  $schema: "http://powerbi.com/product/schema#basic",
  target: {
    table: "Store",
    column: "Count"
  },
  operator: "In",
  values: [1,2,3,4],
  filterType: 1 // pbi.models.FilterType.BasicFilter
}

或者

const basicFilter = {
  $schema: "http://powerbi.com/product/schema#basic",
  target: {
    table: "Store",
    column: "Count"
  },
  operator: "In",
  values: [1,2,3,4],
  filterType: 1 // pbi.models.FilterType.BasicFilter
}

然后在嵌入之前，在配置中设置此过滤器：

var config = {
    type: embedType,
    accessToken: accessToken,
    tokenType: tokenType,
    embedUrl: embedUrl,
    id: embedId,
    dashboardId: dashboardId,
    permissions: permissions,
    settings: {
        filterPaneEnabled: false,
        navContentPaneEnabled: true
    },
    filters: [basicFilter]
};

请注意，这种情况下，您应该隐藏筛选器窗格，通过设置filterPaneEnabled: false，否则用户将在筛选器窗格中看到预先应用的筛选器，并能够更改或删除它！但是，如果隐藏筛选器窗格，则只能使用报告本身提供的滑块和其他选项来分析数据，这将限制用户的选项。因此，使用RLS可能是一个更好的选择，但这需要为工作区购买专用容量（即购买Power BI Premium或Power BI Embedded）。

要使用 RLS，您必须在报告中定义一个或多个角色。为每个角色定义一个 DAX 表达式来过滤数据。然后对于每个用户，您可以决定授予哪些角色，并且报告将仅显示这些角色可访问的数据。然后使用获取的 AAD 令牌，调用 GenerateTokenInGroup REST API，并在请求正文中 传递角色 给您想要的用户。

{
  "accessLevel": "View",
  "identities": [
    {
      "username": "[e-mail]",
      "roles": [
        "sales",
        "marketing"
      ],
      "datasets": [
        "cfafbeb1-8037-4d0c-896e-a46fb27ff229"
      ]
    }
  ]
}

然后使用上述获取的令牌来嵌入报告，不要忘记在需要时将配置中tokenType属性的值从0（AAD）更改为1（嵌入），这样您就可以保留筛选器窗格的可见性，因为安全策略将在引擎下自动应用。

- Andrey Nikolov

Answer 3

这里有一个你可以用作参考的链接 https://www.npmjs.com/package/ngx-powerbi 如果你使用方法类型3来进行基本过滤，Angular可以轻松地传递嵌入式参数。如需更多信息，请查看Power BI官方网站。

<div id="pbi-container"></div>


const config = {
        type: 'report',
        tokenType: models.TokenType.Embed,
        id: reportConfigResponse.EmbedReport.ReportId,
        embedUrl: reportConfigResponse.EmbedReport.EmbedUrl,
        accessToken: reportConfigResponse.EmbedToken.Token,
        settings: {
          filterPaneEnabled: false,
          navContentPaneEnabled: true
        },
        filters: [{
          $schema: "http://powerbi.com/product/schema#basic",
          target: {
            table: "vw_Customers",
            column: "ID"
          },
          operator: "In",
          values: [1],
          filterType: models.FilterType.Basic
        }]
      };

  this.pbiContainerElement = <HTMLElement>(document.getElementById('pbi-container'));
  this.powerBiService.embed(this.pbiContainerElement, config);

- Dhruvil Gondaliya

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community