Embed Token obtained using Profile causing Angular component to not display report properly.

[matt_b]

I have built a simple angular app to demonstrate Power BI Embedded, using the "embed for your customers" model, and Microsoft's powerbi-client-angular module.

I have a backend project which authenticates against Azure Active Directory using Service Principal credentials to get an access token, and then uses the Microsoft.PowerBI.Api libraries to generate an embed token.  It gives the embedding details (report id, embed url and embed token) to the front-end angular app which uses Microsoft's angular module to embed the report.

It works just fine if I get it to embed a report uploaded into my own Power BI Workspace.

However, if I get it to embed a report which is owned by a Service Principal Profile (we are using the Power BI Embedded multi-tenancy solution approach) I can obtain a token just fine, but the angular module fails to display the report properly.  The embedding iframe renders, and there's a spinning "Loading data ..." graphic and the expected "This is a free trial version, to remove this label a capacity must be purchased" banner at the top, but the report visuals do not appear.

In the browser developer tools I can see that one of the Power BI Rest API calls that the angular compenent is making is failing with a 403 (Forbidden) error ...

Given the 403 error I wonder if there's a problem with the way I'm obtaining the embed token.  The code for that is as follows: 

/*
* Sign into AAD with Service Principal cred to get access token
* Obviously in real product the service principal details wil need to come from
* Key Vault / Tenant Managment rather than app.settings
*/
var app = ConfidentialClientApplicationBuilder.Create(_config["ServicePrincipal:ClientId"])
    .WithClientSecret(_config["ServicePrincipal:ClientSecret"])
    .WithAuthority(new Uri(_config["ServicePrincipal:Authority"]))
    .Build();

var scopes = new string[] { _config["ServicePrincipal:Scope"] };
var authResponse = await app.AcquireTokenForClient(scopes).ExecuteAsync();

/*
* Get Report name, profile id, and workspace id from settings
* Again, in real product these will come from Tenant Management rather than app.settings
*/
var reportName = _config["PowerBI:EmbeddedReportName"];
var workspaceId = new Guid(_config["PowerBI:workspaceId"]);
var profileId = new Guid(_config["PowerBI:profileId"]);
Report powerBIReport = null;

/*
* Create a Power BI Client
*/
var tokenCredentials = new TokenCredentials(authResponse.AccessToken, "Bearer");
//var powerBIClient = new PowerBIClient(new Uri(_config["PowerBI:ApiUrl"]), tokenCredentials);
var powerBIClient = new PowerBIClient(new Uri(_config["PowerBI:ApiUrl"]), tokenCredentials, profileObjectId: profileId);

/*
* Get the reports in Workspace
*/
var reports = powerBIClient.Reports.GetReportsInGroup(workspaceId);

/*
* Find the report matching the name we want to embed
*/
foreach (var report in reports.Value) {
    if (report.Name == reportName)
    {
        powerBIReport = report;
        break;
    }
}

/*
* Get embed token for the report
*/
var tokenRequest = new GenerateTokenRequest(accessLevel: TokenAccessLevel.View, datasetId: powerBIReport.DatasetId.ToString(), allowSaveAs: false);
var embedToken = powerBIClient.Reports.GenerateTokenInGroup(workspaceId, powerBIReport.Id, tokenRequestV1);

/*
* Return the details the Angular component needs to do the embedding
*/
return new ReportConfig
{
    Id = powerBIReport.Id.ToString(),
    EmbedToken = new EmbedToken(embedToken),
    EmbedUrl = powerBIReport.EmbedUrl
};

Has anyone encountered anything like this before?

[Anonymous]

Hi @matt_b ,

403 error stands ：

• Bad access token
• Embed type doesn't match token type

GenerateToken can fail, with effective identity supplied, for a few different reasons.

• Dataset doesn't support effective identity
• Username wasn't provided
• Role wasn't provided
• DatasetId wasn't provided
• User doesn't have the correct permissions

To determine the problem, try the following steps:

• Execute get dataset. Is the property IsEffectiveIdentityRequired true?
• Username is mandatory for any EffectiveIdentity.
• If IsEffectiveIdentityRolesRequired is true, Role is required.
• DatasetId is mandatory for any EffectiveIdentity.
• For Analysis Services, the master user has to be a gateway admin.

Please check if it helps.

Best regards.
Community Support Team_ Caitlyn

[matt_b]

Thanks for getting back to me Caitlyn,

I've executed get_dataset as adviced. I can confirm these values:

    "isEffectiveIdentityRequired":false,
    "isEffectiveIdentityRolesRequired":false,
    "isOnPremGatewayRequired":false

I'm not putting any Effective Identity into the token request, which seems correct given those values:

/*
* Get embed token for the report
*/
var tokenRequest = new GenerateTokenRequest(accessLevel: TokenAccessLevel.View, datasetId: powerBIReport.DatasetId.ToString(), allowSaveAs: false);

var embedToken = powerBIClient.Reports.GenerateTokenInGroup(workspaceId, powerBIReport.Id, tokenRequest);

However, my problem isn't that GenerateTokenInGroup is failing - I'm successfully getting an embed token, it's just that when using that embed token the angular component is failing to correctly render the report.

[matt_b]

The failed report rendering looks like this ...

You can see that the Power BI Filters box on the right has rendered, and that can be shown/hidden using the chevron icon, and there are Filter/Focus Mode icons in the report body matching where they ought to be for the visuals that ought to be in the report.  There should be three visualisations, and as you mouse-over the report, three sets of Filter/Focus Mode icons show and hide for the appropriate part of the report that the mouse pointer is over.

So *something* is being rendered, just not properly.