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

# 为注册用户嵌入 Amazon Quick Sight Q 搜索栏
<a name="embedded-analytics-q-search-bar-for-authenticated-users"></a>


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


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

**注意**  
嵌入式的 Amazon Quick Sight Q 搜索栏提供经典的 Amazon Quick Sight 问答体验。Amazon Quick Sight 与 Amazon Q Business 集成，推出全新的生成问答体验。建议开发人员使用全新的生成式问答体验。有关嵌入式生成问答体验的更多信息，请参阅在 [Amazon Quick Sight 生成问答体验中嵌入 Amazon Q](https://docs.aws.amazon.com/quicksight/latest/user/embedding-gen-bi.html)。

在以下各节中，您可以找到有关如何为 Amazon Quick Sight 的注册用户设置嵌入式 Amazon Quick Sight Q 搜索栏的详细信息。

**Topics**
+ [

## 步骤 1：设置权限
](#embedded-q-bar-for-authenticated-users-step-1)
+ [

## 步骤 2：生成附带身份验证代码的 URL
](#embedded-q-bar-for-authenticated-users-step-2)
+ [

## 步骤 3：嵌入 Q 搜索栏 URL
](#embedded-q-bar-for-authenticated-users-step-3)
+ [

## 可选的 Amazon Quick Sight Q 搜索栏嵌入功能
](#embedded-q-bar-for-authenticated-users-step-4)

## 步骤 1：设置权限
<a name="embedded-q-bar-for-authenticated-users-step-1"></a>

**注意**  
嵌入式的 Amazon Quick Sight Q 搜索栏提供经典的 Amazon Quick Sight 问答体验。Amazon Quick Sight 与 Amazon Q Business 集成，推出全新的生成问答体验。建议开发人员使用全新的生成式问答体验。有关嵌入式生成问答体验的更多信息，请参阅在 [Amazon Quick Sight 生成问答体验中嵌入 Amazon Q](https://docs.aws.amazon.com/quicksight/latest/user/embedding-gen-bi.html)。

在以下部分中，您可以了解如何设置后端应用程序或 Web 服务器的权限来嵌入 Q 搜索栏。此任务需要对 AWS Identity and Access Management (IAM) 的管理权限。

每个访问控制面板的用户都扮演一个角色，授予他们 Amazon Quick Sight 访问控制面板的权限和权限。要实现这一点，请在您的中创建一个 IAM 角色 AWS 账户。将一个 IAM 策略与该角色相关联，以便为担任该角色的任何用户提供权限。IAM 角色需要提供权限才能检索特定用户池 URLs 的嵌入内容。

借助通配符 *\$1*，您可以授予为特定命名空间中的所有用户生成 URL 的权限。您也可以授予为特定命名空间中的一部分用户生成 URL 的权限。为此，请添加 `quicksight:GenerateEmbedUrlForRegisteredUser`。

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

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

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

以下示例策略提供了这些权限。

此外，如果您要创建将成为 Amazon Quick Sight 读者的首次用户，请务必在策略中添加`quicksight:RegisterUser`权限。

以下示例策略为即将成为 Amazon Quick Sight 读者的首次用户提供了检索嵌入网址的权限。

最后，您应用程序的 IAM 身份必须具有关联的信任策略，才允许访问您刚创建的角色。这意味着，当用户访问您的应用程序时，您的应用程序可以代表用户担任该角色并在 Amazon Quick Sight 中配置用户。

下面演示了一个示例信任策略。

------
#### [ 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"
        }
    ]
}
```

------

有关 OpenID Connect 或安全断言标记语言（SAML）身份验证的信任策略的更多信息，请参阅《IAM 用户指南**》的以下章节：
+ [创建用于 Web 联合身份验证或 OpenID Connect 联合身份验证的角色（控制台）](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_create_for-idp_oidc.html)
+ [创建用于 SAML 2.0 联合身份验证的角色（控制台）](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_create_for-idp_saml.html)

## 步骤 2：生成附带身份验证代码的 URL
<a name="embedded-q-bar-for-authenticated-users-step-2"></a>

**注意**  
嵌入式的 Amazon Quick Sight Q 搜索栏提供经典的 Amazon Quick Sight 问答体验。Amazon Quick Sight 与 Amazon Q Business 集成，推出全新的生成问答体验。建议开发人员使用全新的生成式问答体验。有关嵌入式生成问答体验的更多信息，请参阅在 [Amazon Quick Sight 生成问答体验中嵌入 Amazon Q](https://docs.aws.amazon.com/quicksight/latest/user/embedding-gen-bi.html)。

在下节中，您可以了解如何对用户进行身份验证，并获取应用程序服务器上的可嵌入 Q 主题 URL。如果您计划为 IAM 或 Amazon Quick Sight 身份类型嵌入 Q 栏，请与用户共享 Q 主题。

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

执行上述步骤可确保在 Amazon Quick Sight 中对 Q 主题的每位查看者进行唯一配置。它还实施每个用户的设置，例如，行级别安全性和参数的动态默认值。

以下示例展示了代表用户执行 IAM 身份验证。此代码在您的应用程序服务器上运行。

### Java
<a name="embedded-q-bar-for-embedded-q-bar-for-authenticated-users-java"></a>

```
import com.amazonaws.auth.AWSCredentials;
import com.amazonaws.auth.BasicAWSCredentials;
        import com.amazonaws.auth.AWSCredentialsProvider;
        import com.amazonaws.regions.Regions;
        import com.amazonaws.services.quicksight.AmazonQuickSight;
        import com.amazonaws.services.quicksight.AmazonQuickSightClientBuilder;
import com.amazonaws.services.quicksight.model.GenerateEmbedUrlForRegisteredUserRequest;
import com.amazonaws.services.quicksight.model.GenerateEmbedUrlForRegisteredUserResult;
import com.amazonaws.services.quicksight.model.RegisteredUserEmbeddingExperienceConfiguration;
import com.amazonaws.services.quicksight.model.RegisteredUserQSearchBarEmbeddingConfiguration;

        /**
 * Class to call QuickSight AWS SDK to get url for embedding the Q search bar.
        */
public class RegisteredUserQSearchBarEmbeddingConfiguration {

            private final AmazonQuickSight quickSightClient;

    public RegisteredUserQSearchBarEmbeddingConfiguration() {
        this.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 getQuicksightEmbedUrl(
            final String accountId, // AWS Account ID
            final String topicId, // Topic ID to embed
            final List<String> allowedDomains, // Runtime allowed domain for embedding
            final String userArn // Registered user arn to use for embedding. Refer to Get Embed Url section in developer portal to find how to get user arn for a QuickSight user.
            ) throws Exception {
        final RegisteredUserEmbeddingExperienceConfiguration experienceConfiguration = new RegisteredUserEmbeddingExperienceConfiguration()
                .withQSearchBar(new RegisteredUserQSearchBarEmbeddingConfiguration().withInitialTopicId(topicId));
        final GenerateEmbedUrlForRegisteredUserRequest generateEmbedUrlForRegisteredUserRequest = new GenerateEmbedUrlForRegisteredUserRequest();
        generateEmbedUrlForRegisteredUserRequest.setAwsAccountId(accountId);
        generateEmbedUrlForRegisteredUserRequest.setUserArn(userArn);
        generateEmbedUrlForRegisteredUserRequest.setAllowedDomains(allowedDomains);
        generateEmbedUrlForRegisteredUserRequest.setExperienceConfiguration(QSearchBar);

        final GenerateEmbedUrlForRegisteredUserResult generateEmbedUrlForRegisteredUserResult = quickSightClient.generateEmbedUrlForRegisteredUser(generateEmbedUrlForRegisteredUserRequest);

        return generateEmbedUrlForRegisteredUserResult.getEmbedUrl();
            }
        }
```

### JavaScript
<a name="embedded-q-bar-for-embedded-q-bar-for-authenticated-users-js"></a>

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

function generateEmbedUrlForRegisteredUser(
    accountId,
    topicId, // Topic ID to embed
    openIdToken, // Cognito-based token
    userArn, // registered user arn
    roleArn, // IAM user role to use for embedding
    sessionName, // Session name for the roleArn assume role
    allowedDomains, // Runtime allowed domain for embedding
    getEmbedUrlCallback, // GetEmbedUrl success callback method
    errorCallback // GetEmbedUrl error callback method
    ) {
    const stsClient = new AWS.STS();
    let stsParams = {
        RoleSessionName: sessionName,
        WebIdentityToken: openIdToken,
        RoleArn: roleArn
        }
    
    stsClient.assumeRoleWithWebIdentity(stsParams, function(err, data) {
        if (err) {
            console.log('Error assuming role');
            console.log(err, err.stack);
            errorCallback(err);
        } else {
            const getQSearchBarParams = {
        "AwsAccountId": accountId,
                "ExperienceConfiguration": {
                    "QSearchBar": {
                        "InitialTopicId": topicId
                    }
                },
                "UserArn": userArn,
        "AllowedDomains": allowedDomains,
        "SessionLifetimeInMinutes": 600
    };

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

            quicksightGetQSearchBar.generateEmbedUrlForRegisteredUser(getQSearchBarParams, 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 GetEmbedUrl API
                    "Access-Control-Allow-Headers": "Content-Type"
                },
                "body": JSON.stringify(data),
                "isBase64Encoded": false
            }
                    getEmbedUrlCallback(result);
                }
            });
        }
    });
}
```

### Python3
<a name="embedded-q-bar-for-embedded-q-bar-for-authenticated-users-python"></a>

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

sts = boto3.client('sts')

# Function to generate embedded URL  
# accountId: AWS account ID
# topicId: Topic ID to embed
# userArn: arn of registered user
# allowedDomains: Runtime allowed domain for embedding
# roleArn: IAM user role to use for embedding
# sessionName: session name for the roleArn assume role
def getEmbeddingURL(accountId, topicId, userArn, allowedDomains, roleArn, sessionName):
    try:
        assumedRole = sts.assume_role(
            RoleArn = roleArn,
            RoleSessionName = sessionName,
        )
    except ClientError as e:
        return "Error assuming role: " + str(e)
    else: 
        assumedRoleSession = boto3.Session(
            aws_access_key_id = assumedRole['Credentials']['AccessKeyId'],
            aws_secret_access_key = assumedRole['Credentials']['SecretAccessKey'],
            aws_session_token = assumedRole['Credentials']['SessionToken'],
        )
        try:
            quicksightClient = assumedRoleSession.client('quicksight', region_name='us-west-2')
            response = quicksightClient.generate_embed_url_for_registered_user(
                AwsAccountId=accountId,
                ExperienceConfiguration = {
                    "QSearchBar": {
                        "InitialTopicId": topicId
                    }
                },
                UserArn = userArn,
                AllowedDomains = allowedDomains,
                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:
            return "Error generating embedding url: " + str(e)
```

### Node.js
<a name="embedded-q-bar-for-embedded-q-bar-for-authenticated-users-node"></a>

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

**Example**  

```
const AWS = 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.generateEmbedUrlForRegisteredUser({
    'AwsAccountId': '111122223333',
    'ExperienceConfiguration': { 
        'QSearchBar': {
            'InitialTopicId': 'U4zJMVZ2n2stZflc8Ou3iKySEb3BEV6f'
        }
    },
    'UserArn': 'REGISTERED_USER_ARN',
    'AllowedDomains': allowedDomains,
    'SessionLifetimeInMinutes': 100
}, 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/sheets/12345/visuals/67890...",
        RequestId: '7bee030e-f191-45c4-97fe-d9faf0e03713' 
    }
```

### .NET/C\$1
<a name="embedded-q-bar-for-embedded-q-bar-for-authenticated-users-cs"></a>

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

**Example**  

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

namespace GenerateDashboardEmbedUrlForRegisteredUser
{
    class Program
    {
        static void Main(string[] args)
        {
            var quicksightClient = new AmazonQuickSightClient(
                AccessKey,
                SecretAccessKey,
                SessionToken,
                Amazon.RegionEndpoint.USEast1);
            try
            {
                RegisteredUserQSearchBarEmbeddingConfiguration registeredUserQSearchBarEmbeddingConfiguration
                    = new RegisteredUserQSearchBarEmbeddingConfiguration
                    {
                        InitialTopicId = "U4zJMVZ2n2stZflc8Ou3iKySEb3BEV6f"
                    };
                RegisteredUserEmbeddingExperienceConfiguration registeredUserEmbeddingExperienceConfiguration
                    = new RegisteredUserEmbeddingExperienceConfiguration
                    {
                        QSearchBar = registeredUserQSearchBarEmbeddingConfiguration
                    }; 
                
                Console.WriteLine(
                    quicksightClient.GenerateEmbedUrlForRegisteredUserAsync(new GenerateEmbedUrlForRegisteredUserRequest
                    {
                        AwsAccountId = "111122223333",
                        ExperienceConfiguration = registeredUserEmbeddingExperienceConfiguration,
                        UserArn = "REGISTERED_USER_ARN",
                        AllowedDomains = allowedDomains,
                        SessionLifetimeInMinutes = 100
                    }).Result.EmbedUrl
                );
            } catch (Exception ex) {
                Console.WriteLine(ex.Message);
            }
        }
    }
}
```

### AWS CLI
<a name="embedded-q-bar-for-embedded-q-bar-for-authenticated-users-cli"></a>

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

以下示例显示了用于设置 IAM 角色的 CLI 命令。该角色需要为 `quicksight:GenerateEmbedUrlForRegisteredUser` 启用权限。如果您要在用户使用 Q 搜索栏中的主题时添加用户，则还需要为该角色启用权限`quicksight:RegisterUser`。 just-in-time

```
aws sts assume-role \
     --role-arn "arn:aws:iam::111122223333:role/embedding_quicksight_q_search_bar_role" \
     --role-session-name john.doe@example.com
```

`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_q_search_bar_role/john.doe@example.com`。角色会话 ID 由 `role-arn` 中的角色名称和 `role-session-name` 值组成。每个用户使用唯一的角色会话 ID 可以确保为每个用户设置相应的权限。此外，它还能避免任何用户访问限制。*限制*是一项安全功能，可防止同一个用户从多个位置访问 Amazon Quick Sight。

角色会话 ID 也将成为 Amazon Quick Sight 中的用户名。您可以使用此模式提前在 Amazon Quick Sight 中配置用户，或者在他们首次访问 Q 搜索栏时为他们进行配置。

以下示例显示了可用于预置用户的 CLI 命令。有关[RegisterUser[DescribeUser](https://docs.aws.amazon.com/quicksight/latest/APIReference/API_DescribeUser.html)](https://docs.aws.amazon.com/quicksight/latest/APIReference/API_RegisterUser.html)、和其他 Amazon Quick Sight API 操作的更多信息，请参阅 [Amazon Quick Sight API 参考](https://docs.aws.amazon.com/quicksight/latest/APIReference/Welcome.html)。

```
aws quicksight register-user \
    --aws-account-id 111122223333 \
    --namespace default \
    --identity-type IAM \
    --iam-arn "arn:aws:iam::111122223333:role/embedding_quicksight_q_search_bar_role" \
    --user-role READER \
    --user-name jhnd \
    --session-name "john.doe@example.com" \
    --email john.doe@example.com \
    --region us-east-1 \
    --custom-permissions-name TeamA1
```

如果用户通过 Microsoft AD 进行身份验证，则无需使用 `RegisterUser` 进行设置。相反，他们应该在首次访问 Amazon Quick Sight 时自动订阅。对于 Microsoft AD 用户，您可以使用 `DescribeUser` 获取用户 Amazon 资源名称（ARN）。

用户首次访问 Amazon Quick Sight 时，您也可以将该用户添加到与之共享控制面板的群组中。以下示例显示了将用户添加到组的 CLI 命令。

```
aws quicksight create-group-membership \
    --aws-account-id=111122223333 \
    --namespace=default \
    --group-name=financeusers \
    --member-name="embedding_quicksight_q_search_bar_role/john.doe@example.com"
```

现在，您的应用程序的用户也是 Amazon Quick Sight 的用户，并且可以访问控制面板。

最后，要获取控制面板的签名 URL，请从应用程序服务器中调用 `generate-embed-url-for-registered-user`。这会返回可嵌入的控制面板 URL。以下示例说明如何使用服务器端调用为通过身份验证 AWS Managed Microsoft AD 或单点登录（IAM Identity Center）进行身份验证的用户生成嵌入式控制面板的 URL。

```
aws quicksight generate-embed-url-for-registered-user \
--aws-account-id 111122223333 \
--session-lifetime-in-minutes 600 \
--user-arn arn:aws:quicksight:us-east-1:111122223333:user/default/embedding_quicksight_q_search_bar_role/embeddingsession
--allowed-domains '["domain1","domain2"]' \
--experience-configuration QSearchBar={InitialTopicId=U4zJMVZ2n2stZflc8Ou3iKySEb3BEV6f}
```

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

## 步骤 3：嵌入 Q 搜索栏 URL
<a name="embedded-q-bar-for-authenticated-users-step-3"></a>

**注意**  
嵌入式的 Amazon Quick Sight Q 搜索栏提供经典的 Amazon Quick Sight 问答体验。Amazon Quick Sight 与 Amazon Q Business 集成，推出全新的生成问答体验。建议开发人员使用全新的生成式问答体验。有关嵌入式生成问答体验的更多信息，请参阅在 [Amazon Quick Sight 生成问答体验中嵌入 Amazon Q](https://docs.aws.amazon.com/quicksight/latest/user/embedding-gen-bi.html)。

在以下部分中，您可以了解如何将步骤 3 中的 Q 搜索栏 URL 嵌入网站或应用程序页面。你可以使用 [Amazon Quick Sight 嵌入式 SDK](https://www.npmjs.com/package/amazon-quicksight-embedding-sdk) (JavaScript) 来做到这一点。通过使用该开发工具包，您可以执行以下操作：
+ 将 Q 搜索栏放置到 HTML 页面上。
+ 将参数传递到 Q 搜索栏。
+ 使用为应用程序自定义的消息处理错误状态。

要生成可嵌入应用程序的 URL，请调用 `GenerateEmbedUrlForRegisteredUser` API 操作。该 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/q/search...",
     "RequestId": "7bee030e-f191-45c4-97fe-d9faf0e03713"
}
```

使用 [Amazon Quick Sight 嵌入式 SDK 或将此 URL 添加到 iframe 中，将 Q 搜索栏嵌](https://www.npmjs.com/package/amazon-quicksight-embedding-sdk)入到您的网页中。如果您设置了固定的高度和宽度数字（以像素为单位），Amazon Quick Sight 会使用这些数字，并且不会在窗口大小调整时更改视觉效果。如果您设置相对的百分比高度和宽度，Amazon Quick Sight 会提供响应式布局，该布局会随着窗口大小的变化而进行修改。

为此，请确保托管嵌入式 Q 搜索栏的域名位于*允许列表中*，即您的 Amazon Quick Sight 订阅的已批准域名列表。这一要求可阻止未经批准的域托管嵌入式控制面板，从而保护您的数据。有关为嵌入式 Q 搜索栏添加域名的更多信息，请参阅[管理域和嵌入](https://docs.aws.amazon.com/quicksight/latest/user/manage-qs-domains-and-embedding.html)。

当您使用 Amazon Quick Sight Embedding SDK 时，页面上的 Q 搜索栏会根据状态动态调整大小。通过使用 Amazon Quick Sight Embedding SDK，您还可以控制 Q 搜索栏中的参数，并接收有关页面加载完成和错误的回调。

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

### SDK 2.0
<a name="embedded-q-bar-for-authenticated-users-sdkv2"></a>

```
<!DOCTYPE html>
<html>

    <head>
        <title>Q Search Bar 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 embedQSearchBar = 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 = {
                    hideTopicName: false, 
                    theme: '<YOUR_THEME_ID>',
                    allowTopicSelection: true,
                    onMessage: async (messageEvent, experienceMetadata) => {
                        switch (messageEvent.eventName) {
                            case 'Q_SEARCH_OPENED': {
                                console.log("Do something when Q Search content expanded");
                                break;
                            }
                            case 'Q_SEARCH_CLOSED': {
                                console.log("Do something when Q Search content collapsed");
                                break;
                            }
                            case 'Q_SEARCH_SIZE_CHANGED': {
                                console.log("Do something when Q Search size changed");
                                break;
                            }
                            case 'CONTENT_LOADED': {
                                console.log("Do something when the Q Search is loaded.");
                                break;
                            }
                            case 'ERROR_OCCURRED': {
                                console.log("Do something when the Q Search fails loading.");
                                break;
                            }
                        }
                    }
                };
                const embeddedDashboardExperience = await embeddingContext.embedQSearchBar(frameOptions, contentOptions);
            };
        </script>
    </head>

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

</html>
```

### SDK 1.0
<a name="embedded-q-bar-for-authenticated-users-sdkv1"></a>

```
<!DOCTYPE html>
<html>

    <head>
        <title>QuickSight Q Search Bar Embedding</title>
        <script src="https://unpkg.com/amazon-quicksight-embedding-sdk@1.18.0/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 onOpen() {
                console.log("Do something when the Q search bar opens");
            }

            function onClose() {
                console.log("Do something when the Q search bar closes");
            }

            function embedQSearchBar() {
                var containerDiv = document.getElementById("embeddingContainer");
                var options = {
                    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,
                    width: "1000px",
                    locale: "en-US",
                    qSearchBarOptions: {
                        expandCallback: onOpen,
                        collapseCallback: onClose,
                        iconDisabled: false,
                        topicNameDisabled: false, 
                        themeId: 'bdb844d0-0fe9-4d9d-b520-0fe602d93639',
                        allowTopicSelection: true
                    }
                };
                session = QuickSightEmbedding.embedQSearchBar(options);
                session.on("error", onError);
            }

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

    <body onload="embedQSearchBar()">
        <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
  ```

## 可选的 Amazon Quick Sight Q 搜索栏嵌入功能
<a name="embedded-q-bar-for-authenticated-users-step-4"></a>

**注意**  
嵌入式的 Amazon Quick Sight Q 搜索栏提供经典的 Amazon Quick Sight 问答体验。Amazon Quick Sight 与 Amazon Q Business 集成，推出全新的生成问答体验。建议开发人员使用全新的生成式问答体验。有关嵌入式生成问答体验的更多信息，请参阅在 [Amazon Quick Sight 生成问答体验中嵌入 Amazon Q](https://docs.aws.amazon.com/quicksight/latest/user/embedding-gen-bi.html)。

以下可选功能可用于使用嵌入开发工具包的嵌入式 Q 搜索栏。

### 调用 Q 搜索栏操作
<a name="w2aac35c27c21c43c31c15c21b7"></a>

以下选项仅支持嵌入 Q 搜索栏。
+ 设置 Q 搜索栏问题 – 此功能将问题发送到 Q 搜索栏并立即查询问题。它还可以自动打开 Q 弹出框。

  ```
  qBar.setQBarQuestion('show me monthly revenue');
  ```
+ 关闭 Q 弹出框 – 此功能将关闭 Q 弹出框并将 iframe 返回到原始 Q 搜索栏大小。

  ```
  qBar.closeQPopover();
  ```

有关更多信息，请参阅 [Amazon Quick Sight 嵌入软件开发工具包](https://github.com/awslabs/amazon-quicksight-embedding-sdk)。