為已註冊使用者嵌入 Amazon Quick Sight 主控台的完整功能 - Amazon Quick Suite

本文為英文版的機器翻譯版本,如內容有任何歧義或不一致之處,概以英文版為準。

為已註冊使用者嵌入 Amazon Quick Sight 主控台的完整功能

重要

Amazon Quick Sight 有用於內嵌分析的新 API 操作: GenerateEmbedUrlForAnonymousUserGenerateEmbedUrlForRegisteredUser

您仍然可以使用 GetDashboardEmbedUrlGetSessionEmbedUrl API 操作來內嵌儀表板和 Amazon Quick Sight 主控台,但它們不包含最新的內嵌功能。如需使用舊 API 操作內嵌的詳細資訊,請參閱使用 GetDashboardEmbedURL和 GetSessionEmbedURL API 操作內嵌分析

 適用於:企業版 
   目標對象:Amazon Quick Suite 開發人員 

使用企業版,除了提供唯讀儀表板之外,您還可以在自訂品牌撰寫入口網站中提供 Amazon Quick Sight 主控台體驗。使用這種方法,可以讓使用者建立資料來源、資料集和分析。在相同的界面中,他們可以建立、發布和檢視儀表板。如果您想限制其中一些許可,也可以這樣做。

透過內嵌主控台存取 Amazon Quick Sight 的使用者需要屬於作者或管理員安全群組。讀者沒有足夠的存取權來使用 Amazon Quick Sight 主控台進行撰寫,無論它是內嵌或 的一部分 AWS 管理主控台。但是,作者和管理員仍然可以存取內嵌式儀表板。如果您想要限制某些編寫特徵的許可,可以使用 UpdateUser API 操作將自訂許可設定檔新增至使用者。使用 RegisterUser API 操作來新增附加自訂許可設定檔的新使用者。如需詳細資訊,請參閱下列章節:

在下列各節中,您可以找到有關如何為已註冊使用者設定內嵌 Amazon Quick Sight 儀表板的詳細資訊。

步驟 1:設定許可

在以下章節中,您可以了解如何為後端應用程式或 Web 伺服器設定許可。這個任務需要有 IAM 的管理存取權。

每個存取 Amazon Quick Sight 的使用者都會擔任一個角色,為他們提供主控台工作階段的 Amazon Quick Sight 存取權和許可。若要實現此目的,請在 AWS 您的帳戶中建立 IAM 角色。將 IAM 政策與此角色建立關聯,以提供許可給擔任此角色的任何使用者。新增quicksight:RegisterUser許可,以確保讀者可以唯讀方式存取 Amazon Quick Sight,而且無法存取任何其他資料或建立功能。IAM 角色也需要提供可擷取主控台工作階段 URL 的許可。對於這一點,您新增 quicksight:GenerateEmbedUrlForRegisteredUser

您可以在 IAM 政策中建立條件,以限制開發人員可在 GenerateEmbedUrlForAnonymousUser API 操作的 AllowedDomains 參數中列出的域。AllowedDomains 參數是選用參數。它可讓您以開發人員身分選擇覆寫管理 Amazon Quick Sight 選單中設定的靜態網域。您則最多可以列出三個可存取產生之 URL 的域或子網域。然後,此 URL 將嵌入您建立的網站中。只有參數中列出的域可以存取內嵌式儀表板。如果沒有這種情況,您可以在 AllowedDomains 參數中列出網際網路上的任何域。

下列範例政策提供這些許可。

下列範例政策提供擷取主控台工作階段 URL 的許可。如果您要在使用者存取內嵌工作階段之前建立使用者,則可以不帶 quicksight:RegisterUser 使用原則。

最後,您的應用程式的 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 使用者指南的下列各節:

步驟 2:產生帶有身分驗證碼的 URL

在下一章節,您可以了解如何在您的應用程式伺服器上驗證使用者,以及取得可內嵌主控台工作階段的 URL。

當使用者存取您的應用程式時,該應用程式代表使用者擔任 IAM 角色。然後,如果使用者尚未存在,它會將使用者新增至 Amazon Quick Sight。接著,它傳遞識別符當作唯一的角色工作階段 ID。

執行所述的步驟可確保主控台工作階段的每個檢視器在 Amazon Quick Sight 中唯一佈建。它還會強制執行個別使用者設定,例如資料列層級的安全性和參數的動態預設值。

下列範例會代表使用者執行 IAM 身分驗證。此代碼在您的應用程式伺服器上運行。

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.RegisteredUserQuickSightConsoleEmbeddingConfiguration; /** * Class to call QuickSight AWS SDK to get url for QuickSight console embedding. */ public class GetQuicksightEmbedUrlRegisteredUserQSConsoleEmbedding { private final AmazonQuickSight quickSightClient; public GetQuicksightEmbedUrlRegisteredUserQSConsoleEmbedding() { 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, final String userArn, // Registered user arn to use for embedding. Refer to Get Embed Url section in developer portal to find out how to get user arn for a QuickSight user. final List<String> allowedDomains, // Runtime allowed domain for embedding final String initialPath ) throws Exception { final RegisteredUserEmbeddingExperienceConfiguration experienceConfiguration = new RegisteredUserEmbeddingExperienceConfiguration() .withQuickSightConsole(new RegisteredUserQuickSightConsoleEmbeddingConfiguration().withInitialPath(initialPath)); final GenerateEmbedUrlForRegisteredUserRequest generateEmbedUrlForRegisteredUserRequest = new GenerateEmbedUrlForRegisteredUserRequest(); generateEmbedUrlForRegisteredUserRequest.setAwsAccountId(accountId); generateEmbedUrlForRegisteredUserRequest.setUserArn(userArn); generateEmbedUrlForRegisteredUserRequest.setAllowedDomains(allowedDomains); generateEmbedUrlForRegisteredUserRequest.setExperienceConfiguration(experienceConfiguration); final GenerateEmbedUrlForRegisteredUserResult generateEmbedUrlForRegisteredUserResult = quickSightClient.generateEmbedUrlForRegisteredUser(generateEmbedUrlForRegisteredUserRequest); return generateEmbedUrlForRegisteredUserResult.getEmbedUrl(); } }
global.fetch = require('node-fetch'); const AWS = require('aws-sdk'); function generateEmbedUrlForRegisteredUser( accountId, dashboardId, 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 getDashboardParams = { "AwsAccountId": accountId, "ExperienceConfiguration": { "QuickSightConsole": { "InitialPath": '/start' } }, "UserArn": userArn, "AllowedDomains": allowedDomains, "SessionLifetimeInMinutes": 600 }; const quicksightGetDashboard = 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 } }); quicksightGetDashboard.generateEmbedUrlForRegisteredUser(getDashboardParams, 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); } }); } }); }
import json import boto3 from botocore.exceptions import ClientError # Create QuickSight and STS clients qs = boto3.client('quicksight', region_name='us-east-1') sts = boto3.client('sts') # Function to generate embedded URL # accountId: AWS account ID # 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 generateEmbeddingURL(accountId, 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-east-1') experienceConfiguration = { "QuickSightConsole": { "InitialPath": "/start" } } response = quickSightClient.generate_embed_url_for_registered_user( AwsAccountId = accountId, ExperienceConfiguration = experienceConfiguration, 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)

以下範例顯示的 JavaScript (Node.js) 可在應用程式伺服器上用來產生內嵌主控台工作階段的 URL。您可以在您的網站或應用程式中使用此 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.generateEmbedUrlForRegisteredUser({ 'AwsAccountId': '111122223333', 'ExperienceConfiguration': { 'QuickSightConsole': { 'InitialPath': '/start' } }, 'UserArn': 'REGISTERED_USER_ARN', 'AllowedDomains': allowedDomains, 'SessionLifetimeInMinutes': 100 }, 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.., RequestId: '7bee030e-f191-45c4-97fe-d9faf0e03713' }

以下範例顯示的 .NET/C# 程式碼可在應用程式伺服器上用來產生內嵌主控台工作階段的 URL。您可以在您的網站或應用程式中使用此 URL 來顯示主控台。

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 { RegisteredUserQuickSightConsoleEmbeddingConfiguration registeredUserQuickSightConsoleEmbeddingConfiguration = new RegisteredUserQuickSightConsoleEmbeddingConfiguration { InitialPath = "/start" }; RegisteredUserEmbeddingExperienceConfiguration registeredUserEmbeddingExperienceConfiguration = new RegisteredUserEmbeddingExperienceConfiguration { QuickSightConsole = registeredUserQuickSightConsoleEmbeddingConfiguration }; 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 Security Token Service (AWS STS) API 操作:

  • AssumeRole – 在使用 IAM 身分擔任角色的情況下使用此操作。

  • AssumeRoleWithWebIdentity – 在使用 Web 身分提供者驗證您的使用者時,請使用此操作。

  • AssumeRoleWithSaml –在您使用 SAML 驗證使用者時,請使用此操作。

以下範例顯示用來設定 IAM 角色的 CLI 命令。角色需要啟用 quicksight:GenerateEmbedUrlForRegisteredUser 的許可。如果您在第一次開啟 Amazon Quick Sight 時採取just-in-time方法來新增使用者,該角色也需要為 啟用許可quicksight:RegisterUser

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

assume-role 操作會傳回三個輸出參數:存取金鑰、私密金鑰和工作階段字符。

注意

若您呼叫 AssumeRole 操作時收到 ExpiredToken 錯誤,原因可能是先前的 SESSION TOKEN 仍在環境變數中。設定以下變數便可清除此錯誤:

  • AWS_ACCESS_KEY_ID

  • AWS_SECRET_ACCESS_KEY

  • AWS_SESSION_TOKEN

以下範例說明如何在 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_console_session_role/john.doe@example.com。角色工作階段 ID 由來自 role-arnrole-session-name 值的角色名稱所組成。對每個使用者使用唯一的角色工作階段 ID,可確保為每個使用者設定適當的許可。還能避免對使用者存取進行任何調節。調節是一項安全功能,可防止相同的使用者從多個位置存取 Amazon Quick Sight。

角色工作階段 ID 也會成為 Amazon Quick Sight 中的使用者名稱。您可以使用此模式提前在 Amazon Quick Sight 中佈建使用者,或在使用者第一次存取主控台工作階段時佈建他們。

以下範例顯示可用來佈建使用者的 CLI 命令。如需 RegisterUserDescribeUser 和其他 Amazon Quick Sight API 操作的詳細資訊,請參閱 Amazon Quick Sight API 參考

aws quicksight register-user \ --aws-account-id 111122223333 \ --namespace default \ --identity-type IAM \ --iam-arn "arn:aws:iam::111122223333:role/embedding_quicksight_dashboard_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 取得使用者的 ARN。

使用者第一次存取 Amazon Quick Sight 時,您也可以將此使用者新增至適當的群組。以下範例顯示用於將使用者新增至群組的 CLI 命令。

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

您現在擁有的應用程式使用者,同時也是 Amazon Quick Sight 的使用者,以及有權存取 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 \ --entry-point the-url-for--the-console-session \ --session-lifetime-in-minutes 600 \ --user-arn arn:aws:quicksight:us-east-1:111122223333:user/default/embedding_quicksight_dashboard_role/embeddingsession --allowed-domains '["domain1","domain2"]' \ --experience-configuration QuickSightConsole={InitialPath="/start"}

如需使用此操作的詳細資訊,請參閱 GenerateEmbedUrlForRegisteredUser。您可以在您自己的程式碼中使用這個和其他 API 操作。

步驟 3:嵌入主控台工作階段 URL

在下一節中,您可以了解如何使用 Amazon Quick Sight 內嵌 SDK (JavaScript),在網站或應用程式頁面的步驟 3 中內嵌主控台工作階段 URL。您可以使用此 SDK 執行以下操作:

  • 將主控台工作階段放置在 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" }

使用 Amazon Quick Sight 內嵌 SDK 或將此 URL 新增至 iframe,將此主控台工作階段內嵌在您的網頁中。如果您設定固定高度和寬度數字 (以像素為單位),Amazon Quick Sight 會使用這些值,而且不會隨著視窗調整大小而變更視覺效果。如果您設定相對百分比高度和寬度,Amazon Quick Sight 會提供隨著視窗大小變更而修改的回應式配置。透過使用 Amazon Quick Sight 內嵌 SDK,您也可以控制主控台工作階段中的參數,並根據頁面載入完成和錯誤接收回呼。

要託管內嵌儀表板的網域必須列在允許清單上,即 Quick Suite 訂閱的已核准網域清單。這項要求將使未獲核准的網域無法託管嵌入儀表板,進而保護您的資料。如需為內嵌主控台新增網域的詳細資訊,請參閱使用 Amazon Quick Sight API 在執行時間允許列出網域

下列範例示範如何使用產生的 URL。此代碼在您的應用程式伺服器上生成。

<!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>
<!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 Quick Sight 內嵌 SDK,使用 JavaScript 在您的網站上載入內嵌主控台工作階段。為獲得您的版本,請執行以下其中一項操作: