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

# 为匿名（未注册）用户嵌入 Amazon Quick Sight 控制面板
为匿名用户嵌入控制面板

**重要**  
Amazon Quick Sight 推出了用于嵌入分析的新 API 操作：`GenerateEmbedUrlForAnonymousUser`和`GenerateEmbedUrlForRegisteredUser`。  
您仍然可以使用`GetDashboardEmbedUrl`和 `GetSessionEmbedUrl` API 操作来嵌入仪表板和 Amazon Quick Sight 控制台，但它们不包含最新的嵌入功能。有关使用旧 API 操作进行嵌入的更多信息，请参阅[使用GetDashboardEmbedURL和 GetSessionEmbedURL API 操作嵌入分析](https://docs.amazonaws.cn/quicksight/latest/user/embedded-analytics-deprecated.html)。


|  | 
| --- |
|  适用于：企业版  | 


|  | 
| --- |
|    目标受众：Amazon Quick 开发者  | 

在以下各节中，您可以找到有关如何为匿名（未注册）用户设置嵌入式 Amazon Quick Sight 控制面板的详细信息。

**Topics**
+ [

## 步骤 1：设置权限
](#embedded-analytics-dashboards-with-anonymous-users-step-1)
+ [

## 步骤 2：生成附带身份验证代码的 URL
](#embedded-analytics-dashboards-with-anonymous-users-step-2)
+ [

## 步骤 3：嵌入控制面板 URL
](#embedded-analytics-dashboards-with-anonymous-users-step-3)

## 步骤 1：设置权限
步骤 1：设置权限


|  | 
| --- |
|  适用于：企业版  | 


|  | 
| --- |
|    目标受众：Amazon Quick 开发者  | 

在下节中，您可以了解如何设置后端应用程序或 Web 服务器的权限。该任务需要具有 IAM 的管理访问权限。

每个访问控制面板的用户都扮演一个角色，授予他们 Amazon Quick Sight 访问控制面板的权限和权限。要实现这一点，请在您的中创建一个 IAM 角色 Amazon Web Services 账户。将一个 IAM 策略与该角色相关联，以便为担任该角色的任何用户提供权限。

您可以在 IAM 策略中创建一个条件，限制开发人员可以在 `GenerateEmbedUrlForAnonymousUser` API 操作的 `AllowedDomains` 参数中列出的域。`AllowedDomains` 参数是可选参数。作为开发者，它允许您选择覆盖在 “**管理 Amazon Quick Sight**” 菜单中配置的静态域。您最多可以列出三个可以访问生成的 URL 的域或子域。然后，此 URL 将嵌入您创建的网站。只有参数中列出的域才能访问嵌入式控制面板。如果没有此条件，则可以在 `AllowedDomains` 参数中列出互联网上的任何域。

要限制开发人员可用于此参数的域，请在 IAM 策略中添加一个 `AllowedEmbeddingDomains` 条件。有关该`AllowedDomains`参数的更多信息，请参阅 *Amazon Quick Sight API 参考[GenerateEmbedUrlForAnonymousUser](https://docs.amazonaws.cn//quicksight/latest/APIReference/API_GenerateEmbedUrlForAnonymousUser.html)*中的。

**IAM 条件运算符的安全最佳实践**  
配置不当的 IAM 条件运算符可能会允许未经授权地通过 URL 变体访问您的嵌入式 Quick 资源。在您的 IAM 策略中使用`quicksight:AllowedEmbeddingDomains`条件密钥时，请使用条件运算符，允许特定域名或拒绝所有未特别允许的域。有关 IAM 条件运算符的更多信息，请参阅 [IAM 用户指南中的 IAM JSON 策略元素：条件运算符](https://docs.amazonaws.cn/IAM/latest/UserGuide/reference_policies_elements_condition_operators.html)。  
许多不同的网址变体可以指向同一个资源。例如，以下 URLs 所有内容都解析为相同的内容：  
`https://example.com`
`https://example.com/`
`https://Example.com`
如果您的策略使用不考虑这些 URL 变体的运算符，则攻击者可以通过提供等效的 URL 变体来绕过您的限制。  
您必须验证您的 IAM 策略是否使用了适当的条件运算符来防止绕过漏洞，并确保只有您的目标域才能访问您的嵌入式资源。

以下示例策略提供了可用于 `GenerateEmbedUrlForAnonymousUser` 的这些权限。要让这种方法发挥作用，您的 Amazon Web Services 账户还需要会话包或会话容量定价。否则，当用户尝试访问控制面板时，会返回 `UnsupportedPricingPlanException` 错误。

您应用程序的 IAM 身份必须具有关联的信任策略，才允许访问您刚创建的角色。这意味着，在用户访问您的应用程序时，您的应用程序可以代表用户代入该角色打开控制面板。下面演示了一个示例信任策略。

------
#### [ JSON ]

****  

```
{
"Version":"2012-10-17",		 	 	 
"Statement": [
    {
        "Sid": "AllowLambdaFunctionsToAssumeThisRole",
        "Effect": "Allow",
        "Principal": {
            "Service": "lambda.amazonaws.com"
        },
        "Action": "sts:AssumeRole"
    },
    {
        "Sid": "AllowEC2InstancesToAssumeThisRole",
        "Effect": "Allow",
        "Principal": {
            "Service": "ec2.amazonaws.com"
        },
        "Action": "sts:AssumeRole"
    }
]
}
```

------

有关信任策略的更多信息，请参阅《IAM 用户指南》**中的 [IAM 临时安全凭证](https://docs.amazonaws.cn/IAM/latest/UserGuide/id_credentials_temp.html)。

## 步骤 2：生成附带身份验证代码的 URL
步骤 2：生成 URL


|  | 
| --- |
|  适用于：企业版  | 


|  | 
| --- |
|    目标受众：Amazon Quick 开发者  | 

在下节中，您可以了解如何代表匿名访问者进行身份验证，并获取应用程序服务器上的可嵌入控制面板 URL。

用户访问您的应用程序时，该应用程序代表用户代入 IAM 角色。然后，它会将该用户添加到 Amazon Quick Sight（如果该用户尚不存在）。接下来，其会将标识符作为唯一角色会话 ID 进行传递。

以下示例展示了代表用户执行 IAM 身份验证。将标识符作为唯一角色会话 ID 进行传递。此代码在您的应用程序服务器上运行。

### Java


```
import java.util.List;
    import com.amazonaws.auth.AWSCredentials;
    import com.amazonaws.auth.AWSCredentialsProvider;
    import com.amazonaws.auth.BasicAWSCredentials;
    import com.amazonaws.regions.Regions;
    import com.amazonaws.services.quicksight.AmazonQuickSight;
    import com.amazonaws.services.quicksight.AmazonQuickSightClientBuilder;
    import com.amazonaws.services.quicksight.model.RegisteredUserDashboardEmbeddingConfiguration;
    import com.amazonaws.services.quicksight.model.AnonymousUserEmbeddingExperienceConfiguration;
    import com.amazonaws.services.quicksight.model.GenerateEmbedUrlForAnonymousUserRequest;
    import com.amazonaws.services.quicksight.model.GenerateEmbedUrlForAnonymousUserResult;
    import com.amazonaws.services.quicksight.model.SessionTag;


    /**
    * Class to call QuickSight Amazon SDK to generate embed url for anonymous user.
    */
    public class GenerateEmbedUrlForAnonymousUserExample {

        private final AmazonQuickSight quickSightClient;

        public GenerateEmbedUrlForAnonymousUserExample() {
            quickSightClient = AmazonQuickSightClientBuilder
                .standard()
                .withRegion(Regions.US_EAST_1.getName())
                .withCredentials(new AWSCredentialsProvider() {
                        @Override
                        public AWSCredentials getCredentials() {
                            // provide actual IAM access key and secret key here
                            return new BasicAWSCredentials("access-key", "secret-key");
                        }

                        @Override
                        public void refresh() {
                        }
                    }
                )
                .build();
        }

        public String GenerateEmbedUrlForAnonymousUser(
            final String accountId, // YOUR Amazon ACCOUNT ID
            final String initialDashboardId, // DASHBOARD ID TO WHICH THE CONSTRUCTED URL POINTS.
            final String namespace, // ANONYMOUS EMBEDDING REQUIRES SPECIFYING A VALID NAMESPACE FOR WHICH YOU WANT THE EMBEDDING URL
            final List<String> authorizedResourceArns, // DASHBOARD ARN LIST TO EMBED
            final List<String> allowedDomains, // RUNTIME ALLOWED DOMAINS FOR EMBEDDING
            final List<SessionTag> sessionTags // SESSION TAGS USED FOR ROW-LEVEL SECURITY
        ) throws Exception {
            AnonymousUserEmbeddingExperienceConfiguration experienceConfiguration = new AnonymousUserEmbeddingExperienceConfiguration();
            AnonymousUserDashboardEmbeddingConfiguration dashboardConfiguration = new AnonymousUserDashboardEmbeddingConfiguration();
            dashboardConfiguration.setInitialDashboardId(initialDashboardId);
            experienceConfiguration.setDashboard(dashboardConfiguration);

            GenerateEmbedUrlForAnonymousUserRequest generateEmbedUrlForAnonymousUserRequest = new GenerateEmbedUrlForAnonymousUserRequest()
                .withAwsAccountId(accountId)
                .withNamespace(namespace)
                .withAuthorizedResourceArns(authorizedResourceArns)
                .withExperienceConfiguration(experienceConfiguration)
                .withSessionTags(sessionTags)
                .withSessionLifetimeInMinutes(600L); // OPTIONAL: VALUE CAN BE [15-600]. DEFAULT: 600
                .withAllowedDomains(allowedDomains);

            GenerateEmbedUrlForAnonymousUserResult dashboardEmbedUrl = quickSightClient.generateEmbedUrlForAnonymousUser(generateEmbedUrlForAnonymousUserRequest);

            return dashboardEmbedUrl.getEmbedUrl();
        }

    }
```

### JavaScript


```
global.fetch = require('node-fetch');
const Amazon = require('aws-sdk');

function generateEmbedUrlForAnonymousUser(
accountId, // YOUR Amazon ACCOUNT ID
initialDashboardId, // DASHBOARD ID TO WHICH THE CONSTRUCTED URL POINTS
quicksightNamespace, // VALID NAMESPACE WHERE YOU WANT TO DO NOAUTH EMBEDDING
authorizedResourceArns, // DASHBOARD ARN LIST TO EMBED
allowedDomains, // RUNTIME ALLOWED DOMAINS FOR EMBEDDING
sessionTags, // SESSION TAGS USED FOR ROW-LEVEL SECURITY
generateEmbedUrlForAnonymousUserCallback, // GENERATEEMBEDURLFORANONYMOUSUSER SUCCESS CALLBACK METHOD
errorCallback // GENERATEEMBEDURLFORANONYMOUSUSER ERROR CALLBACK METHOD
) {
const experienceConfiguration = {
    "DashboardVisual": {
        "InitialDashboardVisualId": {
            "DashboardId": "dashboard_id",
            "SheetId": "sheet_id",
            "VisualId": "visual_id"
        }
    }
};

const generateEmbedUrlForAnonymousUserParams = {
    "AwsAccountId": accountId,
    "Namespace": quicksightNamespace,
    "AuthorizedResourceArns": authorizedResourceArns,
    "AllowedDomains": allowedDomains,
    "ExperienceConfiguration": experienceConfiguration,
    "SessionTags": sessionTags,
    "SessionLifetimeInMinutes": 600
};

const quicksightClient = new AWS.QuickSight({
    region: process.env.AWS_REGION,
    credentials: {
        accessKeyId: AccessKeyId,
        secretAccessKey: SecretAccessKey,
        sessionToken: SessionToken,
        expiration: Expiration
    }
});

quicksightClient.generateEmbedUrlForAnonymousUser(generateEmbedUrlForAnonymousUserParams, function(err, data) {
    if (err) {
        console.log(err, err.stack);
        errorCallback(err);
    } else {
        const result = {
            "statusCode": 200,
            "headers": {
                "Access-Control-Allow-Origin": "*", // USE YOUR WEBSITE DOMAIN TO SECURE ACCESS TO THIS API
                "Access-Control-Allow-Headers": "Content-Type"
            },
            "body": JSON.stringify(data),
            "isBase64Encoded": false
        }
        generateEmbedUrlForAnonymousUserCallback(result);
    }
});
}
```

### Python3


```
import json
import boto3
from botocore.exceptions import ClientError
import time

# Create QuickSight and STS clients
quicksightClient = boto3.client('quicksight',region_name='us-west-2')
sts = boto3.client('sts')

# Function to generate embedded URL for anonymous user
# accountId: YOUR AWS ACCOUNT ID
# quicksightNamespace: VALID NAMESPACE WHERE YOU WANT TO DO NOAUTH EMBEDDING
# authorizedResourceArns: DASHBOARD ARN LIST TO EMBED
# allowedDomains: RUNTIME ALLOWED DOMAINS FOR EMBEDDING
# dashboardId: DASHBOARD ID TO WHICH THE CONSTRUCTED URL POINTS
# sessionTags: SESSION TAGS USED FOR ROW-LEVEL SECURITY
def generateEmbedUrlForAnonymousUser(accountId, quicksightNamespace, authorizedResourceArns, allowedDomains, dashboardId, sessionTags):
try:
    response = quicksightClient.generate_embed_url_for_anonymous_user(
        AwsAccountId = accountId,
        Namespace = quicksightNamespace,
        AuthorizedResourceArns = authorizedResourceArns,
        AllowedDomains = allowedDomains,
            ExperienceConfiguration = {
                "Dashboard": {
                    "InitialDashboardId": dashboardId
                }
            },
        SessionTags = sessionTags,
        SessionLifetimeInMinutes = 600
    )
        
    return {
        'statusCode': 200,
        'headers': {"Access-Control-Allow-Origin": "*", "Access-Control-Allow-Headers": "Content-Type"},
        'body': json.dumps(response),
        'isBase64Encoded':  bool('false')
    }
except ClientError as e:
    print(e)
    return "Error generating embeddedURL: " + str(e)
```

### Node.js


以下示例显示了可以在应用服务器上用来生成嵌入式仪表板的 URL 的 JavaScript (Node.js)。您可以在网站或应用程序中使用该 URL 以显示控制面板。

**Example**  

```
const Amazon = require('aws-sdk');
    const https = require('https');

    var quicksightClient = new AWS.Service({
        apiConfig: require('./quicksight-2018-04-01.min.json'),
        region: 'us-east-1',
    });

    quicksightClient.generateEmbedUrlForAnonymousUser({
        'AwsAccountId': '111122223333',
        'Namespace' : 'default',
        'AuthorizedResourceArns': authorizedResourceArns,
        'AllowedDomains': allowedDomains,
        'ExperienceConfiguration': experienceConfiguration,
        'SessionTags': sessionTags,
        'SessionLifetimeInMinutes': 600

    }, function(err, data) {
        console.log('Errors: ');
        console.log(err);
        console.log('Response: ');
        console.log(data);
    });
```

**Example**  

```
//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/embed/12345/dashboards/67890..',
            RequestId: '7bee030e-f191-45c4-97fe-d9faf0e03713' 
        }
```

### .NET/C\$1


以下示例演示了可以在应用程序服务器上使用以生成嵌入式控制面板 URL 的 .NET/C\$1 代码。您可以在网站或应用程序中使用该 URL 以显示控制面板。

**Example**  

```
using System;
    using Amazon.QuickSight;
    using Amazon.QuickSight.Model;

    var quicksightClient = new AmazonQuickSightClient(
        AccessKey,
        SecretAccessKey,
        sessionToken,
        Amazon.RegionEndpoint.USEast1);
        
    try
    {
        Console.WriteLine(
            quicksightClient.GenerateEmbedUrlForAnonymousUserAsync(new GenerateEmbedUrlForAnonymousUserRequest
            {
                AwsAccountId = "111122223333",
                Namespace = default,
                AuthorizedResourceArns = authorizedResourceArns,
                AllowedDomains = allowedDomains,
                ExperienceConfiguration = experienceConfiguration,
                SessionTags = sessionTags,
                SessionLifetimeInMinutes = 600,
            }).Result.EmbedUrl
        );
    } catch (Exception ex) {
        Console.WriteLine(ex.Message);
    }
```

### Amazon CLI


要代入该角色，请选择以下 Amazon Security Token Service (Amazon STS) API 操作之一：
+ [AssumeRole](https://docs.amazonaws.cn/STS/latest/APIReference/API_AssumeRole.html)— 当您使用 IAM 身份代入角色时，请使用此操作。
+ [AssumeRoleWithWebIdentity](https://docs.amazonaws.cn/STS/latest/APIReference/API_AssumeRoleWithWebIdentity.html)— 当您使用 Web 身份提供商对用户进行身份验证时，请使用此操作。
+ [AssumeRoleWithSaml](https://docs.amazonaws.cn/STS/latest/APIReference/API_AssumeRoleWithSAML.html)— 当您使用安全断言标记语言 (SAML) 对用户进行身份验证时，请使用此操作。

以下示例显示了用于设置 IAM 角色的 CLI 命令。该角色需要为 `quicksight:GenerateEmbedUrlForAnonymousUser` 启用权限。

```
aws sts assume-role \
    --role-arn "arn:aws:iam::11112222333:role/QuickSightEmbeddingAnonymousPolicy" \
    --role-session-name anonymous caller
```

`assume-role` 操作返回三个输出参数：访问密钥、私有密钥和会话令牌。

**注意**  
如果在调用 `AssumeRole` 操作时遇到 `ExpiredToken` 错误，可能是因为之前的 `SESSION TOKEN` 仍在环境变量中。通过设置以下变量可以解决这一问题：  
*AWS\$1ACCESS\$1KEY\$1ID* 
*AWS\$1SECRET\$1访问密钥* 
*AWS\$1SESSION\$1代币* 

以下示例说明了如何在 CLI 中设置这三个参数。如果使用的是 Microsoft Windows 计算机，请使用 `set` 而非 `export`。

```
export AWS_ACCESS_KEY_ID     = "access_key_from_assume_role"
    export AWS_SECRET_ACCESS_KEY = "secret_key_from_assume_role"
    export AWS_SESSION_TOKEN     = "session_token_from_assume_role"
```

如果运行这些命令，则会将访问您的网站的用户的角色会话 ID 设置为 `embedding_quicksight_dashboard_role/QuickSightEmbeddingAnonymousPolicy`。角色会话 ID 由 `role-arn` 中的角色名称和 `role-session-name` 值组成。每个用户使用唯一的角色会话 ID 可以确保为每个访问用户设置相应的权限。其还能让每个会话保持独立性和独特性。如果您使用一组 Web 服务器（例如用于负载平衡），并且会话重新连接到其他服务器，则会开始新的会话。

要获取控制面板的签名 URL，请从应用程序服务器中调用 `generate-embed-url-for-anynymous-user`。这会返回可嵌入的控制面板 URL。以下示例演示了如何使用服务器端调用为匿名访问您 Web 门户或应用程序的用户生成嵌入式控制面板的 URL。

```
aws quicksight generate-embed-url-for-anonymous-user \
--aws-account-id 111122223333 \
--namespace default-or-something-else \
--session-lifetime-in-minutes 15 \
--authorized-resource-arns '["dashboard-arn-1","dashboard-arn-2"]' \
--allowed-domains '["domain1","domain2"]' \
--session-tags '["Key": tag-key-1,"Value": tag-value-1,{"Key": tag-key-1,"Value": tag-value-1}]' \
--experience-configuration 'DashboardVisual={InitialDashboardVisualId={DashboardId=dashboard_id,SheetId=sheet_id,VisualId=visual_id}}'
```

有关使用此操作的更多信息，请参阅 [https://docs.amazonaws.cn/quicksight/latest/APIReference/API_GenerateEmbedUrlForAnonymousUser.html](https://docs.amazonaws.cn/quicksight/latest/APIReference/API_GenerateEmbedUrlForAnonymousUser.html)。您可以在自己的代码中使用该 API 操作和其他操作。

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


|  | 
| --- |
|  适用于：企业版  | 


|  | 
| --- |
|    目标受众：Amazon Quick 开发者  | 

在下一节中，您可以了解如何使用 [Amazon Quick Sight Embedging SDK](https://www.npmjs.com/package/amazon-quicksight-embedding-sdk) (JavaScript) 将第 2 步中的控制面板网址嵌入到您的网站或应用程序页面中。通过使用该开发工具包，您可以执行以下操作：
+ 将控制面板放在 HTML 页面上。
+ 将参数传递到控制面板。
+ 使用为应用程序自定义的消息处理错误状态。

调用 `GenerateEmbedUrlForAnynymousUser` API 操作生成可嵌入应用的 URL。该 URL 的有效期为 5 分钟，生成的会话的有效期为 10 个小时。该 API 操作为 URL 提供 `auth_code` 以启用单点登录会话。

下面显示了 `generate-embed-url-for-anynymous-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/embed/12345/dashboards/67890..",
            "RequestId": "7bee030e-f191-45c4-97fe-d9faf0e03713"
        }
```

使用 [Amazon Quick Sight Embedding SDK 或将此 URL 添加到 iframe 中，将此控制面板嵌](https://www.npmjs.com/package/amazon-quicksight-embedding-sdk)入到您的网页中。如果您设置了固定的高度和宽度数字（以像素为单位），Amazon Quick Sight 会使用这些数字，并且不会随着窗口大小调整而改变视觉效果。如果您设置相对的百分比高度和宽度，Amazon Quick Sight 会提供响应式布局，该布局会随着窗口大小的变化而进行修改。通过使用 Amazon Quick Sight Embedding SDK，您还可以控制控制面板中的参数并接收有关页面加载完成和错误的回调。

要托管嵌入式控制面板的域必须位于*允许列表*（为您的 Quick 订阅批准的域的列表）中。这一要求可阻止未经批准的域托管嵌入式控制面板，从而保护您的数据。有关为嵌入式控制面板添加域名的更多信息，请参阅[允许使用 Amazon Quick Sight API 在运行时列出域名](https://docs.amazonaws.cn/quicksight/latest/user/embedding-run-time.html)。

以下示例演示了如何使用生成的 URL。此代码位于您的应用程序服务器上。

### SDK 2.0


```
<!DOCTYPE html>
<html>

<head>
    <title>Dashboard 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 embedDashboard = 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>',
                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 = {
                parameters: [
                    {
                        Name: 'country',
                        Values: [
                            'United States'
                        ],
                    },
                    {
                        Name: 'states',
                        Values: [
                            'California',
                            'Washington'
                        ]
                    }
                ],
                locale: "en-US",
                sheetOptions: {
                    initialSheetId: '<YOUR_SHEETID>',
                    singleSheet: false,                        
                    emitSizeChangedEventOnSheetChange: false,
                },
                toolbarOptions: {
                    export: false,
                    undoRedo: false,
                    reset: false
                },
                attributionOptions: {
                    overlayContent: false,
                },
                onMessage: async (messageEvent, experienceMetadata) => {
                    switch (messageEvent.eventName) {
                        case 'CONTENT_LOADED': {
                            console.log("All visuals are loaded. The title of the document:", messageEvent.message.title);
                            break;
                        }
                        case 'ERROR_OCCURRED': {
                            console.log("Error occurred while rendering the experience. Error code:", messageEvent.message.errorCode);
                            break;
                        }
                        case 'PARAMETERS_CHANGED': {
                            console.log("Parameters changed. Changed parameters:", messageEvent.message.changedParameters);
                            break;
                        }
                        case 'SELECTED_SHEET_CHANGED': {
                            console.log("Selected sheet changed. Selected sheet:", messageEvent.message.selectedSheet);
                            break;
                        }
                        case 'SIZE_CHANGED': {
                            console.log("Size changed. New dimensions:", messageEvent.message);
                            break;
                        }
                        case 'MODAL_OPENED': {
                            window.scrollTo({
                                top: 0 // iframe top position
                            });
                            break;
                        }
                    }
                },
            };
            const embeddedDashboardExperience = await embeddingContext.embedDashboard(frameOptions, contentOptions);

            const selectCountryElement = document.getElementById('country');
            selectCountryElement.addEventListener('change', (event) => {
                embeddedDashboardExperience.setParameters([
                    {
                        Name: 'country',
                        Values: event.target.value
                    }
                ]);
            });
        };
    </script>
</head>

<body onload="embedDashboard()">
    <span>
        <label for="country">Country</label>
        <select id="country" name="country">
            <option value="United States">United States</option>
            <option value="Mexico">Mexico</option>
            <option value="Canada">Canada</option>
        </select>
    </span>
    <div id="experience-container"></div>
</body>

</html>
```

### SDK 1.0


```
<!DOCTYPE html>
<html>

<head>
    <title>Basic Embed</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 dashboard
        function onDashboardLoad(payload) {
            console.log("Do something when the dashboard is fully loaded.");
        }

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

        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,
                parameters: {
                    country: "United States"
                },
                scrolling: "no",
                height: "700px",
                width: "1000px",
                locale: "en-US",
                footerPaddingEnabled: true
            };
            dashboard = QuickSightEmbedding.embedDashboard(options);
            dashboard.on("error", onError);
            dashboard.on("load", onDashboardLoad);
        }

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

<body onload="embedDashboard()">
    <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 Quick Sight Embedding SDK 将嵌入式控制面板加载到您的网站上 JavaScript。要获取副本，请执行下列操作之一：
+ 从 GitHub中下载 [Amazon Quick Sight 嵌入软件开发工具包](https://github.com/awslabs/amazon-quicksight-embedding-sdk#step-3-create-the-quicksight-session-object) 该存储库由一组 Amazon Quick Sight 开发人员维护。
+ 从中下载最新的 Amazon Quick Sight Embedgin [https://www.npmjs.com/package/amazon-quicksight-embedding-sdk](https://www.npmjs.com/package/amazon-quicksight-embedding-sdk)g S
+ 如果您使用`npm` JavaScript 依赖关系，请通过运行以下命令下载并安装它。

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