无法将 Quicksight 仪表板用作 S3/cloudfront 白名单域上的嵌入 URL

Question

我试图将 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 的另一个链接上给出

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

Answer 1

下面是一个完整的 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。

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

生成的仪表板嵌入网址

AWS CLI 命令

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

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

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

网页已准备就绪

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

https://dashboard.mydomain.com.au/dashboard.html