cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
New Member

How to embed Power BI report/dashboard/tile in private web app NodeJS SDK - COMPLET TUTORIAL NEEDED!

Hi all, June 2017 I was asked to investigate the options of embedding Power BI in our own app that is based on autodesk forge 3D viewer. So its woth saying that I am completely new to Auzure Services Portal and Power BI itself !!!!

 

ALL THE INFORMATION BELLOW IS TO SHOW THAT I REALLY TRIED MANY OPTIONS WITHOUT SUCCESS - I REALLY NEED HELP !.

 

After 3-4 days of readding every bit of information I could find about how to embed powerbi reports/dashboards/tiles and checking a few github repositories I tried to embed a report following the articles and documentation which all pointed that I had to create Workspace Collection and Power BI Embedded service in Azure but in same time (june and july 2017) the Power BI Embedded service WAS NOT available in Azure portal, you could only see and information panel trying to create new power bi embedded service - so after a talk with someone from microsoft - we were told that the Power BI Embedded service will be replaced with Power BI Premium. OK- so we waited for new information.

 

NOW a few days ago on 20-21 July 2017 new articles appeared on Power BI Developer page so I reviewed all pages and after 2 days of trying to embed whatever (dashboard/report/tile) I can not even get the list of reports that are in my Power BI Pro account. 

 

!!!! PLEASE SOMEONE FROM MICROSOFT - MAKE A COMPLETE AND DETAILED TUTORIAL AND WORKING SAMPLES (NOT ONLY IN C#) WITH ALL THE INFORMATION IN ONE PLACE !!!!!

 

I have done the following without any success (on 03-04 August 2017) will resume it becasue I reviewed many more pages

1.  From the article - Embedding with Power BI I choose to embed the following way - Embedding with Power BI users (users own data)

 

2.  Than I go Integrate a report into an app (user owns data) 

 

On this page - the following quote is somewhat confusing 

 

To get started with this walkthrough, you need a Power BI account. If you don't have an account, you can sign up for a free Power BI account, or you can create your own Azure Active Directory tenant for testing purposes.

 

So previously I have created Power BI account opted for the Pro trial version, SO I ONLY created Azure Active Directoy Tentant with two users as explained in the article. 

 

Here there is a sample that is with C# which I dont know so I stared looking for ther SDKs and found that power bi has Node JS SDK but it there is almost no documentation. NodeJS SDK Blog post and NodeJS SDK GITHUB.

 

So I tried using the SDK  following the documentation in git hub BUT I was always getting error, not even able to get the workspace by name - always some strange error and 403 status, also "console.log(result);" always was as undefined

 

 

var powerbi = require('powerbi-api');
var msrest = require('ms-rest');

var config = {
  port: process.env.port || 3000,
  accessKey: "MY-ACCESS-KEY-FROM-AZURE-REGISTERED-APP",
  workspaceCollection: "workspacedemo1",
  workspaceId: "a19f6848-b51e-4577-b133-d28251f4d1fa",
  reportId: "7c988a6c-40b2-4549-b658-395f15f0466d"
};

var credentials = new msrest.TokenCredentials(config.accessKey, "AppKey");
var client = new powerbi.PowerBIClient(credentials);



// Example API call wrapped in Express route not shown here but you get the idea

app.get('/', .........
client.workspaces.getWorkspacesByCollectionName(config.workspaceCollection, function(err, result) {
    // Your code here
    console.log(result);
    console.log(err);

});
});

 

So I thouth there is something wrong in my code and start looking around for another exampe and i found one in GITHUB Azure-Sample - power-bi-node-server-express which is like the previous node js example but it uses express framework.

 

So I supposed that this will be complete working example as it was showin in the Deep dive into the Power BI Embedded SDK video and there is working fine, also I tested the version that is online and is working fine 

 

BUT when I instelled it, changed the values and tried it I GET SOME KIND OF THE SAME ERROR AS WITH THE NODE JS SDK

when I try to go to - /api/reports endpoint.

 

error:  { Error
    at C:\Users\A55V\Documents\NodeJS_start\powerbi-node-server-express\node_modules\powerbi-api\lib\autorest\operations\reports.js:105:19
    at retryCallback (C:\Users\A55V\Documents\NodeJS_start\powerbi-node-server-express\node_modules\ms-rest\lib\filters\systemErrorRetryPolicyF
ilter.js:85:9)
    at retryCallback (C:\Users\A55V\Documents\NodeJS_start\powerbi-node-server-express\node_modules\ms-rest\lib\filters\exponentialRetryPolicyF
ilter.js:135:9)
    at handleRedirect (C:\Users\A55V\Documents\NodeJS_start\powerbi-node-server-express\node_modules\ms-rest\lib\filters\redirectFilter.js:36:9
)
    at Request._callback (C:\Users\A55V\Documents\NodeJS_start\powerbi-node-server-express\node_modules\ms-rest\lib\requestPipeline.js:126:16)
    at Request.self.callback (C:\Users\A55V\Documents\NodeJS_start\powerbi-node-server-express\node_modules\request\request.js:187:22)
    at emitTwo (events.js:106:13)
    at Request.emit (events.js:191:7)
    at Request.<anonymous> (C:\Users\A55V\Documents\NodeJS_start\powerbi-node-server-express\node_modules\request\request.js:1044:10)
    at emitOne (events.js:101:20)
  statusCode: 403,
  request:
   { rawResponse: false,
     queryString: {},
     url: 'https://api.powerbi.com/v1.0/collections/workspacedemo1/workspaces/a19f6848-b51e-4577-b133-d28251f4d1fa/reports',
     method: 'GET',
     headers:
      { 'Content-Type': 'application/json; charset=utf-8',
        'user-agent': 'Node/v6.9.4 (x64-Windows_NT-6.3.9600) ms-rest/1.15.7' },
     body: null },
  response:
   { body: '',
     headers:
      { 'content-length': '0',
        server: 'Microsoft-HTTPAPI/2.0',
        'strict-transport-security': 'max-age=31536000; includeSubDomains',
        'x-frame-options': 'deny',
        'x-content-type-options': 'nosniff',
        requestid: 'f3e6e58a-4d14-4411-8b95-9c89cd6bde08',
        date: 'Fri, 04 Aug 2017 16:13:00 GMT',
        connection: 'close' },
     statusCode: 403 } }

 

SO I AM LOST NOW 

 

I also tried many other things including trying to obtain authorization key and token with Postman like explained in this article

Authorize access to web applications using OAuth 2.0 and Azure Active Directory becasue it THIS article from Power BI Developer  is says I have to follow this flow.

 

So I am able to obtain the Authorization code - BUT NOT WITH POSTMAN, I am doing the GET request directly in Chrome pasting the following URL in the browser

 

https://login.windows.net/common/oauth2/authorize?client_id=3ae04a38-c62e-459b-89ad-894c0df9120f
&response_type=code
&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fbioauth%2Ftoken

And I am redirected to the redirect URL of the APP like this- with the authorization code and session state

 

http://localhost:3000/bioauth/token?code=AQABAAIAAABnfiG-mA6NTae7CdWW7Qfd99HXLYEAXWr-CL03XQnYkoKpe_VApUaZi5v7xaesLfeXOS82VTLsBTBzD0bFeP15rf34okcs0pLQlfnGfMaVW71rBL2MBSxDZ27gyPoGFTpqN1WZlGmzxqamQa-I_54rI1XM8DAD1-sVKyom1aqj8erurs8AMUmaiOctfAyd08hcp6ribw7Ghv9FSeGrZYu90PL_9dkbDiJagmxBEiEDNSHwTz1AKg-dlK6XbrYzxBTg8AmS3YgMLZD71Fal_JiqPwSSpS1qeFw5NQ0N4QqwiE6MFRIUhU_MU4SNfgpCRhIA7mek3G4QbgHJMlkM0_hZVlCPiSi7jru0bFq3seWgssqHadnyyEq-sZY08uqx2jTtqXeGXXjmYXHnWvlYeVKfWzSpOANfuplBHeOApiNpMiUzcoovHeSP0hm1WmA9WfDeghLMvkBiMNhgF9C0HdGfAwp30-finzS6h5rCk9F11rJUU21s5Xc-9xhFL5efZWDmOrTmjCGkEsuGmPdLF9Y9vhOIkw3xVO4r85F-RZJU1yAA&session_state=22b99974-f86a-44b3-b11e-b0a31674bae3

So now in Postman I use the Authorizatio code to obtain the token - NO SUCESSS HERE

 

My API Call is like this (i hide my client secret in the example here)

POST /common/oauth2/token HTTP/1.1
Host: login.windows.net
Content-Type: application/x-www-form-urlencoded
Cache-Control: no-cache
Postman-Token: 82611da1-b18e-edb4-c629-e15e1e2f3ccc

grant_type=authorization_code&client_id=3ae04a38-c62e-459b-89ad-894c0df9120f&code=AQABAAIAAABnfiG-mA6NTae7CdWW7Qfdhte6NJ9yRGY_z6rTuQKVrrMMdfrw3QNoNFH8cnKjKB5tWYEVvoIVCISqR5YtYr7DnX6-iGA1Z2IGz3vB3OHLh0p9GtH16lOHAiT5bGvAy24hg_XrmchZfLxqRxGnb65SvYVSizs2uQFEnqE63veV29vcRb8PwkaUSeyrtAg-C-G3F2RHIanTPPzkcHKjr2u_lM-Cp1XBystoCZDYAppJsXtvrzD53TQaXHLDjXcJ7oCytUJgG7wcuiwslGzNFQe-2xKrYrW0JMl3UwwnDUNjjpogWBtbGbvsJT2tB6i6KbkbxMEqMWiCQA91twPn3Zui6HRRMXxsJNXtLc0y_OHTPsqvHnZhgBON51chpeH1Xcv_pPkXow3F3V-QzorcWhXetL4JF0HYlsra-qqrmZQcoLB6EzkE-saGz8Eh-BFQvWS9_YOPmQunlR5T-F9DoNA5GSMVB84IBiEYDSkVwMILqdzVUPtwXzuxegTjI_cyutqQ6ocZSPxRCAIZfQXOJdw8enYHxUUZeTKZBSTjBR2qeSAA&redirect_uri=http%253A%252F%252Flocalhost%253A3000%252Fbioauth%252Ftoken%0A&client_secret=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

AND I GET THIS ERROR

 

{
    "error": "invalid_request",
    "error_description": "AADSTS90102: 'redirect_uri' value must be a valid absolute Uri.\r\nTrace ID: 0c256ca0-d366-4aea-a6b8-f75c64f12e00\r\nCorrelation ID: 9b9b8d80-8391-4f41-a4eb-f53721d4db9e\r\nTimestamp: 2017-08-04 13:42:31Z",
    "error_codes": [
        90102
    ],
    "timestamp": "2017-08-04 13:42:31Z",
    "trace_id": "0c256ca0-d366-4aea-a6b8-f75c64f12e00",
    "correlation_id": "9b9b8d80-8391-4f41-a4eb-f53721d4db9e"
}

I red the documentation a few times but can not find any solution, becase there is sait that the redirect url must be the same as in the first request and here i get error because of the 

error_description": "AADSTS90102: 'redirect_uri' value must be a valid absolute Uri.\r\nTrace ID: 0c256c ................

 

 

!!!!!!!!!!!!!!!!!!!

 

Please I just need to get the FLOW RIGHT IN A NODE JS EXPRESS APP and embed a report/dashboard/tile in simple app.

 

!!!!!!!!!!!!!!!!!!!!!!

 

 

 

3 REPLIES 3
Frequent Visitor

hi @adjimenez , 

I'd use Power BI with Autodesk Forge. Do you have some news ? I have search some solution on the website. 

Microsoft
Microsoft

@adjimenez

I don't know about NodeJS, however I think I could help you on POWER BI REST API end.

 

As to your error message, I think the problem is about the redirect url decoding, in your case, your url has been encoded two times which is the cause of the error.

redirect url in your case

http%253A%252F%252Flocalhost%253A3000%252Fbioauth%252Ftoken%0A

expected redirect url should be 

http%3A%2F%2Flocalhost%3A3000%2Fbioauth%2Ftoken%0A

When testing in POSTMAN, just paste http://localhost:3000/bioauth/token, POSTMAN would do the encoding work.

 

One tip for you, for testing purpose, to generate a correct encoded url, you could use this site. Just paste http://localhost:3000/bioauth/token and click encode, then you get the correct encoded url.

Have you checked out the JavaScript SDK?

https://github.com/Microsoft/PowerBI-JavaScript

 

They have been publishing alot of new documentation and changes the past few weeks..

 

Also worth noting that the official documentation is here:

https://powerbi.microsoft.com/en-us/documentation/powerbi-developer-what-can-you-do/

Helpful resources

Announcements
secondImage

Happy New Year from Power BI

This is a must watch for a message from Power BI!

December Update

Check it Out!

Click here to read more about the December 2020 Updates!

Community Blog

Check it Out!

Click here to read the latest blog and learn more about contributing to the Power BI blog!

Get Ready for Power BI Dev Camp

Get Ready for Power BI Dev Camp

Mark your calendars and join us for our next Power BI Dev Camp!.