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

【问题标题】：Unable to use Quicksight dashboard as embeded url on S3/cloudfront whitelisted domain无法将 Quicksight 仪表板用作 S3/cloudfront 白名单域上的嵌入式 url
【发布时间】：2019-02-15 09:44:32
【问题描述】：

我试图将 Quicksight 仪表板视为我们域中的嵌入式 URL，该域已在 AWS Quicksight 帐户中列入白名单。我们的网站作为静态网站托管在 S3 存储桶上。在下面的示例中，AWS Blog 上给出了一个 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

很遗憾，该示例无法正常工作。

【问题讨论】：

标签： amazon-quicksight quicksight-embedding

【解决方案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。

--在 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”中的 dashboard.html 中使用了此嵌入/已签名 URL

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

网页准备就绪

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

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

【讨论】：