Forum Discussion

sebastianherrer's avatar
sebastianherrer
Regular Visitor
8 years ago

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_Zhang's avatar
    Eric_Zhang
    Microsoft Employee

    sebastianherrer

    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>  

     

      • Eric_Zhang's avatar
        Eric_Zhang
        Microsoft 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.