powerbi嵌入到HTML5,如何把Power BI嵌入到Web应用中

题记：这篇其实不是一个操作向导了，主要对Power BI的嵌入特性进行探讨。

Power BI是微软的创新性(或者称之为敏捷型)BI产品，从发布之初就备受关注，因为它是一个只能以纯SaaS模式提供服务端的BI产品。目前Power BI其实是以两种方式提供服务端：

Power BI Service。只能通过Office 365来购买订阅，一般作为一个独立的BI应用供企业内部使用。

Power BI Embedded。只能通过Azure来购买，按使用量付费，主要满足ISV(独立软件供应商)在自身Web应用中集成BI功能提供给最终用户的需求。

所以要把Power BI嵌入到Web应用程序中，针对不同的提供方式，也有不同的嵌入方式。

通过Power BI Service嵌入

Power BI Service一般通过Azure Active Directory进行验证后(即你的Web应用必须使用AAD做验证)，使用iframe把报表嵌入到应用页面中。比如MS Teams就使用这种方式集成了Power BI。同时还可以利用Power BI REST API来实时更新数据。下图展示了进行集成的整体流程：

注册你的Web应用，可以直接在Azure Portal中注册(建议使用这种方式)，或者使用Power BI应用注册工具注册。以Power BI应用注册工具为例：App Type选择服务端应用，Redirect URL输入类似http://localhost:13526/这样的地址

把得到的Client ID和Client Secret填写到配置文件中，示例代码是项目的Settings.settings

运行Web应用，使用Office365帐号登录，获取报表的嵌入Url，就可以进行报表的嵌入浏览了

通过Power BI Embedded嵌入

考虑到Power BI Service主要用于企业内部，并且没有单独的服务器可供安装，为了解决ISV集成BI报表到自己产品的需求，微软特意在Azure中提供了Azure Power BI Embedded云服务。可以把Azure Power BI Embedded看作是Qlik Sense的OEM模式，只是它是在线的OEM服务。它的优点是：“通过使用Power BI Embedded服务，ISV就无需为了开发与维护可视化功能和BI控件而自行投入研发力量。这些可视化功能可以支持他们使用的全部设备，而ISV也能够充分地利用Power BI服务上不断出现的各种创新功能以及他们的全部价值”。老实说我也基于Qlik Sense构思了类似Power BI Embedded的东西，要解决的就是这样的问题，看来这个Idea还是有市场的。

Power BI Embedded嵌入方式比Power BI Service的简单些，最主要是通过AccessKey代替AAD验证，页面嵌入也是通过iframe来实现。当然访问后台的API是另外一套，名字叫Azure Power BI Embedded REST API，不过有.NET和JS的SDK可供下载。下图给出了一个嵌入步骤的概念模型：

简单说来就是：

一个开发者首先需要申请Azure订阅(可以多个)

在Azure中创建一个或多个Power BI工作区集合，获得名称和AccessKey

通过API来创建一个或多个Power BI工作区(工作区包含了报表、数据集等)，获得工作区ID

通过API获取工作区内的报表等信息，并通过AccessKey来获得EmbedToken

利用iframe(实际微软提供了MVC的一些HtmlHelper和js供大家使用)来显示嵌入的报表

最终用户访问你的Web应用从而浏览报表

Power BI vs Qlik Sense

下面我们来对Power BI和Qlik Sense在嵌入Web应用这个方面进行一个简单比较：

比较点

Power BI

Qlik Sense

iframe方式嵌入

支持

支持

div方式嵌入

不支持

支持

仪表盘嵌入

支持

支持

报表/工作表嵌入

支持

支持

磁贴/可视化对象嵌入

支持

支持

嵌入后客户端操作

支持

支持

开发工具支持

弱

强

本地AD/Windows验证

Embedded支持

支持

Azure AD验证

Service支持

支持(需在QMC中配置)

自定义验证

Embedded支持

支持

总体而言，Qlik Sense的嵌入灵活度和便捷性更高。但是Power BI这种租用服务的方式也有优势。