我最终使用以下步骤解决了这个问题。
要将 Power BI 报告嵌入前端(角度/JS),您必须生成 2 个不同的令牌(仅适用于应用程序场景)。
- 使用主帐户详细信息/服务主体帐户的访问令牌
(用于连接power BI服务器)
- 嵌入令牌(可以使用访问令牌和 .NET Power BI rest API 生成)。
第 1 步:访问令牌生成
PBIClientId": "xxxxxx-xxx-xxxx-xxxx-xxxxxxxxx",
"PBIClientSecret": "<client secret>",
"PBIApiUrl": "https://api.powerbi.com/",
"ResourceUrl": "https://analysis.windows.net/powerbi/api",
"AuthorityUrl": "https://login.windows.net/common/",
"TenantId": "<TenantId>",
private async Task<string> GeneratePowerBIAccessToken()
{
var tenantSpecificURL = authorityUrl.Replace("common", tenantId);
var authenticationContext = new AuthenticationContext(tenantSpecificURL);
// Authentication using app credentials
var credential = new ClientCredential(clientId, clientSecret);
AuthenticationResult authenticationResult = await authenticationContext.AcquireTokenAsync(resourceUrl, credential);
return authenticationResult.AccessToken;
}
第 2 步:获取 Power BI 报表嵌入 URL
传递您在第 1 步中生成的访问令牌、groupId 和您从 Power BI 门户 url 获得的 reportId。
private async Task<EmbedModel> GetEmbedReportModel(string groupId, string reportId, string accessToken)
{
string restUrl = "https://api.powerbi.com/v1.0/myorg/groups/" + groupId+"/reports";
// add JSON to HttpContent object and configure content type
var method = new HttpMethod("GET");
var request = new HttpRequestMessage(method, restUrl);
using (HttpClient client = new HttpClient())
{
client.DefaultRequestHeaders.Add("Accept", "application/json");
client.DefaultRequestHeaders.Add("Authorization", "Bearer " + accessToken);
// send POST request to Power BI service
var jsonResult = await client.SendAsync(request).Result.Content.ReadAsStringAsync();
var reportObject = JsonConvert.DeserializeObject<ReportObjects>(jsonResult);
var report = reportObject.value.Where(r => r.id == reportId).FirstOrDefault();
return new EmbedModel { Id = report.id, EmbedUrl = report.embedUrl, Name = report.name };
}
}
the response you will get here is
{
"value": [
{
"datasetId": "xxxxxx-abcasdasd-dasda-4weas",
"id": "3asder78-asds-4d73-1232-5345dfsdfs",
"name": "SalesMarketing",
"webUrl": "https://app.powerbi.com/groups/xxx-xxxxx-xxx-xxxxxx-xxxxx/reports/xxxxxx-xxxx-xxx-xxxx-xxxxxxxx",
"embedUrl": "https://app.powerbi.com/reportEmbed?reportId=xxxxxx-xxxx-xxxx-xxxx-xxxxxx&groupId=aadasda21-xxcx-xx-xx-xxxxxx"
}
]
}
第 3 步:调用生成嵌入令牌 API
private async Task<EmbedToken> GenerateEmbedToken(string groupId, string reportId,string accessToken)
{
string apiURL = "https://api.powerbi.com/v1.0/myorg/groups/"+ groupId + "/reports/"+ reportId +"/GenerateToken";
string requestBody = @"{ ""accessLevel"": ""View""}";
HttpContent postRequestBody = new StringContent(requestBody);
postRequestBody.Headers.ContentType = new MediaTypeWithQualityHeaderValue("application/json");
// prepare PATCH request
var method = new HttpMethod("POST");
var request = new HttpRequestMessage(method, apiURL);
request.Content = postRequestBody;
using (HttpClient client = new HttpClient())
{
client.DefaultRequestHeaders.Add("Accept", "application/json");
client.DefaultRequestHeaders.Add("Authorization", "Bearer " + accessToken);
// send POST request to Power BI service
var jsonResult = await client.SendAsync(request).Result.Content.ReadAsStringAsync();
EmbedToken embedToken = JsonConvert.DeserializeObject<EmbedToken>(jsonResult);
return embedToken;
}
}
第 4 步:在前端应用中使用嵌入令牌和嵌入 url
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="powerbi.min.js" type="text/javascript"> </script>
<script type="text/javascript">
window.onload = function () {
var models = window['powerbi-client'].models;
var embedConfiguration = {
type: 'report',
id:'537887ee-7c7c-43c6-850b-9293f60aa3f3',
accessToken: 'H4sIAAAAAAAEAB3Tt66EV.....phVP_a_5F15fA_FCBQAA',
embedUrl: 'https://app.powerbi.com/reportEmbed?reportId=2376660ee-1c2c-16c6-980b-923260aa3f3&groupId=2adeaaa-xxxx-xxxx-xxxx-8d13b04c6e0e&w=2&config=eyJjbHVzdGVyV.....',
permissions: models.Permissions.All,
tokenType: models.TokenType.Embed,
viewMode:models.ViewMode.View,
};
var $reportContainer = $('#dashboardContainer');
var report = powerbi.embed($reportContainer.get(0), embedConfiguration);
}
</script>
<div id="dashboardContainer"></div>
</html>
在运行之前更改所有值。