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

Question

我试图从我们的域中将 Quicksight 仪表板视为嵌入式 url，该域已列入 AWS Quicksight 帐户的白名单。我们的网站作为静态网站托管在 S3 存储桶上。在示例下方，javascript 函数在 AWS Blog.

上给出

下面是示例 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);
            }

完整示例在同一博客的另一个 link 中给出 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 中创建了一个记录/别名。

生成的仪表板-嵌入-url

AWS CLI 命令

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

在dashboard.html"signed URL"

中使用了这个嵌入式/签名Url

上传 dashboard.html 到 s3 存储桶。

网页准备就绪

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

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

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

Unable to use Quicksight dashboard as embeded url on S3/cloudfront whitelisted domain

amazon-quicksight

quicksight-embedding