I am having issue with QuickSight . I am following the documentation how to implement it. I got these policies added:
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": [
"quicksight:GenerateEmbedUrlForAnonymousUser"
],
"Resource": [
"arn:aws:quicksight:eu-west-1:myUserId:namespace/default",
"arn:aws:quicksight:eu-west-1:myUserId:dashboard/{{dashboardId-1}}",
]
]
}
}
And this one too:
{
"Version": "2012-10-17",
"Statement": {
"Effect": "Allow",
"Action": "sts:AssumeRole",
"Resource": "arn:aws:iam::myUserId:role/QuickSightEmbeddingAnonymousPolicy"
}
}
I am generating the embedUrl with nodeJS.
app.get("/", (req, res) => {
const experienceConfiguration = {
"Dashboard": {
"InitialDashboardId": "idOfDashboard"
}
};
quicksight.generateEmbedUrlForAnonymousUser({
'AwsAccountId': 'myUserId',
'Namespace': 'default',
'AuthorizedResourceArns': ["arn:aws:quicksight:eu-west-1:myUserId:dashboard/idOfDashboard"],
'ExperienceConfiguration': experienceConfiguration,
'SessionLifetimeInMinutes': 600
}, function (err, data) {
console.log('Errors: ');
console.log(err);
console.log('Response: ');
console.log(data);
})
This here generates the EmbedUrl
. And when i copy paste it to my browser it will display me the dashboard. But when i apply that long url to my React application it will not display it . I use this code in front-end:
useEffect(() => {
let dashboard
function onDashboardLoad(payload) {
console.log("Do something when the dashboard is fully loaded.", payload);
}
function onError(payload) {
console.log("Do something when the dashboard fails loading", payload);
}
function embedDashboard() {
var containerDiv = document.getElementById("embeddingContainer");
var options = {
url: "HERE_THE_EMBED_URL",
container: containerDiv,
height: "700px",
width: "1000px",
};
dashboard = QuickSightEmbedding.embedDashboard(options);
dashboard.on("error", onError);
dashboard.on("load", onDashboardLoad);
}
embedDashboard()
}, [])
It will give me this error: Message: "csrf token missing or not match."
I also tried to generate this EmbedUrl from the Front-end (and this was my first initial idea to do) but sadly getting only CORS errors . I tried with this code here:
const experienceConfiguration = {
"Dashboard": {
"InitialDashboardId": "myDashboardId"
}
};
const generateEmbedUrlForAnonymousUserParams = {
"AwsAccountId": "myUserId",
"Namespace": "default",
"AuthorizedResourceArns": ["arn:aws:quicksight:eu-west-1:myUserId:dashboard/myDashboardId"],
"ExperienceConfiguration": experienceConfiguration,
// "SessionLifetimeInMinutes": 600
};
const quicksightClient = new QuickSight({
credentials: {
accessKeyId: 'myAccesId',
secretAccessKey: 'mySecretKey'
},
region: "eu-west-1",
});
quicksightClient.generateEmbedUrlForAnonymousUser(generateEmbedUrlForAnonymousUserParams, function (err, data) {
if (err) {
console.log(err, err.stack);
// errorCallback(err);
} else {
const result = {
"statusCode": 200,
"headers": {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Headers": "Content-Type"
},
"body": JSON.stringify(data),
"isBase64Encoded": false
}
}
});
I also saw in some tutorials that there might be needed changes in the admin panel of quicksight https://eu-west-1.quicksight.aws.amazon.com/sn/admin But i cannot acces this page. Perhaps i need more premissions from administrator?
You need to make sure that the domain where you are embedding your QuickSight dashboard is white listed here https://eu-west-1.quicksight.aws.amazon.com/sn/admin#embedding If you do not have permissions to add domains there then you need a QuickSight admin to add the domain there.