How to embed power bi in a web app

(This article also published in my public number "dotnet development experience Talk", welcome to the right QR code to pay attention to. )

Preface: This is actually not an Operation wizard, it mainly discusses the embedded features of power bi.

Power Bi is Microsoft's innovative (or "agile") bi offering, which has been a concern since its inception as a bi offering that serves only in pure SaaS mode. Power BI is currently providing the service side in two ways:

1. Power BI Service. Subscriptions can only be purchased through Office 365来, and are generally used as a standalone BI app for internal use by the enterprise.
2. Power BI Embedded. It can only be purchased through Azure and paid for usage, primarily to meet the needs of ISVs (independent software vendors) to integrate BI functionality into their Web applications to provide end users.

So to embed power bi in a Web application, there are different ways of embedding it for different ways of providing it.

Embed with Power BI service

After the Power BI service is typically validated through Azure Active directory (that is, your web app must use AAD for validation), use an IFRAME to embed the report in the app page. Ms Teams, for example, integrates power BI in this way. You can also use the Power BI REST API to update data in real time. Shows the overall process for integration:

Microsoft has been very thoughtful about giving an example and documentation to guide you through the integration of Power BI service (no need for me to write it): https://powerbi.microsoft.com/zh-cn/documentation/ powerbi-developer-integrate-report/. The approximate steps are as follows:

1. With Office 365 subscribing to the Power BI service (available for free), with Office 365, you'll naturally have an AAD tenant. Of course, you can also use an existing AAD tenant (which must be an enterprise organization) to sign up for the free Power BI service.
2. Sign up for your web app, which you can register directly in Azure portal (this is recommended), or register with the Power BI App registration tool. Take the Power BI app registration tool for example: app type Select server app, Redirect URL input address like http://localhost:13526/
3. Fill in the configuration file with the resulting client ID and client secret, the sample code is the project's settings.settings
4. Run the Web app, log in with the Office365 account, get the embedded URL of the report, and you can embed the report.

Embed with power BI embedded

Given that the Power BI service is primarily for internal use and there are no separate servers to install, Microsoft has intentionally provided Azure Power BI embedded cloud services in Azure in order to address the needs of ISVs to integrate BI reports into their products. You can think of Azure Power BI embedded as an OEM mode for Qlik sense, except that it is an online OEM service. The advantage of this is that "by using the power BI embedded service, ISVs do not have to invest in their own research and development efforts to develop and maintain visual features and BI controls." These visualizations can support all of the devices they use, and ISVs can take full advantage of the innovative features and their full value that are emerging from the Power bi service. " To be honest, I've also conceived a power BI embedded based on Qlik sense, and that's the problem, and it looks like there's a market for this idea.

Power BI Embedded is embedded more easily than the Power bi service, mostly by accesskey instead of AAD authentication, and page embedding is done through an IFRAME. Of course the API to access the backend is another set, named Azure Power BI Embedded REST API, but there are. NET and JS SDK are available for download. A conceptual model for embedding steps is given:

In short, it is:

1. A developer first needs to request an Azure subscription (can be multiple)
2. Create one or more power Bi workspace collections in Azure, get the name and accesskey
3. Create one or more power BI workspaces from the API (workspaces contain reports, datasets, and so on) to get the workspace ID
4. Get information such as reports in your workspace through the API and get Embedtoken through accesskey
5. Use IFRAME (actual Microsoft provides some of the MVC HtmlHelper and JS for everyone to use) to display the embedded report
6. End-user access to your Web app to browse reports

Specific steps can be seen in the official documentation, has been written well enough and detailed: https://docs.microsoft.com/zh-cn/azure/power-bi-embedded/power-bi-embedded-get-started

Power BI vs Qlik Sense

Let's take a simple comparison of power bi and Qlik sense in embedding a web app:

Compare points	Power BI	Qlik Sense
iframe Mode embedding	Support	Support
div Mode embedding	Not supported	Support
Instrument panel Embedding	Support	Support
Report/Worksheet Embedding	Support	Support
Tile/visual Object embedding	Support	Support
Post-Embed client actions	Support	Support
Development tools Support	Weak	Strong
Local ad/windows validation	Embedded support	Support
Azure AD Authentication	Service Support	Support (need to be configured in QMC)
Custom validation	Embedded support	Support

In general, Qlik Sense's embedding flexibility and ease of access are higher. But the way power bi rents services is also an advantage.

How to embed power bi in a web app