

本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

# 步骤 3：嵌入控制面板 URL
步骤 3：嵌入 URL

**重要**  
Amazon Quick Sight 推出了嵌入分析的新 APIs 功能：`GenerateEmbedUrlForAnonymousUser`和`GenerateEmbedUrlForRegisteredUser`。  
您仍然可以使用`GetDashboardEmbedUrl`和`GetSessionEmbedUrl` APIs 来嵌入仪表板和 Amazon Quick Sight 控制台，但它们不包含最新的嵌入功能。有关最新的 up-to-date嵌入体验，请参阅将 [Amazon Quick Sight 分析嵌入到您的应用程序](https://docs.amazonaws.cn/quicksight/latest/user/embedding-overview.html)中。

在下一节中，您可以了解如何使用 [Amazon Quick Sight 嵌入软件开发工具包](https://www.npmjs.com/package/amazon-quicksight-embedding-sdk) (JavaScript) 将第 3 步中的控制面板网址嵌入到您的网站或应用程序页面中。通过使用该开发工具包，您可以执行以下操作：
+ 将控制面板放在 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"
}
```

使用 [Amazon Quick Sight 嵌入软件开发工具包](https://www.npmjs.com/package/amazon-quicksight-embedding-sdk)或将此 URL 添加到 iframe 中，将此控制面板嵌入到您的网页中。如果您设置了固定的高度和宽度数字（以像素为单位），Amazon Quick Sight 会使用这些数字，并且不会随着窗口大小调整而改变视觉效果。如果您设置相对的百分比高度和宽度，Amazon Quick Sight 会提供响应式布局，该布局会随着窗口大小的变化而进行修改。通过使用 Amazon Quick Sight 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 Quick Sight Embedding SDK 将嵌入式控制面板加载到您的网站上 JavaScript。要获取副本，请执行下列操作之一：
+ 从中下载 [Amazon Quick Sight 嵌入 SDK](https://github.com/awslabs/amazon-quicksight-embedding-sdk#step-3-create-the-quicksight-session-object) GitHub。该存储库由一组 Amazon Quick Sight 开发人员维护。
+ 从下载最新的嵌入式 SDK 版本[https://www.npmjs.com/package/amazon-quicksight-embedding-sdk](https://www.npmjs.com/package/amazon-quicksight-embedding-sdk)。
+ 如果您使用`npm` JavaScript 依赖关系，请通过运行以下命令下载并安装它。

  ```
  npm install amazon-quicksight-embedding-sdk
  ```