Unable to Embed Power BI Report

Question

In Azure portal I have registered an App of type 'Native'. In Java I was able to get the access token using this API call

POST https://login.windows.net/common/oauth2/token

Request Params

1. client_id: appId on azure portal
2. grant_type: "password" this is hardcorded
3. resource: " https://analysis.windows.net/powerbi/api "
4. username: email
5. password: password of the email

This gives me an accessToken and a refreshToken. I can use this accessToken to call any of the Power BI API. Like get all reports, clone reports, create datasets etc.

Now I want to embed a report to my web page and I use this API using jquery

function embedPBIReport(txtAccessToken, embedUrl, embedReportId, mode) {

        // Read embed URL from textbox
        var txtEmbedUrl = embedUrl;

        // Read report Id from textbox
        var txtEmbedReportId = embedReportId;

        // Get models. models contains enums that can be used.
        var models = window['powerbi-client'].models;

        // We give All permissions to demonstrate switching between View and Edit mode and saving report.
        var permissions = mode == 1 ? models.Permissions.Read : models.Permissions.ReadWrite ;
        var viewMode = mode == 1 ? models.ViewMode.View : models.ViewMode.Edit;
        // Embed configuration used to describe the what and how to embed.
        // This object is used when calling powerbi.embed.
        // This also includes settings and options such as filters.
        // You can find more information at https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details.
        var config = {
            type: 'report',
            tokenType: models.TokenType.Embed,
            accessToken: txtAccessToken,
            embedUrl: txtEmbedUrl,
            id: txtEmbedReportId,
            permissions: permissions,
            viewMode: viewMode,
            settings: {
                filterPaneEnabled: false,
                navContentPaneEnabled: true
            }
        };

        // Get a reference to the embedded report HTML element
        var embedContainer = $('#reportContainer');
        // Embed the report and display it within the div container. --> -->
        var report = embedContainer.powerbi(config);
}

When I initiate embed on web page, it creates an Iframe and shows Power BI icon as loader and then throws this error

{"message":"LoadReportFailed","detailedMessage":"Get report failed","errorCode":"403","level":6,"technicalDetails":{"requestId":"f62b4819-7cd0-1c6d-1af0-a89050881a8a"}}

I have googled this issue and people are saying 403 is caused when authentication process is not correct. What am I doing wrong here?

Answer 1

It looks you are trying to embed the report specifying wrong token type. In your code token type is set to Embed :

tokenType: models.TokenType.Embed

While you never mention that such is generated (using GenerateTokenInGroup for example). So you are probably using the token acquired during initial authentication. If you want to use it, you should change token type to be Aad:

tokenType: models.TokenType.Aad

The difference is that Azure AD token gives access to user's data, reports, dashboards and tiles, while embed token is specific to the embedded item. Also the embed token has shorter live (~5 minutes) than AAD token (~1 hour).