Amazon Web Services 文档中描述的 Amazon Web Services 服务或功能可能因区域而异。要查看适用于中国区域的差异，请参阅
中国的 Amazon Web Services 服务入门
(PDF)。
本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。
步骤 3：嵌入控制台会话 URL
在下一节中，您可以了解如何使用 Amazon QuickSight Embedding 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"
}
使用嵌入式 SDK 或将此 URL 添加到 iframe 中，将此控制台会话 QuickSight 嵌入到您的网页中。如果您设置了固定的高度和宽度数字（以像素为单位），则 QuickSight 使用这些数字，并且不会在窗口大小调整时更改视觉效果。如果您设置了相对的百分比高度和宽度，则会 QuickSight 提供响应式布局，该布局会随着窗口大小的变化而进行修改。通过使用 Amazon QuickSight Embedding 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 Embedd QuickSight ing SDK 将嵌入式控制台会话加载到您的网站上 JavaScript。要获取副本，请执行下列操作之一：