First the app needs to be registered with Azure Active Directory (AAD): to do so, go to the Active Directory tab in the Azure Portal, click on the Applications tab, and then the Add button. After filling-in the quick wizard, go to the app Configure tab and add 3 Delegated Permissions to ‘Power BI Service’: View users Groups, View all Reports, and View all Dashboards. Also take a quick look at the page URL: the first GUID is your Tenant ID and the second is your Client ID. Write them down, they will be needed later.
In the JSON file look for the
oauth2AllowImplicitFlow property and set it to
Any IDE and web server can be used to write and run the code. I used Visual Studio 2015 which quickly creates a no-frills website using the ‘File > Open > Web Site’ menu and starts an IIS Express web server when hitting F5. It also comes with Bower pre-installed, which simplifies package management. To get started open a command prompt and run:
|adal-angular||handles AAD auth in AngularJS modules|
|angular||Web App framework|
|angular-route||UI URL routing (required by ADAL Angular)|
|require-css||loads CSS files|
|requirejs-domready||delays running the RequireJS callback until the DOM is ready|
The full code is available in this GitHub repo and a few points of interest are highlighted below.
The code relies on ADAL.JS to retrieve access tokens from AAD and to attach them as HTTP headers (aka Bearer tokens) during REST calls. ADAL.JS needs to be given the Tenant and Client IDs written down earlier. The Power BI REST endpoint also needs to be added and white-listed to enable authenticated CORS REST calls.
The Power BI REST APIs can then be called to get a list of reports, along with their associated embedding URLs:
iframe receives those URLs via AngularJS scopes:
and when the
iframe is done loading the report, the AAD access token is sent to Power BI via an