步驟 3：內嵌儀表板 URL - Amazon QuickSight

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

步驟 3：內嵌儀表板 URL

重要

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

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

 適用於：企業版 
   目標受眾：Amazon QuickSight 開發者 

在以下部分中，您可以了解如何使用QuickSight 嵌入 SDK (JavaScript) 在您的網站或應用程序頁面中嵌入步驟 2 中的儀表板 URL。您可以使用此開發套件執行以下操作：

  • 將儀表板放在 HTML 頁面。

  • 將參數傳遞到儀表板。

  • 以針對您的應用程式而訂做的訊息來處理錯誤狀態。

呼叫 GetDashboardEmbedUrl 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 提供隨視窗大小變更而修改的自適應版面配置。透過使用 QuickSight 嵌入 SDK，您也可以控制儀表板內的參數，並在頁面載入完成和錯誤方面接收回呼。

下列範例示範如何使用產生的 URL。此代碼駐留在您的應用程式伺服器上。

<!DOCTYPE html>
<html>

<head>
    <title>Basic Embed</title>
    <!-- You can download the latest QuickSight embedding SDK version from https://www.npmjs.com/package/amazon-quicksight-embedding-sdk -->
    <!-- Or you can do "npm install amazon-quicksight-embedding-sdk", if you use npm for javascript dependencies -->
    <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。為獲得您的版本，請執行以下其中一項操作：