chandug1991 commented on issue #33698:
URL: https://github.com/apache/superset/issues/33698#issuecomment-2948000139
Below is the frontend code I'm using to embed the Superset dashboard into
the application.
const fetchAccessToken = async () => {
if (sessionStorage.getItem('guesttoken')) return;
try {
const body = {
username: import.meta.env.VITE_APP_SUPERSETUSERNAME,
password: import.meta.env.VITE_APP_SUPERSETPASSWORD,
provider: 'db',
refresh: true,
};
const response = await fetch(
`import.meta.env.VITE_APP_SUPERSETURL}/api/v1/security/login`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(body),
}
);
const jsonResponse = await response.json();
if (jsonResponse?.access_token) {
setToken(jsonResponse.access_token);
} else {
console.error('Access token missing in response', jsonResponse);
}
} catch (error) {
console.error('access_token error', error);
}
};
const fetchGuestToken = async () => {
const embedIds = (window.RUNTIME_CONFIG?.VITE_APP_EMBEDID ||
import.meta.env.VITE_APP_EMBEDID || '')
.trim()
.replace(/^\[|\]$/g, '')
.split(',')
.map((id) => id.trim());
try {
const body = {
resources:
embedIds.length > 0
? embedIds.map((id) => ({
type: 'dashboard',
id,
}))
: [],
user: {
username: window.RUNTIME_CONFIG?.VITE_APP_SUPERSETUSERNAME ||
import.meta.env.VITE_APP_SUPERSETUSERNAME,
first_name: JSON.stringify({
endpoint: window.RUNTIME_CONFIG?.VITE_APP_BACKEND_URL ||
import.meta.env.VITE_APP_BACKEND_URL,
token: localStorage.getItem('logintoken') || '',
}),
},
rls: [],
};
const response = await fetch(
`${window.RUNTIME_CONFIG?.VITE_APP_SUPERSETURL ||
import.meta.env.VITE_APP_SUPERSETURL}/api/v1/security/guest_token/`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${token}`,
},
body: JSON.stringify(body),
}
);
const jsonResponse = await response.json();
if (jsonResponse?.token) {
sessionStorage.setItem('guesttoken', jsonResponse.token);
} else {
console.error('Guest token missing in response', jsonResponse);
}
} catch (error) {
console.error('Guest token fetch error', error);
}
};
and embed code
/**
* @author Axxonet
* @copyright Copyright © 2025 Axxonet. All rights reserved.
*/
import { useEffect, useState } from 'react';
import { EmbedContainer } from './styled';
import { embedDashboard } from '@superset-ui/embedded-sdk';
/**
* EmbedReport Component
*
* This component is responsible for embedding a Superset dashboard into a
React
* application.
*
* Features:
* - **Token Management**: Fetches access tokens and guest tokens needed to
access
* the Superset dashboard securely.
* - **Dynamic Dashboard Embedding**: Dynamically embeds a specified
dashboard
* within an iframe, using the provided `EntityID` to identify the
dashboard.
* - **Error Handling**: Logs errors to the console in case of token
retrieval
* failures.
* - **UI Configuration**: Allows customization of the embedded dashboard's
UI, such
* as hiding the title and chart controls, and setting filter visibility.
*
* Dependencies:
* - `embedDashboard`: A function (assumed to be imported or defined
elsewhere)
* used to embed the dashboard into the specified mount point.
* - `EmbedContainer`: A styled container component for holding the iframe.
*
* Props:
* @param {string} EntityID - The unique identifier for the dashboard to be
embedded.
*
*
* @returns {JSX.Element} JSX for the EmbedReport component, rendering an
* iframe for the embedded Superset dashboard.
*/
const EmbedReport = ({ EntityID }) => {
const [guestToken, setGuestToken] = useState(null);
useEffect(() => {
const token = sessionStorage.getItem('guesttoken');
if (token) {
setGuestToken(token);
}
}, []);
// Step 3: Embed Dashboard only after Guest Token is available and hasn't
been embedded before
useEffect(() => {
if (guestToken) {
embedDashboard({
id: EntityID,
supersetDomain: window.RUNTIME_CONFIG?.VITE_APP_SUPERSETURL ||
import.meta.env.VITE_APP_SUPERSETURL,
mountPoint: document.getElementById('dashboard' + EntityID),
fetchGuestToken: () => guestToken,
dashboardUiConfig: {
hideTitle: true,
hideChartControls: false,
filters: {
expanded: false,
},
},
});
}
}, [guestToken]);
return (
<EmbedContainer id={'dashboard' + EntityID}>
<iframe title={EntityID} />
</EmbedContainer>
);
};
export default EmbedReport;
I'm referencing a published dashboard using its embedded UUID, and I’ve
confirmed that none of the roles (Gamma, View, or Manager) have the
all_datasource_access permission.
View role has permission only for chart1-Dataset1
Manager role has permission only for chart2-Dataset2
Please guide me on this how do we overcome this situation.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
