Forum Discussion
This content isn't available powerBi and angular
Hello i am trying to integrate my power bi reports to my angular and .net applications and i am getting "This content isn't available." Error. i follow multiple tutorials but anyone helps me to solve it :(
Backend controller (To get the tokens)
public class ReportController : BaseApiController
{
private static readonly string Username = ConfigurationManager.AppSettings["pbiUsername"];
private static readonly string Password = ConfigurationManager.AppSettings["pbiPassword"];
private static readonly string AuthorityUrl = ConfigurationManager.AppSettings["authorityUrl"];
private static readonly string ResourceUrl = ConfigurationManager.AppSettings["resourceUrl"];
private static readonly string ClientId = ConfigurationManager.AppSettings["clientId"];
private static readonly string ApiUrl = ConfigurationManager.AppSettings["apiUrl"];
private static readonly string GroupId = ConfigurationManager.AppSettings["groupId"];
[HttpGet]
[Route("get")]
public async Task<HttpResponseMessage> EmbedReport(string reportName)
{
var error = GetWebConfigErrors();
if (error != null)
{
return CreateApiResponse(HttpStatusCode.BadRequest, reportName);
}
// Create a user password cradentials.
var credential = new UserPasswordCredential(Username, Password);
// Authenticate using created credentials
var authenticationContext = new AuthenticationContext(AuthorityUrl);
var authenticationResult = await authenticationContext.AcquireTokenAsync(ResourceUrl, ClientId, credential);
if (authenticationResult == null)
{
return CreateApiResponse(HttpStatusCode.BadRequest, reportName);
}
var tokenCredentials = new TokenCredentials(authenticationResult.AccessToken, "Bearer");
// Create a Power BI Client object. It will be used to call Power BI APIs.
using (var client = new PowerBIClient(new Uri(ApiUrl), tokenCredentials))
{
// Get a list of reports.
var reports = await client.Reports.GetReportsInGroupAsync(GroupId);
// Get the first report in the group.
var report = reports.Value.FirstOrDefault();
if (report == null)
{
return CreateApiResponse(HttpStatusCode.BadRequest, report);
}
// Generate Embed Token.
var generateTokenRequestParameters = new GenerateTokenRequest(accessLevel: "view");
var tokenResponse = client.Reports.GenerateTokenInGroup(GroupId, report.Id, generateTokenRequestParameters);
Report myReport = client.Reports.GetReportInGroup(GroupId, report.Id);
if (tokenResponse == null)
{
return CreateApiResponse(HttpStatusCode.BadRequest, report);
}
// Generate Embed Configuration.
var embedConfig = new ReportConfigViewModel()
{
EmbedToken = tokenResponse,
EmbedUrl = report.EmbedUrl,
Id = report.Id
};
return CreateApiResponse(HttpStatusCode.OK, embedConfig);
}
}Angular Js Controller
$scope.service.get("Hola").then(
function onSuccess(response) {
$scope.embedUrl = response.data.embedUrl;
$scope.accessToken = response.data.embedToken.token;
debugger;
},
function onError(response) {
debugger;
}
)html
<powerbi-report embed-url="embedUrl" access-token="accessToken"></powerbi-report>
if anyone can help me i will be greatfull
4 Replies
- Eric_ZhangMicrosoft Employee
What error do you get in the console/network tab in your browser developer mode(F12)? I don't know Angular, I used to test with a static HTML as below. Try to debug your .NET code and test by replacing the { } in below HTML.
<html> <script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/jquery/dist/jquery.js"></script> <script src="powerbi.js"></script> <script type="text/javascript"> window.onload = function () { // Read embed application token from Model var accessToken = "{embed token starts with H4sIA here}"; // Read embed URL from Model var embedUrl = "https://app.powerbi.com/reportEmbed?reportId={report id}&groupId={group id}"; // Read dashboard Id from Model var embedReportId = "{report id}"; // Get models. models contains enums that can be used. var models = window['powerbi-client'].models; // 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: accessToken, embedUrl: embedUrl, id: embedReportId , settings: { filterPaneEnabled: true } }; // Get a reference to the embedded dashboard HTML element var reportContainer = $('#reportContainer')[0] ; // Embed the dashboard and display it within the div container. var reports = powerbi.embed(reportContainer, config); } </script> <div id="reportContainer"></div> </html>- sebastianherrerRegular Visitor
Thanks Eric for the answer, when i try for the first time to know how it works i try with a simple mvc app and i use that code, my issue was when i change mvc to my angular app. i am getting this error in the console app
GET https://wabi-west-us-redirect.analysis.windows.net/metadata/cluster 403 (Forbidden)
but i don't know what that means, why i am not auth to access
- Eric_ZhangMicrosoft Employee
sebastianherrer wrote:
Thanks Eric for the answer, when i try for the first time to know how it works i try with a simple mvc app and i use that code, my issue was when i change mvc to my angular app. i am getting this error in the console app
GET https://wabi-west-us-redirect.analysis.windows.net/metadata/cluster 403 (Forbidden)
but i don't know what that means, why i am not auth to access
What are the request details of the 403 request? You could find the 403 network traffic in the netwokr tab next next to console app.