topic Re: Display report using powerbi-client and react (typescript) in Developer

Display report using powerbi-client and react (typescript)

Ameb — Thu, 05 Apr 2018 10:14:38 GMT

Hello.

I have been working on a .NET Core application with React.

Server side works fine (tokens generated work on the powerbi javascript demo)

Tokens from PowerBI Javascript Demo doesnt work on the client side (react component). Neither the tokens generated from my server.

GET https://wabi-north-europe-redirect.analysis.windows.net/metadata/cluster 403 (Forbidden)

I have recreated a small application. Here is the component:

import * as React from 'react';
import * as pbi from 'powerbi-client';

export default class App extends React.Component<{}, {}> {
    private powerbi: pbi.service.Service;
    private embedContainer: HTMLDivElement;
    constructor(props: {}) {
        super(props);
        this.powerbi = new pbi.service.Service(pbi.factories.hpmFactory, pbi.factories.wpmpFactory, pbi.factories.routerFactory);
    }
    public render() {
        return (
                <div className="embedContainer" powerbi-type="report" style={{'height' : '600px', 'width' : '100%'}} ref={(div) => { if (div) {this.embedContainer = div; }}}/>
        );
    }
    componentDidMount() {
        // console.log(this.props);
        let config = {
            'accessToken': '',
            'embedUrl':  '',
            'id': ''
        };
        console.log(config);
        this.powerbi.embed(this.embedContainer, config);
    }
}

Would love to share a repo with the code, but i think is not allowed (my posts are being deleted without reason/ private message)

Re: Display report using powerbi-client and react (typescript)

Ameb — Fri, 06 Apr 2018 07:55:28 GMT

The property tokenType was missing from the config.

Re: Display report using powerbi-client and react (typescript)

amoldhaygude — Wed, 25 Jul 2018 07:22:36 GMT

Hello Ameb,

Do you mind sharing working source code or project files?

Re: Display report using powerbi-client and react (typescript)

Ameb — Thu, 26 Jul 2018 08:24:49 GMT

I am no longer working on this so can't clean the code properly or give you a detailed or simplified working code, but i uploaded what i had. Hope it helps.

https://github.com/Ameb/PBIEmbedded-NetCore-React-Demo

Most of my issues with this were the matching between the config used with the embedding API and the way the tokens were generated (since you can actually use an AD bearer token for embedding).