Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.
Menyematkan fungsionalitas penuh QuickSight konsol Amazon untuk pengguna terdaftar
penting
Amazon QuickSight memiliki API operasi baru untuk menyematkan analitik: GenerateEmbedUrlForAnonymousUser
danGenerateEmbedUrlForRegisteredUser
.
Anda masih dapat menggunakan GetSessionEmbedUrl
API operasi GetDashboardEmbedUrl
dan untuk menyematkan dasbor dan QuickSight konsol, tetapi tidak berisi kemampuan penyematan terbaru. Untuk informasi selengkapnya tentang penyematan menggunakan API operasi lama, lihatMenyematkan analitik menggunakan operasi GetDashboardEmbedURL dan GetSessionEmbedURL API.
Berlaku untuk: Enterprise Edition |
Pemirsa yang dituju: QuickSight Pengembang Amazon |
Dengan edisi Enterprise, selain menyediakan dasbor hanya-baca, Anda juga dapat memberikan pengalaman QuickSight konsol Amazon di portal penulisan bermerek khusus. Dengan menggunakan pendekatan ini, Anda mengizinkan pengguna membuat sumber data, kumpulan data, dan analisis. Di antarmuka yang sama, mereka dapat membuat, menerbitkan, dan melihat dasbor. Jika Anda ingin membatasi beberapa izin tersebut, Anda juga dapat melakukannya.
Pengguna yang mengakses QuickSight melalui konsol tertanam harus menjadi bagian dari kohort keamanan penulis atau admin. Pembaca tidak memiliki akses yang cukup untuk menggunakan QuickSight konsol untuk penulisan, terlepas dari apakah itu disematkan atau bagian dari konsol. AWS Management Console Namun, penulis dan admin masih dapat mengakses dasbor yang disematkan. Jika Anda ingin membatasi izin untuk beberapa fitur authoring, Anda dapat menambahkan profil izin khusus kepada pengguna dengan operasi. UpdateUserAPI Gunakan RegisterUserAPIoperasi untuk menambahkan pengguna baru dengan profil izin khusus terlampir. Untuk informasi selengkapnya, lihat bagian berikut:
-
Untuk informasi tentang membuat peran kustom dengan menentukan izin konsol kustom, lihat Menyesuaikan Akses ke Konsol. QuickSight
-
Untuk informasi tentang menambahkan merek Anda sendiri ke QuickSight konsol yang disematkan, lihat Menggunakan Tema di QuickSight dan APIOperasi QuickSight Tema.
Di bagian berikut, Anda dapat menemukan informasi terperinci tentang cara mengatur QuickSight dasbor Amazon yang disematkan untuk pengguna terdaftar.
Topik
Langkah 1: Siapkan izin
Di bagian berikut, Anda dapat mengetahui cara mengatur izin untuk aplikasi backend atau server web. Tugas ini membutuhkan akses administratif keIAM.
Setiap pengguna yang mengakses QuickSight mengasumsikan peran yang memberi mereka QuickSight akses Amazon dan izin ke sesi konsol. Untuk memungkinkan hal ini, buat IAM peran di AWS akun Anda. Kaitkan IAM kebijakan dengan peran untuk memberikan izin kepada pengguna mana pun yang mengasumsikannya. Tambahkan quicksight:RegisterUser
izin untuk memastikan bahwa pembaca dapat mengakses QuickSight dengan cara hanya-baca, dan tidak memiliki akses ke data atau kemampuan pembuatan lainnya. IAMPeran tersebut juga perlu memberikan izin untuk mengambil sesi konsol. URLs Untuk ini, Anda menambahkanquicksight:GenerateEmbedUrlForRegisteredUser
.
Anda dapat membuat kondisi dalam IAM kebijakan Anda yang membatasi domain yang dapat dicantumkan pengembang dalam AllowedDomains
parameter GenerateEmbedUrlForAnonymousUser
API operasi. AllowedDomains
Parameter adalah parameter opsional. Ini memberi Anda sebagai pengembang opsi untuk mengganti domain statis yang dikonfigurasi di menu Kelola. QuickSight Sebagai gantinya, Anda dapat mencantumkan hingga tiga domain atau subdomain yang dapat mengakses yang dihasilkan. URL Ini kemudian URL disematkan di situs web yang Anda buat. Hanya domain yang tercantum dalam parameter yang dapat mengakses dasbor yang disematkan. Tanpa kondisi ini, Anda dapat membuat daftar domain apa pun di internet dalam AllowedDomains
parameter.
Kebijakan contoh berikut memberikan izin ini.
{ "Version": "2012-10-17", "Statement": [ { "Action": "quicksight:RegisterUser", "Resource": "*", "Effect": "Allow" }, { "Effect": "Allow", "Action": [ "quicksight:GenerateEmbedUrlForRegisteredUser" ], "Resource": [ "arn:
partition
:quicksight:region
:accountId
:user/namespace
/userName
" ], "Condition": { "ForAllValues:StringEquals": { "quicksight:AllowedEmbeddingDomains": [ "https://my.static.domain1.com", "https://*.my.static.domain2.com" ] } } } ] }
Kebijakan contoh berikut memberikan izin untuk mengambil sesi URL konsol. Anda dapat menggunakan kebijakan tanpa quicksight:RegisterUser
jika Anda membuat pengguna sebelum mereka mengakses sesi yang disematkan.
{ "Version": "2012-10-17", "Statement": [ { "Effect": "Allow", "Action": [ "quicksight:GenerateEmbedUrlForRegisteredUser" ], "Resource": [ "arn:
partition
:quicksight:region
:accountId
:user/namespace
/userName
" ], "Condition": { "ForAllValues:StringEquals": { "quicksight:AllowedEmbeddingDomains": [ "https://my.static.domain1.com", "https://*.my.static.domain2.com" ] } } } ] }
Terakhir, IAM identitas aplikasi Anda harus memiliki kebijakan kepercayaan yang terkait dengannya untuk memungkinkan akses ke peran yang baru saja Anda buat. Ini berarti bahwa ketika pengguna mengakses aplikasi Anda, aplikasi Anda dapat mengambil peran atas nama pengguna dan menyediakan pengguna. QuickSight Contoh berikut menunjukkan contoh kebijakan kepercayaan.
{ "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" } ] }
Untuk informasi selengkapnya mengenai kebijakan kepercayaan untuk OpenID Connect atau SAML autentikasi, lihat bagian Panduan Pengguna berikut: IAM
Langkah 2: Hasilkan URL dengan kode otentikasi terlampir
Di bagian berikut, Anda dapat mengetahui cara mengautentikasi pengguna Anda dan mendapatkan sesi konsol yang dapat disematkan URL di server aplikasi Anda.
Saat pengguna mengakses aplikasi Anda, aplikasi akan mengambil IAM peran tersebut atas nama pengguna. Kemudian menambahkan pengguna ke QuickSight, jika pengguna itu belum ada. Selanjutnya, ia melewati pengenal sebagai ID sesi peran unik.
Melakukan langkah-langkah yang dijelaskan memastikan bahwa setiap penampil sesi konsol disediakan secara unik. QuickSight Ini juga memberlakukan pengaturan per pengguna, seperti keamanan tingkat baris dan default dinamis untuk parameter.
Contoh berikut melakukan IAM otentikasi atas nama pengguna. Kode ini berjalan di server aplikasi Anda.
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)
Contoh berikut menunjukkan JavaScript (Node.js) yang dapat Anda gunakan di server aplikasi untuk menghasilkan sesi konsol tertanam. URL Anda dapat menggunakan ini URL di situs web atau aplikasi Anda untuk menampilkan sesi konsol.
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' }
Contoh berikut menunjukkan. NET/C # kode yang dapat Anda gunakan di server aplikasi untuk menghasilkan URL untuk sesi konsol tertanam. Anda dapat menggunakan ini URL di situs web atau aplikasi Anda untuk menampilkan konsol.
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); } } } }
Untuk mengambil peran, pilih salah satu API operasi AWS Security Token Service (AWS STS) berikut:
-
AssumeRole— Gunakan operasi ini ketika Anda menggunakan IAM identitas untuk mengambil peran.
-
AssumeRoleWithWebIdentity— Gunakan operasi ini saat Anda menggunakan penyedia identitas web untuk mengautentikasi pengguna Anda.
-
AssumeRoleWithSaml— Gunakan operasi ini saat Anda menggunakan SAML untuk mengautentikasi pengguna Anda.
Contoh berikut menunjukkan CLI perintah untuk mengatur IAM peran. Peran harus mengaktifkan izin untukquicksight:GenerateEmbedUrlForRegisteredUser
. Jika Anda mengambil just-in-time pendekatan untuk menambahkan pengguna saat pertama kali dibuka QuickSight, peran tersebut juga memerlukan izin yang diaktifkan. quicksight:RegisterUser
aws sts assume-role \ --role-arn "
arn:aws:iam::111122223333:role/embedding_quicksight_dashboard_role
" \ --role-session-namejohn.doe@example.com
assume-role
Operasi mengembalikan tiga parameter output: kunci akses, kunci rahasia, dan token sesi.
catatan
Jika Anda mendapatkan ExpiredToken
kesalahan saat memanggil AssumeRole
operasi, ini mungkin karena sebelumnya SESSION TOKEN
masih dalam variabel lingkungan. Hapus ini dengan mengatur variabel berikut:
-
AWS_ACCESS_ KEY _ID
-
AWS_SECRET_ACCESS_KEY
-
AWS_SESSION_TOKEN
Contoh berikut menunjukkan cara mengatur ketiga parameter ini diCLI. Jika Anda menggunakan mesin Microsoft Windows, gunakan set
sebagai gantinyaexport
.
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
"
Menjalankan perintah ini akan menetapkan ID sesi peran pengguna yang mengunjungi situs web Andaembedding_quicksight_console_session_role/john.doe@example.com
. ID sesi peran terdiri dari nama peran dari role-arn
dan role-session-name
nilainya. Menggunakan ID sesi peran unik untuk setiap pengguna memastikan bahwa izin yang sesuai ditetapkan untuk setiap pengguna. Ini juga mencegah pembatasan akses pengguna. Throttling adalah fitur keamanan yang mencegah pengguna yang sama mengakses QuickSight dari beberapa lokasi.
ID sesi peran juga menjadi nama pengguna di QuickSight. Anda dapat menggunakan pola ini untuk menyediakan pengguna Anda QuickSight sebelumnya, atau untuk menyediakannya saat pertama kali mereka mengakses sesi konsol.
Contoh berikut menunjukkan CLI perintah yang dapat Anda gunakan untuk menyediakan pengguna. Untuk informasi selengkapnya tentang RegisterUserDescribeUser,, dan QuickSight API operasi lainnya, lihat QuickSight APIReferensi.
aws quicksight register-user \ --aws-account-id
111122223333
\ --namespacedefault
\ --identity-typeIAM
\ --iam-arn "arn:aws:iam::111122223333:role/embedding_quicksight_dashboard_role
" \ --user-roleREADER
\ --user-namejhnd
\ --session-name "john.doe@example.com
" \ --emailjohn.doe@example.com
\ --regionus-east-1
\ --custom-permissions-nameTeamA1
Jika pengguna diautentikasi melalui Microsoft AD, Anda tidak perlu menggunakannya RegisterUser
untuk mengaturnya. Sebaliknya, mereka harus secara otomatis berlangganan saat pertama kali mereka mengakses QuickSight. Untuk pengguna Microsoft AD, Anda dapat menggunakan DescribeUser
untuk mendapatkan penggunaARN.
Saat pertama kali pengguna mengakses QuickSight, Anda juga dapat menambahkan pengguna ini ke grup yang sesuai. Contoh berikut menunjukkan CLI perintah untuk menambahkan pengguna ke grup.
aws quicksight create-group-membership \ --aws-account-id=
111122223333
\ --namespace=default
\ --group-name=financeusers
\ --member-name="embedding_quicksight_dashboard_role/john.doe@example.com
"
Anda sekarang memiliki pengguna aplikasi Anda yang juga pengguna QuickSight, dan yang memiliki akses ke sesi QuickSight konsol.
Terakhir, untuk mendapatkan tanda tangan URL untuk sesi konsol, panggil generate-embed-url-for-registered-user
dari server aplikasi. Ini mengembalikan sesi konsol yang dapat disematkan. URL Contoh berikut menunjukkan cara membuat untuk sesi konsol tertanam menggunakan panggilan sisi server URL untuk pengguna yang diautentikasi melalui AWS Managed Microsoft AD atau sistem masuk tunggal (Pusat Identitas). IAM
aws quicksight generate-embed-url-for-registered-user \ --aws-account-id
111122223333
\ --entry-pointthe-url-for--the-console-session
\ --session-lifetime-in-minutes600
\ --user-arnarn:aws:quicksight:us-east-1:111122223333:user/default/embedding_quicksight_dashboard_role/embeddingsession
--allowed-domains '["domain1
","domain2
"]' \ --experience-configuration QuickSightConsole={InitialPath="/start
"}
Untuk informasi selengkapnya tentang penggunaan operasi ini, lihat GenerateEmbedUrlForRegisteredUser. Anda dapat menggunakan ini dan API operasi lainnya dalam kode Anda sendiri.
Langkah 3: Sematkan sesi konsol URL
Di bagian berikut, Anda dapat mengetahui bagaimana Anda dapat menggunakan Amazon QuickSight Embedding SDK
-
Tempatkan sesi konsol pada HTML halaman.
-
Masukkan parameter ke sesi konsol.
-
Menangani status kesalahan dengan pesan yang disesuaikan dengan aplikasi Anda.
Panggil GenerateEmbedUrlForRegisteredUser
API operasi untuk menghasilkan URL yang dapat Anda sematkan di aplikasi Anda. URLIni berlaku selama 5 menit, dan sesi yang dihasilkan berlaku hingga 10 jam. APIOperasi menyediakan URL dengan sebuah auth_code
yang memungkinkan sesi single-sign on.
Berikut ini menunjukkan contoh respons darigenerate-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" }
Sematkan sesi konsol ini di halaman web Anda dengan menggunakan QuickSight Embedding SDK
Domain yang akan menjadi tuan rumah dasbor tertanam harus ada di daftar izinkan, daftar domain yang disetujui untuk langganan Anda Amazon QuickSight . Persyaratan ini melindungi data Anda dengan menjaga domain yang tidak disetujui dari hosting dasbor tertanam. Untuk informasi selengkapnya tentang menambahkan domain untuk konsol yang disematkan, lihatIzinkan daftar domain saat runtime dengan QuickSight API.
Contoh berikut menunjukkan bagaimana menggunakan yang dihasilkanURL. Kode ini dibuat di server aplikasi Anda.
<!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>
Agar contoh ini berfungsi, pastikan untuk menggunakan Amazon QuickSight Embedding SDK untuk memuat sesi konsol yang disematkan di situs web Anda menggunakan JavaScript. Untuk mendapatkan salinan Anda, lakukan salah satu hal berikut:
-
Unduh QuickSight Penyematan Amazon SDK
dari GitHub. Repositori ini dikelola oleh sekelompok pengembang. QuickSight -
Unduh versi penyematan SDK terbaru dari https://www.npmjs.com/package/amazon-quicksight-embedding-sdk
. -
Jika Anda menggunakan
npm
untuk JavaScript dependensi, unduh dan instal dengan menjalankan perintah berikut.npm install amazon-quicksight-embedding-sdk