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

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

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

在下一節中，您可以瞭解如何使用 Amazon QuickSight 嵌入 SDK (JavaScript) 嵌入網站或應用程式頁面中的步驟 3 內嵌主控台工作階段 URL。您可以使用此開發套件執行以下操作：

  • 將主控台工作階段放置在 HTML 頁面上。

  • 將參數傳遞至主控台工作階段。

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

呼叫 GenerateEmbedUrlForRegisteredUser API 操作以產生可嵌入應用程式的 URL。此 URL 的有效期為 5 分鐘，而產生的工作階段有效期最長為 10 小時。此 API 操作提供的 URL 附有可啟用單一登入工作階段的 auth_code。

以下是 generate-embed-url-for-registered-user 的回應範例。

//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://quicksightdomain/embedding/12345/start...",
     "RequestId": "7bee030e-f191-45c4-97fe-d9faf0e03713"
}

使用嵌 QuickSight 入 SDK 或將此 URL 新增至 iframe，將此主控台工作階段嵌入您的網頁中。如果您設置了固定的高度和寬度數字（以像素為單位），請 QuickSight 使用這些數字，並且在窗口調整大小時不會更改視覺效果。如果您設定了相對百分比高度和寬度，則會 QuickSight 提供隨視窗大小變更而修改的自適應版面配置。透過使用 Amazon QuickSight 嵌入 SDK，您也可以在主控台工作階段中控制參數，並接收頁面載入完成和錯誤方面的回呼。

即將託管內嵌式儀表板的域必須列在允許清單中，此為您的 Amazon QuickSight 訂閱已獲核准的域清單。這項要求將使未獲核准的網域無法託管內嵌儀表板，進而保護您的資料。如需為內嵌主控台新增域的詳細資訊，請參閱 允許在執行階段列出網域 QuickSight API。

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

SDK 2.0
<!DOCTYPE html>
<html>

    <head>
        <title>Console Embedding Example</title>
        <script src="https://unpkg.com/amazon-quicksight-embedding-sdk@2.0.0/dist/quicksight-embedding-js-sdk.min.js"></script>
        <script type="text/javascript">
            const embedSession = async() => {    
                const {
                    createEmbeddingContext,
                } = QuickSightEmbedding;

                const embeddingContext = await createEmbeddingContext({
                    onChange: (changeEvent, metadata) => {
                        console.log('Context received a change', changeEvent, metadata);
                    },
                });

                const frameOptions = {
                    url: "<YOUR_EMBED_URL>", // replace this value with the url generated via embedding API
                    container: '#experience-container',
                    height: "700px",
                    width: "1000px",
                    onChange: (changeEvent, metadata) => {
                        switch (changeEvent.eventName) {
                            case 'FRAME_MOUNTED': {
                                console.log("Do something when the experience frame is mounted.");
                                break;
                            }
                            case 'FRAME_LOADED': {
                                console.log("Do something when the experience frame is loaded.");
                                break;
                            }
                        }
                    },
                };

                const contentOptions = {
                    onMessage: async (messageEvent, experienceMetadata) => {
                        switch (messageEvent.eventName) {
                            case 'ERROR_OCCURRED': {
                                console.log("Do something when the embedded experience fails loading.");
                                break;
                            }
                        }
                    }
                };
                const embeddedConsoleExperience = await embeddingContext.embedConsole(frameOptions, contentOptions);
            };
        </script>
    </head>

    <body onload="embedSession()">
        <div id="experience-container"></div>
    </body>

</html>
SDK 1.0
<!DOCTYPE html>
<html>

    <head>
        <title>QuickSight Console Embedding</title>
        <script src="https://unpkg.com/amazon-quicksight-embedding-sdk@1.0.15/dist/quicksight-embedding-js-sdk.min.js"></script>
        <script type="text/javascript">
            var session

            function onError(payload) {
                console.log("Do something when the session fails loading");
            }

            function embedSession() {
                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", // replace this dummy url with the one generated via embedding API
                    container: containerDiv,
                    parameters: {
                        country: "United States"
                    },
                    scrolling: "no",
                    height: "700px",
                    width: "1000px",
                    locale: "en-US",
                    footerPaddingEnabled: true,
                    defaultEmbeddingVisualType: "TABLE", // this option only applies to QuickSight console embedding and is not used for dashboard embedding
                };
                session = QuickSightEmbedding.embedSession(options);
                session.on("error", onError);
            }

            function onCountryChange(obj) {
                session.setParameters({country: obj.value});
            }
        </script>
    </head>

    <body onload="embedSession()">
        <span>
            <label for="country">Country</label>
            <select id="country" name="country" onchange="onCountryChange(this)">
                <option value="United States">United States</option>
                <option value="Mexico">Mexico</option>
                <option value="Canada">Canada</option>
            </select>
        </span>
        <div id="embeddingContainer"></div>
    </body>

</html>

若要使用此範例，請務必使用 Amazon QuickSight 嵌入開發套件，在您的網站上使用載入內嵌主控台工作階段 JavaScript。為獲得您的版本，請執行以下其中一項操作：