1

我试图将 Quicksight 仪表板视为来自我们域中的嵌入式 URL，该域已在 AWS Quicksight 帐户中列入白名单。我们的网站作为静态网站托管在 S3 存储桶上。在下面的示例中， AWS 博客上提供了一个 javascript 函数。

下面是示例 javascript 函数。

function embedDashboard() {
                var containerDiv = document.getElementById("dashboardContainer");
                var options = {
                    url: "<signed URL from Step 3>",
                    container: containerDiv,
                    parameters: {
                        country: 'United States'
                    },
                    scrolling: "no",
                    height: "700px",
                    width: "1000px"
                };
                dashboard = QuickSightEmbedding.embedDashboard(options);
                dashboard.on('error', onError);
                dashboard.on('load', onDashboardLoad);
            }

完整示例在同一博客Amazon QuickSight JavaScript SDK的另一个链接上给出

不幸的是，该示例不起作用。

4

1 回答 1

5

下面是一个完整的 html 示例页面 (dashboard.html)，包括 javascript 函数。

<!DOCTYPE html>
    <html>
    <head>
        <title>My Dashboard</title>
        <script type="text/javascript" src="quicksight-embedding-js-sdk.min.js"></script>
        <script type="text/javascript">
            function embedDashboard() {
                var containerDiv = document.getElementById("dashboardContainer");
                var params = {
                    url: "<signed URL>",
                    container: containerDiv,
                    parameters: {
                    },
                    height: "700px",
                    width: "1000px"
                };
                var dashboard = QuickSightEmbedding.embedDashboard(params);
                dashboard.on('error', function(err) {console.log('dashboard error:', err)});
                dashboard.on('load', function() {});
            }
        </script>
    </head>
    <body onload="embedDashboard()">
        <div id="dashboardContainer"></div>
    </body>
    </html>

样本取自同一 AWS 博客并进行了一些更改。

总体步骤总结如下。

下面的行已更改。 在此处输入图像描述 上面的线被下面的线改变了。 下载的 .js 和 lib 文件在此处输入图像描述

一些 .js 和 lib 文件也从下面的地址下载并上传到网站的 dashboard.html 页面。

https://unpkg.com/amazon-quicksight-embedding-sdk@1.0.2/dist/S3/Cloudfront 配置在此处输入图像描述

由于 quicksight 设置上的白名单域是 https url，因此必须使用 Cloudfront 配置 s3 静态网站。

--使用dashboard.mydomain.com.au 创建s3 存储桶

--创建了 Cloudfront Web 发行版，包括来自 ACM 的 SSL。

--在 Route53 中使用 Cloudfront dns 条目创建了一条记录/别名。

生成的dashboard-embed-url

AWS CLI 命令

aws quicksight get-dashboard-embed-url --aws-account-id 00000000000 --dashboard-id "xxxxxxx-xxxxxxx-xxxxxxx-xxxxxxx-xxxxxxx" --identity-type "IAM"

在“签名 URL”中使用了这个嵌入/签名的 Url 在dashboard.html 中

在 s3 存储桶上上传 dashboard.html。

网页已准备就绪

现在可以使用来自白名单域的 quicksight 仪表板的网页。

https://dashboard.mydomain.com.au/dashboard.html
于 2019-02-14T04:15:09.223 回答