如何将Quicksight仪表板嵌入React应用程序

时间:2019-09-25 15:44:01

标签: amazon-quicksight quicksight-embedding

enter image description here如何将Amazon快速瞄准镜集成到应用程序中来

1。如何导入AWS-SDK 2.从何处获取仪表板ID

1 个答案:

答案 0 :(得分:1)

无论您是从AWS还是在api中使用sdk,您都需要获取速查图的URL。我目前正在从nodejs api获取新的网址。

const AWS = require("aws-sdk");

exports.url_aws = (req, res) => {

let awsCredentials = {
    region: "us-east-1",
    accessKeyId: process.env.KEY_ID,
    secretAccessKey: process.env.ACCESS_KEY
  };

AWS.config.update(awsCredentials);

let params = {
    RoleArn: "<the arn role and iam id>",
    RoleSessionName: "embeddingsession",
};

let sts = new AWS.STS({
    apiVersion: "2011-06-15"
});

sts.assumeRole(paras, (err, data) => {

    if (err) {
      console.log(err); // account for error;
      res.end();
    }

    AWS.config.update({
      accessKeyId: data.Credentials.AccessKeyId,
      secretAccessKey: data.Credentials.SecretAccessKey,
      sessionToken: data.Credentials.SessionToken
    });

    AWS.config.update({
        region: "<your region>"
    });

    let quicksight = new AWS.QuickSight({
        apiVersion: '2018-04-01',
        region: '<Your region>'
    });

    let getdashboardparams = {
        AwsAccountId: "<Your account Id",
        DashboardId: "<Dashboard Id you want to display",
        IdentityType: "QUICKSIGHT",
        ResetDisable: false, // or true, what ever you prefer
        SessionLifeTimeInMinutes: "<writes the minutes inside the quotes",
        UndoRedoDisabled: false, // or true...
        UserArn: "<the user arn>"
    };

    quicksight.getDashboardEmbedUrl(getdashboardparams, (err, data) => {
        if (err) console.log("Quicksight GetDashboard Error",err, err.stack); 
        else console.log(data);

        res.json(data);

        console.log("\nEND \n")
        res.end();
        return;
    });

});

};

这就是我在后端设置它的方式,在React的前端,我使用react-iframe。

https://www.npmjs.com/package/react-iframe

并且基本上只是将url放在url属性中。

希望这会有所帮助。