Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Earn a 50% discount on the DP-600 certification exam by completing the Fabric 30 Days to Learn It challenge.

Reply
Ameb
Helper I
Helper I

Display report using powerbi-client and react (typescript)

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)

 

1 ACCEPTED SOLUTION
Ameb
Helper I
Helper I

The property tokenType was missing from the config.

View solution in original post

3 REPLIES 3
Ameb
Helper I
Helper I

The property tokenType was missing from the config.

Hello Ameb,

 

Do you mind sharing working source code or project files? 

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). 

 

Helpful resources

Announcements
LearnSurvey

Fabric certifications survey

Certification feedback opportunity for the community.

PBI_APRIL_CAROUSEL1

Power BI Monthly Update - April 2024

Check out the April 2024 Power BI update to learn about new features.

April Fabric Community Update

Fabric Community Update - April 2024

Find out what's new and trending in the Fabric Community.