步驟 3：嵌入主控台工作階段 URL - Amazon QuickSight

本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

步驟 3：嵌入主控台工作階段 URL

重要

Amazon QuickSight 有用於嵌入分析的新 API：GenerateEmbedUrlForAnonymousUser和GenerateEmbedUrlForRegisteredUser.

您仍然可以使用GetDashboardEmbedUrl和 GetSessionEmbedUrl API 嵌入儀表板和 QuickSight 控制台，但它們不包含最新的嵌入功能。如需最新的 up-to-date 嵌入體驗，請參閱嵌入概觀。

在下一節中，您可以瞭解如何使用 Amazon QuickSight 嵌入 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 入 SDK 或將此 URL 新增至 iframe，將此主控台工作階段嵌入您的網頁中。若您設定固定的高度和寬度數字 (像素)， QuickSight 會使用這些值，而不會隨著您調整視窗大小而改變視覺效果。如果您設定了相對百分比高度和寬度，則會 QuickSight 提供隨視窗大小變更而修改的自適應版面配置。透過使用 Amazon QuickSight 嵌入 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 嵌入開發套件，在您的網站上使用載入內嵌主控台工作階段 JavaScript。為獲得您的版本，請執行以下其中一項操作：