步骤 3：嵌入控制台会话 URL - Amazon QuickSight

步骤 3：嵌入控制台会话 URL

重要

Amazon QuickSight 推出了用于嵌入分析的新 API：GenerateEmbedUrlForAnonymousUser 和 GenerateEmbedUrlForRegisteredUser。

您仍然可以使用 GetDashboardEmbedUrl 和 GetSessionEmbedUrl API 来嵌入控制面板和 QuickSight 控制台，但其不包含最新的嵌入功能。有关最新的嵌入体验，请参阅 将 QuickSight 分析嵌入到您的应用程序中。

在下节中，您可以了解如何使用 Amazon QuickSight Embedding SDK（JavaScript）将步骤 3 中的控制台会话 URL 嵌入网站或应用程序页面。通过使用该开发工具包，您可以执行以下操作：

  • 将控制台会话置于 HTML 页面上。

  • 将参数传入控制台会话。

  • 使用为应用程序自定义的消息处理错误状态。

调用 GetSessionEmbedUrl API 操作获取可嵌入应用程序的 URL。该 URL 的有效期为 5 分钟，生成的会话的有效期为 10 个小时。该 API 操作为 URL 提供 auth_code 以启用单点登录会话。

下面显示了 get-dashboard-embed-url 的示例响应：

//The URL returned is over 900 characters. For this example, we've shortened the string for
//readability and added ellipsis to indicate that it's incomplete.
{
     "Status": "200",
     "EmbedUrl": "https: //dashboards.example.com/embed/620bef10822743fab329fb3751187d2d...",
     "RequestId": "7bee030e-f191-45c4-97fe-d9faf0e03713"
}

通过使用 QuickSight Embedding SDK 或将该 URL 添加到 iframe 中，将该控制台会话嵌入网页。如果设置了固定高度和宽度数字（以像素为单位），QuickSight 将使用这些数字，并且在调整窗口大小时不会更改视觉对象。如果设置了相对百分比高度和宽度，QuickSight 将提供随窗口大小变化而修改的响应式布局。通过使用 Amazon QuickSight Embedding SDK，您还可以控制控制台会话中的参数，并在页面加载完成和出现错误时收到回调。

以下示例演示了如何使用生成的 URL。此代码在您的应用程序服务器上生成。

<!DOCTYPE html>
<html>

<head>
    <title>Basic Embed</title>

    <script src="./quicksight-embedding-js-sdk.min.js"></script>
    <script type="text/javascript">
        var dashboard;

        function embedDashboard() {
            var containerDiv = document.getElementById("embeddingContainer");
            var options = {
                // replace this dummy url with the one generated via embedding API
                url: "https://us-east-1.quicksight.aws.amazon.com/sn/dashboards/dashboardId?isauthcode=true&identityprovider=quicksight&code=authcode",  
                container: containerDiv,
                scrolling: "no",
                height: "700px",
                width: "1000px",
                footerPaddingEnabled: true
            };
            dashboard = QuickSightEmbedding.embedDashboard(options);
        }
    </script>
</head>

<body onload="embedDashboard()">
    <div id="embeddingContainer"></div>
</body>

</html>

要让此示例起作用，请确保使用 Amazon QuickSight Embedding SDK 在网站上用 JavaScript 加载嵌入式控制台会话。要获取副本，请执行下列操作之一：