amazon-quicksight - 如何将 quicksight 仪表板嵌入到 React 应用程序中

Question

在此处输入图像描述如何集成亚马逊快速视线以响应应用程序

1.how to import aws-sdk 2.where to get the dashboard ID

Answer 1

无论是来自 aws 还是在 api 中使用 sdk，您都需要为您的快速查看图表获取一个 url。我目前正在从我的 nodejs api 获得一个新的 url。

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-iframe。

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

基本上只需将 url 放在 url 道具中。

希望这可以帮助。