Hello,
I have setup a react app with msal authentication, and would like to embed a PowerBI report in it using the same msal token.
As specified in the title, it is a "user owns data" scenario, my users will have PowerBI Pro access, and I have a tenant for my organization.
I have set up :
- index.js with the MsalProvider
- App.js:
function App() {
const { instance, accounts } = useMsal();
const [accessToken, setAccessToken] = useState(null);
function RequestProfileData() {
const request = { ...loginRequest, account: accounts[0], };
// Silently acquires an access token
instance
.acquireTokenSilent(request)
.then((response) => { setAccessToken(response.accessToken); })
.catch((e) => {
instance.acquireTokenPopup(request).then((response) => {
setAccessToken(response.accessToken);
});
});
}
useEffect(()=>{
RequestProfileData()
},[])
return (
<PageLayout>
<AuthenticatedTemplate>
<PowerbiReport accessToken={accessToken}/>
</AuthenticatedTemplate>
</PageLayout>
); }
-PowerbiReport.js:
export default function PowerBIReport(props) {
let reportId = "<my report id>";
let embedUrl = "https://app.powerbi.com/reportEmbed?reportId=<my report id>&groupId=<the workspace id>&w=2&config=<config code from app.powerbi>"
return (
<>
<AuthenticatedTemplate>
<PowerBIEmbed
embedConfig={{
type: "report",
id: reportId,
embedUrl,
accessToken: props.accessToken,
tokenType: models.TokenType.Aad,
settings: {
panes: {
filters: {
expanded: false,
visible: false,
},
},
},
}}
eventHandlers={
new Map([
[
"loaded",
function () {
console.log("Report loaded");
},
],
[
"rendered",
function () {
console.log("Report rendered");
},
],
[
"error",
function (event) {
console.log(event.detail);
},
],
])
}
cssClassName={"report-style-class"}
getEmbeddedComponent={(embeddedReport) => {
window.report = embeddedReport;
}}
/>
</AuthenticatedTemplate>
</>
);
}
- the authConfig.js used by the msal library and App.js for "loginRequest":
export const msalConfig = {
auth: {
clientId: "<the app client id>",
authority: "https://login.microsoftonline.com/<my tenant id>",
redirectUri: "http://localhost:3000/",
},
cache: {
cacheLocation: "localStorage", // This configures where your cache will be stored
storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
}
};
// Add scopes here for ID token to be used at Microsoft identity platform endpoints.
export const loginRequest = {
scopes: ["User.Read","https://analysis.windows.net/powerbi/api/Report.Read.All","https://analysis.windows.net/powerbi/api/Dataset.Read.All"]
};
As you can see I use powerbi-client and powerbi-client-react, and it actually works when I manually copy a right accessToken that I got from the powerBi service (as done in this video: https://youtu.be/A5KFY5Jh1Uc?t=464), but not when I use the props.accessToken from my App.js.
Anyone ready to help, please?
