익명 사용자(등록되지 않은)를 위한 Amazon QuickSight Q 검색 창 임베딩
대상 사용자: Amazon QuickSight 개발자 |
참고
임베디드 QuickSight Q 검색 표시줄은 클래식 QuickSight Q&A 환경을 제공합니다. QuickSight는 Amazon Q Business와 통합되어 새로운 생성형 Q&A 환경을 시작합니다. 개발자는 새로운 생성형 Q&A 환경을 사용하는 것이 좋습니다. 임베디드 생성형 Q&A 환경에 대한 자세한 정보는 QuickSight 생성형 Q&A 환경에 Amazon Q 임베딩 섹션을 참조하세요.
다음 섹션에서는 익명 (미등록) 사용자를 위해 임베디드 Amazon QuickSight Q 검색 창을 설정하는 방법에 대한 자세한 정보를 찾을 수 있습니다.
1단계: 권한 설정
참고
임베디드 QuickSight Q 검색 표시줄은 클래식 QuickSight Q&A 환경을 제공합니다. QuickSight는 Amazon Q Business와 통합되어 새로운 생성형 Q&A 환경을 시작합니다. 개발자는 새로운 생성형 Q&A 환경을 사용하는 것이 좋습니다. 임베디드 생성형 Q&A 환경에 대한 자세한 정보는 QuickSight 생성형 Q&A 환경에 Amazon Q 임베딩 섹션을 참조하세요.
다음 단원에서 임베디드 Q 검색 창에 백엔드 애플리케이션 또는 웹 서버의 권한을 설정하는 방법을 알아봅니다. 이 작업을 수행하려면 AWS Identity and Access Management(IAM)에 대한 관리자 액세스 권한이 있어야 합니다.
Q 검색 창에 액세스하는 각 사용자는 Amazon QuickSight의 Q 검색 창 액세스 및 권한을 부여하는 역할을 맡습니다. 이렇게 하려면 AWS 계정에서 IAM 역할을 생성합니다. IAM 정책을 역할과 연결하여 역할을 수행하는 사용자에게 권한을 제공합니다. IAM 역할은 특정 사용자 풀의 임베딩 URL을 검색할 수 있는 권한을 제공해야 합니다.
와일드카드 문자 *를 사용하여, 특정 네임스페이스의 모든 사용자에 대해 URL을 생성할 권한을 부여할 수 있습니다. 또는 특정 네임스페이스에 있는 사용자 하위 집합에 대해 URL을 생성할 권한을 부여할 수 있습니다. 이를 위해 quicksight:GenerateEmbedUrlForAnonymousUser
을(를) 추가합니다.
IAM 정책에 개발자가 GenerateEmbedUrlForAnonymousUser
API 작업의 AllowedDomains
파라미터에 나열할 수 있는 도메인을 제한하는 조건을 만들 수 있습니다. AllowedDomains
파라미터는 선택 파라미터입니다. 개발자에게 QuickSight 관리 메뉴에 구성된 정적 도메인을 재정의하고 대신 생성된 URL에 액세스할 수 있는 도메인 또는 하위 도메인을 최대 세 개까지 나열할 수 있는 옵션을 제공합니다. 그러면 이 URL이 개발자 웹 사이트에 포함됩니다. 파라미터에 나열된 도메인만 임베디드 Q 검색 창에 액세스할 수 있습니다. 이 조건이 없으면, 개발자는 인터넷에 있는 모든 도메인을 AllowedDomains
파라미터에 나열할 수 있습니다.
개발자가 이 파라미터로 사용할 수 있는 도메인을 제한하려면 IAM 정책에 AllowedEmbeddingDomains
조건을 추가하세요. AllowedDomains
파라미터에 대한 자세한 내용은 Amazon QuickSight API 참조의 GenerateEmbedUrlForAnonymousUser를 참조하세요.
다음 샘플 정책은 이러한 권한을 제공합니다.
{ "Version": "2012-10-17", "Statement": [ { "Effect": "Allow", "Action": [ "quicksight:GenerateEmbedUrlForAnonymousUser" ], "Resource": [ "arn:{{
partition
}}:quicksight:{{region
}}:{{accountId
}}:namespace/{{namespace
}}", "arn:{{partition
}}:quicksight:{{region
}}:{{accountId
}}:dashboard/{{dashboardId-1
}}", "arn:{{partition
}}:quicksight:{{region
}}:{{accountId
}}:dashboard/{{dashboardId-2
}}" ], "Condition": { "ForAllValues:StringEquals": { "quicksight:AllowedEmbeddingDomains": [ "https://my.static.domain1.com", "https://*.my.static.domain2.com" ] } } }
방금 생성한 역할에 액세스하려면 애플리케이션의 IAM 자격 증명에 신뢰 정책이 연결되어 있어야 합니다. 즉, 사용자가 애플리케이션에 액세스하면, 애플리케이션이 사용자를 대신하여 역할을 맡아서 Q 검색 창을 열 수 있습니다. 다음 예제는 샘플 신뢰 정책입니다.
{ "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의 임시 보안 인증 단원을 참조하세요.
2단계: 인증 코드가 첨부된 URL 생성
참고
임베디드 QuickSight Q 검색 표시줄은 클래식 QuickSight Q&A 환경을 제공합니다. QuickSight는 Amazon Q Business와 통합되어 새로운 생성형 Q&A 환경을 시작합니다. 개발자는 새로운 생성형 Q&A 환경을 사용하는 것이 좋습니다. 임베디드 생성형 Q&A 환경에 대한 자세한 정보는 QuickSight 생성형 Q&A 환경에 Amazon Q 임베딩 섹션을 참조하세요.
다음 단원에서는 사용자를 인증하고 애플리케이션 서버에서 임베딩 가능한 Q 주제 URL을 가져오는 방법을 알아볼 수 있습니다.
사용자가 앱에 액세스할 때, 앱은 사용자를 대신하여 IAM 역할을 맡습니다. 그런 다음 사용자가 아직 없는 경우, 사용자를 QuickSight에 추가해야 합니다. 다음으로 식별자를 고유한 역할 세션 ID로 전달합니다.
자세한 내용은 AnonymousUserQSearchBarEmbeddingConfiguration
단원을 참조하십시오.
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.AnonymousUserQSearchBarEmbeddingConfiguration; 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 AWS 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 AWS ACCOUNT ID final String initialTopicId, // Q TOPIC ID TO WHICH THE CONSTRUCTED URL POINTS AND SEARCHBAR PREPOPULATES INITIALLY final String namespace, // ANONYMOUS EMBEDDING REQUIRES SPECIFYING A VALID NAMESPACE FOR WHICH YOU WANT THE EMBEDDING URL final List<String> authorizedResourceArns, // Q SEARCHBAR TOPIC 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(); AnonymousUserQSearchBarEmbeddingConfiguration qSearchBarConfiguration = new AnonymousUserQSearchBarEmbeddingConfiguration(); qSearchBarConfiguration.setInitialTopicId(initialTopicId); experienceConfiguration.setQSearchBar(qSearchBarConfiguration); 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 qSearchBarEmbedUrl = quickSightClient.generateEmbedUrlForAnonymousUser(generateEmbedUrlForAnonymousUserRequest); return qSearchBarEmbedUrl.getEmbedUrl(); } }
global.fetch = require('node-fetch'); const AWS = require('aws-sdk'); function generateEmbedUrlForAnonymousUser( accountId, // YOUR AWS ACCOUNT ID initialTopicId, // Q TOPIC ID TO WHICH THE CONSTRUCTED URL POINTS quicksightNamespace, // VALID NAMESPACE WHERE YOU WANT TO DO NOAUTH EMBEDDING authorizedResourceArns, // Q SEARCHBAR TOPIC ARN LIST TO EMBED allowedDomains, // RUNTIME ALLOWED DOMAINS FOR EMBEDDING sessionTags, // SESSION TAGS USED FOR ROW-LEVEL SECURITY generateEmbedUrlForAnonymousUserCallback, // SUCCESS CALLBACK METHOD errorCallback // ERROR CALLBACK METHOD ) { const experienceConfiguration = { "QSearchBar": { "InitialTopicId": initialTopicId // TOPIC ID CAN BE FOUND IN THE URL ON THE TOPIC AUTHOR PAGE } }; 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); } }); }
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: TOPIC ARN LIST TO EMBED # allowedDomains: RUNTIME ALLOWED DOMAINS FOR EMBEDDING # experienceConfiguration: configuration which specifies the TOPIC ID to point URL to # sessionTags: SESSION TAGS USED FOR ROW-LEVEL SECURITY def generateEmbedUrlForAnonymousUser(accountId, quicksightNamespace, authorizedResourceArns, allowedDomains, experienceConfiguration, sessionTags): try: response = quicksightClient.generate_embed_url_for_anonymous_user( AwsAccountId = accountId, Namespace = quicksightNamespace, AuthorizedResourceArns = authorizedResourceArns, AllowedDomains = allowedDomains, ExperienceConfiguration = experienceConfiguration, 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)
다음 예제는 앱 서버에서 임베디드 대시보드에 대한 URL를 생성하는 데 사용할 수 있는 JavaScript(Node.js)를 보여줍니다. 웹 사이트 또는 앱에서 이 URL을 사용하여 대시보드를 표시할 수 있습니다.
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.generateEmbedUrlForAnonymousUser({ 'AwsAccountId': '111122223333', 'Namespace': 'DEFAULT' 'AuthorizedResourceArns': '["topic-arn-topicId1","topic-arn-topicId2"]', 'AllowedDomains': allowedDomains, 'ExperienceConfiguration': { 'QSearchBar': { 'InitialTopicId': 'U4zJMVZ2n2stZflc8Ou3iKySEb3BEV6f' } }, 'SessionTags': '["Key": tag-key-1,"Value": tag-value-1,{"Key": tag-key-1,"Value": tag-value-1}]', 'SessionLifetimeInMinutes': 15 }, function(err, data) { console.log('Errors: '); console.log(err); console.log('Response: '); console.log(data); });
//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' }
다음 예제는 앱 서버에서 임베디드 Q 검색 창에 대한 URL를 생성하는데 사용할 수 있는 .NET/C# 코드를 보여줍니다. 웹 사이트 또는 앱에서 이 URL을 사용하여 Q 검색 창을 표시할 수 있습니다.
using System; using Amazon.QuickSight; using Amazon.QuickSight.Model; namespace GenerateQSearchBarEmbedUrlForAnonymousUser { class Program { static void Main(string[] args) { var quicksightClient = new AmazonQuickSightClient( AccessKey, SecretAccessKey, SessionToken, Amazon.RegionEndpoint.USEast1); try { AnonymousUserQSearchBarEmbeddingConfiguration anonymousUserQSearchBarEmbeddingConfiguration = new AnonymousUserQSearchBarEmbeddingConfiguration { InitialTopicId = "U4zJMVZ2n2stZflc8Ou3iKySEb3BEV6f" }; AnonymousUserEmbeddingExperienceConfiguration anonymousUserEmbeddingExperienceConfiguration = new AnonymousUserEmbeddingExperienceConfiguration { QSearchBar = anonymousUserQSearchBarEmbeddingConfiguration }; Console.WriteLine( quicksightClient.GenerateEmbedUrlForAnonymousUserAsync(new GenerateEmbedUrlForAnonymousUserRequest { AwsAccountId = "111122223333", Namespace = "DEFAULT", AuthorizedResourceArns '["topic-arn-topicId1","topic-arn-topicId2"]', AllowedDomains = allowedDomains, ExperienceConfiguration = anonymousUserEmbeddingExperienceConfiguration, SessionTags = '["Key": tag-key-1,"Value": tag-value-1,{"Key": tag-key-1,"Value": tag-value-1}]', SessionLifetimeInMinutes = 15, }).Result.EmbedUrl ); } catch (Exception ex) { Console.WriteLine(ex.Message); } } } }
역할을 수임하려면 다음의 AWS Security Token Service(AWS STS) API 작업 중 하나를 선택합니다.
-
AssumeRole - IAM 자격 증명을 사용하여 역할을 수임하는 경우 사용합니다.
-
AssumeRoleWithWebIdentity - 웹 ID 공급자를 사용하여 사용자를 인증하는 경우 이 작업을 사용하세요.
-
AssumeRoleWithSaml - SAML을 사용하여 사용자를 인증할 때 이 작업을 사용하세요.
다음 예에서는 IAM 역할을 설정하는 CLI 명령을 보여줍니다. 역할은 quicksight:GenerateEmbedUrlForAnonymousUser
에 대한 권한이 활성화되어 있어야 합니다.
aws sts assume-role \ --role-arn "
arn:aws:iam::111122223333:role/embedding_quicksight_q_search_bar_role
" \ --role-session-nameanonymous caller
assume-role
작업은 액세스 키, 보안 키 및 세션 토큰의 세 가지 출력 파라미터를 반환합니다.
참고
AssumeRole
작업을 호출할 때 ExpiredToken
오류가 발생할 경우, 이는 아마도 이전의 SESSION TOKEN
이(가) 환경 변수에 남아 있기 때문입니다. 다음 변수를 설정하여 이를 삭제합니다.
-
AWS_ACCESS_KEY_ID
-
AWS_SECRET_ACCESS_KEY
-
AWS_SESSION_TOKEN
다음 예에서는 CLI에서 세 파라미터를 설정하는 방법을 보여줍니다. Microsoft Windows 컴퓨터의 경우, export
대신 set
을(를) 사용하십시오.
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/QuickSightEmbeddingAnonymousPolicy
으로 설정합니다. 역할 세션 ID는 role-arn
의 역할 이름과 role-session-name
값으로 구성됩니다. 각 사용자에 대해 적절한 권한을 설정하려면 각 사용자에 대해 고유한 역할 세션 ID를 사용해야 합니다. 또한 사용자 액세스 조절을 방지할 수 있습니다. 조절은 동일한 사용자가 여러 위치에서 QuickSight에 액세스하는 것을 방지하는 보안 기능입니다. 또한 각 세션을 분리하고 구분할 수 있습니다. 로드 밸런싱 등을 위해 여러 웹 서버를 사용하는 경우, 세션이 다른 서버에 다시 연결되면 새 세션이 시작됩니다.
대시보드에 대해 서명된 URL을 가져오려면, 앱 서버에서 generate-embed-url-for-anynymous-user
을(를) 호출합니다. 그러면 임베드 가능한 대시보드 URL이 반환됩니다. 다음 예제는 웹 포털 또는 앱을 익명으로 방문하는 사용자에 대해 서버 측 직접 호출을 사용하여 임베디드 대시보드의 URL을 생성하는 방법을 보여줍니다.
aws quicksight generate-embed-url-for-anonymous-user \ --aws-account-id
111122223333
\ --namespacedefault-or-something-else
\ --authorized-resource-arns '["topic-arn-topicId1
","topic-arn-topicId2
"]' \ --allowed-domains '["domain1
","domain2
"]' \ --experience-configuration 'QSearchBar={InitialTopicId="topicId1
"}' \ --session-tags '["Key":tag-key-1
,"Value":tag-value-1
,{"Key":tag-key-1
,"Value":tag-value-1
}]' \ --session-lifetime-in-minutes 15
이 작업의 사용에 대한 자세한 내용은 GenerateEmbedUrlForRegisteredUser 단원을 참조하세요. 자체 코드에서 이 작업 및 다른 API 작업을 사용할 수 있습니다.
3단계: Q 검색 창 URL 포함
참고
임베디드 QuickSight Q 검색 표시줄은 클래식 QuickSight Q&A 환경을 제공합니다. QuickSight는 Amazon Q Business와 통합되어 새로운 생성형 Q&A 환경을 시작합니다. 개발자는 새로운 생성형 Q&A 환경을 사용하는 것이 좋습니다. 임베디드 생성형 Q&A 환경에 대한 자세한 정보는 QuickSight 생성형 Q&A 환경에 Amazon Q 임베딩 섹션을 참조하세요.
다음 섹션에서는 3단계의 Q 검색 창 URL을 웹사이트 또는 애플리케이션 페이지에 포함하는 방법을 알아볼 수 있습니다. Amazon QuickSight 임베딩 SDK
-
Q 검색 창을 HTML 페이지에 배치하세요.
-
Q 검색창에 파라미터를 전달합니다.
-
애플리케이션에 사용자 지정되는 메시지로 오류 상태 처리
앱에 포함할 수 있는 URL을 생성하러면, GenerateEmbedUrlForAnonymousUser
API 작업을 직접 호출하세요. 이 URL은 5분 동안 유효하며, 결과 세션은 10시간까지 유효합니다. 이 API 작업은 URL에 single-sign on 세션을 허용하는 auth_code
값을 제공합니다.
다음은 generate-embed-url-for-anonymous-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" }
QuickSight 임베딩 SDK
이렇게 하려면 임베디드 Q 검색 표시줄을 호스팅할 도메인이 QuickSight 구독에 승인된 도메인 목록인 허용 목록에 있는지 확인하세요. 이 요건은 임베디드 Q 검색 창에서 미승인 도메인을 제외함으로써 데이터를 보호합니다. 임베디드 Q 검색 창의 도메인 추가에 대한 자세한 내용은 도메인 및 임베딩 관리 단원을 참조하세요.
QuickSight 임베딩 SDK를 사용하면, 페이지에 있는 Q 검색 창의 크기가 상태에 따라 동적으로 조정됩니다. QuickSight 임베딩 SDK를 사용하여, Q 검색 창 안에서 파라미터를 제어하고 페이지 로드 완료 및 오류로 콜백을 수신할 수도 있습니다.
다음 예제는 생성된 URL을 사용하는 방법을 보여 줍니다. 이 코드는 앱 서버에서 생성됩니다.
<!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>
<!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 QuickSight 임베딩 SDK를 사용하여 JavaScript를 사용하여 웹 사이트에 임베디드 Q 검색 창을 로드해야 합니다. 이 정보를 얻으려면 다음 중 하나를 수행합니다.
-
GitHub에서 Amazon QuickSight 임베딩 SDK
를 다운로드하세요. 이 리포지토리는 QuickSight 개발자 그룹이 관리합니다. -
https://www.npmjs.com/package/amazon-quicksight-embedding-sdk
에서 최신 임베딩 SDK 버전을 다운로드하세요. -
JavaScript 종속성에
npm
을(를) 사용하는 경우 다음 명령을 실행하여 다운로드하고 설치합니다.npm install amazon-quicksight-embedding-sdk
Amazon QuickSight Q 검색 창 임베딩 선택적 기능
참고
임베디드 QuickSight Q 검색 표시줄은 클래식 QuickSight Q&A 환경을 제공합니다. QuickSight는 Amazon Q Business와 통합되어 새로운 생성형 Q&A 환경을 시작합니다. 개발자는 새로운 생성형 Q&A 환경을 사용하는 것이 좋습니다. 임베디드 생성형 Q&A 환경에 대한 자세한 정보는 QuickSight 생성형 Q&A 환경에 Amazon Q 임베딩 섹션을 참조하세요.
임베딩 SDK를 사용하여 내장된 Q 검색 창에 다음과 같은 선택적 기능을 사용할 수 있습니다.
Q 검색 창 작업 간접 호출
다음 옵션은 Q 검색 창 임베딩에만 지원됩니다.
-
Q 검색 창 질문 설정 - 이 기능은 질문을 Q 검색 창으로 보내고 질문을 즉시 쿼리합니다. 또한 Q 팝오버도 자동으로 열립니다.
qBar.setQBarQuestion('
show me monthly revenue
'); -
Q 팝오버 닫기 - 이 기능은 Q 팝오버를 닫고 iframe을 원래 Q 검색창 크기로 되돌립니다.
qBar.closeQPopover();
자세한 정보는 QuickSight 임베딩 SDK