Hi, @BigDinosaur
To prevent a Power BI report in an iframe from automatically returning to the login page after a period of inactivity, you need to ensure that the session is kept active. This typically involves periodically refreshing the authentication token or the iframe itself to keep the session active.
You can set up a JavaScript timer to refresh the iframe periodically before the session expires. This method will reload the entire iframe, which may not be ideal if the report is interactive, but it is a simple solution.
<!DOCTYPE html>
<html>
<head>
<title>Power BI Report</title>
<script type="text/javascript">
function refreshIframe() {
var iframe = document.getElementById("powerBIReport");
iframe.src=iframe.src;
}
// Set the interval to refresh the iframe every hour (3600000 ms)
setInterval(refreshIframe, 3600000);
</script>
</head>
<body>
<iframe id="powerBIReport" width="800" height="600" src="YOUR_POWER_BI_EMBED_URL"></iframe>
</body>
</html>
If you are using the Power BI JavaScript API, you can refresh the authentication token periodically. This approach is more seamless because it keeps the session active without reloading the iframe. Here is an example using the Power BI JavaScript API:
Initial Token Acquisition: Get the initial embed token.
Token Refresh Mechanism: Set up a mechanism to refresh the token periodically.
Here is a basic example using the Power BI JavaScript SDK:
<!DOCTYPE html>
<html>
<head>
<title>Power BI Report</title>
<script src="https://cdn.jsdelivr.net/npm/powerbi-client@2.12.0/dist/powerbi.js"></script>
<script type="text/javascript">
var embedUrl = "YOUR_POWER_BI_EMBED_URL";
var initialToken = "YOUR_INITIAL_EMBED_TOKEN"; // Fetch your initial token from the server
var embedConfig = {
type: 'report',
tokenType: models.TokenType.Embed,
accessToken: initialToken,
embedUrl: embedUrl,
id: 'YOUR_REPORT_ID'
};
function embedPowerBIReport() {
var reportContainer = document.getElementById('reportContainer');
var report = powerbi.embed(reportContainer, embedConfig);
// Set up a mechanism to refresh the token
setInterval(function() {
// Fetch a new token from your server
fetch('YOUR_TOKEN_REFRESH_ENDPOINT')
.then(response => response.json())
.then(data => {
var newToken = data.newToken;
report.setAccessToken(newToken);
});
}, 3500000); // Refresh token every ~58 minutes (before the 1-hour expiration)
}
window.onload = embedPowerBIReport;
</script>
</head>
<body>
<div id="reportContainer" style="width: 800px; height: 600px;"></div>
</body>
</html>
Your backend service should handle authentication with Azure AD and generate new tokens upon request
Backend Service (Node.js)
const express = require('express');
const axios = require('axios');
const app = express();
const port = 3000;
// Endpoint to refresh the token
app.get('/refresh-token', async (req, res) => {
try {
const tokenResponse = await axios.post('https://login.microsoftonline.com/YOUR_TENANT_ID/oauth2/v2.0/token', {
grant_type: 'client_credentials',
client_id: 'YOUR_CLIENT_ID',
client_secret: 'YOUR_CLIENT_SECRET',
scope: 'https://analysis.windows.net/powerbi/api/.default'
});
const newToken = tokenResponse.data.access_token;
// Generate the embed token with the new access token
const embedTokenResponse = await axios.post('https://api.powerbi.com/v1.0/myorg/reports/YOUR_REPORT_ID/GenerateToken', {
accessLevel: 'View'
}, {
headers: {
'Authorization': `Bearer ${newToken}`
}
});
res.json({ newToken: embedTokenResponse.data.token });
} catch (error) {
res.status(500).send(error.toString());
}
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});
This backend service should be secure and properly authenticated, and your frontend will call it periodically to get new tokens.
hackcrr
If this post helps, then please consider Accept it as the solution and kudos to this post to help the other members find it more quickly
