Question

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

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

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存储桶

-创建包括来自ACM的SSL在内的Cloudfront Web分发。

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

生成的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"

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

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

网页已准备就绪

现在，该网页可与列入白名单的域的quicksight仪表板一起使用。

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

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

1 个答案: