Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.
Berlaku untuk: Enterprise Edition |
Pemirsa yang dituju: QuickSight Pengembang Amazon |
Di bagian berikut, Anda dapat menemukan informasi terperinci tentang cara mengatur QuickSight visual Amazon yang disematkan untuk pengguna anonim (tidak terdaftar).
Topik
Langkah 1: Siapkan izin
Berlaku untuk: Enterprise Edition |
Pemirsa yang dituju: QuickSight Pengembang Amazon |
Di bagian berikut, Anda dapat mengetahui cara mengatur izin untuk aplikasi backend atau server web. Tugas ini membutuhkan akses administratif ke IAM.
Setiap pengguna yang mengakses visual mengasumsikan peran yang memberi mereka QuickSight akses Amazon dan izin ke visual. Untuk memungkinkan ini, buat peran IAM di Anda Akun AWS. Kaitkan kebijakan IAM dengan peran untuk memberikan izin kepada pengguna mana pun yang mengasumsikannya.
Anda dapat membuat kondisi dalam kebijakan IAM yang membatasi domain yang dapat dicantumkan developer dalam AllowedDomains
parameter operasi GenerateEmbedUrlForAnonymousUser
API. 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 URL yang dihasilkan. URL ini kemudian 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.
Untuk membatasi domain yang dapat digunakan pengembang dengan parameter ini, tambahkan AllowedEmbeddingDomains
kondisi ke kebijakan IAM Anda. Untuk informasi selengkapnya tentang AllowedDomains
parameter, lihat GenerateEmbedUrlForAnonymousUserdi Referensi Amazon QuickSight API.
Kebijakan contoh berikut memberikan izin ini untuk digunakan. GenerateEmbedUrlForAnonymousUser
Agar pendekatan ini berhasil, Anda juga memerlukan paket sesi, atau harga kapasitas sesi, untuk Anda Akun AWS. Jika tidak, ketika pengguna mencoba mengakses visual, kesalahan UnsupportedPricingPlanException
dikembalikan.
{ "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" ] } } } }
Identitas IAM 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 untuk membuka visual. 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, lihat Kredensil keamanan sementara di IAM di Panduan Pengguna IAM.
Langkah 2: Hasilkan URL dengan kode otentikasi terlampir
Berlaku untuk: Enterprise Edition |
Pemirsa yang dituju: QuickSight Pengembang Amazon |
Di bagian berikut, Anda dapat menemukan cara mengautentikasi atas nama pengunjung anonim dan mendapatkan URL visual yang dapat disematkan di server aplikasi Anda.
Saat pengguna mengakses aplikasi Anda, aplikasi akan mengambil peran IAM atas nama pengguna. Kemudian menambahkan pengguna ke QuickSight, jika pengguna itu belum ada. Selanjutnya, ia melewati pengenal sebagai ID sesi peran unik.
Contoh berikut melakukan otentikasi IAM atas nama pengguna. Ini melewati pengenal sebagai ID sesi peran unik. 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.AnonymousUserDashboardVisualEmbeddingConfiguration;
import com.amazonaws.services.quicksight.model.AnonymousUserEmbeddingExperienceConfiguration;
import com.amazonaws.services.quicksight.model.DashboardVisualId;
import com.amazonaws.services.quicksight.model.GenerateEmbedUrlForAnonymousUserRequest;
import com.amazonaws.services.quicksight.model.GenerateEmbedUrlForAnonymousUserResult;
import com.amazonaws.services.quicksight.model.SessionTag;
import java.util.List;
/**
* Class to call QuickSight AWS SDK to get url for Visual embedding.
*/
public class GenerateEmbedUrlForAnonymousUserTest {
private final AmazonQuickSight quickSightClient;
public GenerateEmbedUrlForAnonymousUserTest() {
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 getEmbedUrl(
final String accountId, // AWS Account ID
final String namespace, // Anonymous embedding required specifying a valid namespace for which you want the enbedding URL
final List<String> authorizedResourceArns, // Dashboard arn list of dashboard visuals to embed
final String dashboardId, // Dashboard ID of the dashboard to embed
final String sheetId, // Sheet ID of the sheet to embed
final String visualId, // Visual ID of the visual to embed
final List<String> allowedDomains, // Runtime allowed domains for embedding
final List<SessionTag> sessionTags // Session tags used for row-level security
) throws Exception {
final DashboardVisualId dashboardVisual = new DashboardVisualId()
.withDashboardId(dashboardId)
.withSheetId(sheetId)
.withVisualId(visualId);
final AnonymousUserDashboardVisualEmbeddingConfiguration anonymousUserDashboardVisualEmbeddingConfiguration
= new AnonymousUserDashboardVisualEmbeddingConfiguration()
.withInitialDashboardVisualId(dashboardVisual);
final AnonymousUserEmbeddingExperienceConfiguration anonymousUserEmbeddingExperienceConfiguration
= new AnonymousUserEmbeddingExperienceConfiguration()
.withDashboardVisual(anonymousUserDashboardVisualEmbeddingConfiguration);
final GenerateEmbedUrlForAnonymousUserRequest generateEmbedUrlForAnonymousUserRequest
= new GenerateEmbedUrlForAnonymousUserRequest()
.withAwsAccountId(accountId)
.withNamespace(namespace)
// authorizedResourceArns should contain ARN of dashboard used below in ExperienceConfiguration
.withAuthorizedResourceArns(authorizedResourceArns)
.withExperienceConfiguration(anonymousUserEmbeddingExperienceConfiguration)
.withAllowedDomains(allowedDomains)
.withSessionTags(sessionTags)
.withSessionLifetimeInMinutes(600L);
final GenerateEmbedUrlForAnonymousUserResult generateEmbedUrlForAnonymousUserResult
= quickSightClient.generateEmbedUrlForAnonymousUser(generateEmbedUrlForAnonymousUserRequest);
return generateEmbedUrlForAnonymousUserResult.getEmbedUrl();
}
}
global.fetch = require('node-fetch');
const AWS = require('aws-sdk');
function generateEmbedUrlForAnonymousUser(
accountId, // Your AWS account ID
dashboardId, // Dashboard ID to which the constructed url points
sheetId, // Sheet ID to which the constructed url points
visualId, // Visual ID to which the constructed url points
quicksightNamespace, // valid namespace where you want to do embedding
authorizedResourceArns, // dashboard arn list of dashboard visuals 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 = {
"DashboardVisual": {
"InitialDashboardVisualId": {
"DashboardId": dashboardId,
"SheetId": sheetId,
"VisualId": visualId
}
}
};
const generateEmbedUrlForAnonymousUserParams = {
"AwsAccountId": accountId,
"Namespace": quicksightNamespace,
// authorizedResourceArns should contain ARN of dashboard used below in ExperienceConfiguration
"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: DASHBOARD ARN LIST TO EMBED
# allowedDomains: RUNTIME ALLOWED DOMAINS FOR EMBEDDING
# experienceConfiguration: DASHBOARD ID, SHEET ID and VISUAL ID TO WHICH THE CONSTRUCTED URL POINTS
# Example experienceConfig -> 'DashboardVisual': {
# 'InitialDashboardVisualId': {
# 'DashboardId': 'dashboardId',
# 'SheetId': 'sheetId',
# 'VisualId': 'visualId'
# }
# },
# 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)
Contoh berikut menunjukkan JavaScript (Node.js) yang dapat Anda gunakan di server aplikasi untuk menghasilkan URL untuk dasbor yang disematkan. Anda dapat menggunakan URL ini di situs web atau aplikasi Anda untuk menampilkan dasbor.
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 should contain ARN of dashboard used below in ExperienceConfiguration
'AuthorizedResourceArns': authorizedResourceArns,
'ExperienceConfiguration': {
'DashboardVisual': {
'InitialDashboardVisualId': {
'DashboardId': 'dashboard_id',
'SheetId': 'sheet_id',
'VisualId': 'visual_id'
}
}
},
'AllowedDomains': allowedDomains,
'SessionTags': sessionTags,
'SessionLifetimeInMinutes': 600
}, 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" }
Contoh berikut menunjukkan kode.NET/C# yang dapat Anda gunakan di server aplikasi untuk membuat URL dasbor yang disematkan. Anda dapat menggunakan URL ini di situs web atau aplikasi Anda untuk menampilkan dasbor.
using System;
using Amazon.QuickSight;
using Amazon.QuickSight.Model;
namespace GenerateDashboardEmbedUrlForAnonymousUser
{
class Program
{
static void Main(string[] args)
{
var quicksightClient = new AmazonQuickSightClient(
AccessKey,
SecretAccessKey,
SessionToken,
Amazon.RegionEndpoint.USEast1);
try
{
DashboardVisualId dashboardVisual = new DashboardVisualId
{
DashboardId = "dashboard_id",
SheetId = "sheet_id",
VisualId = "visual_id"
};
AnonymousUserDashboardVisualEmbeddingConfiguration anonymousUserDashboardVisualEmbeddingConfiguration
= new AnonymousUserDashboardVisualEmbeddingConfiguration
{
InitialDashboardVisualId = dashboardVisual
};
AnonymousUserEmbeddingExperienceConfiguration anonymousUserEmbeddingExperienceConfiguration
= new AnonymousUserEmbeddingExperienceConfiguration
{
DashboardVisual = anonymousUserDashboardVisualEmbeddingConfiguration
};
Console.WriteLine(
quicksightClient.GenerateEmbedUrlForAnonymousUserAsync(new GenerateEmbedUrlForAnonymousUserRequest
{
AwsAccountId = "111222333444",
Namespace = default,
// authorizedResourceArns should contain ARN of dashboard used below in ExperienceConfiguration
AuthorizedResourceArns = { "dashboard_id" },
ExperienceConfiguration = anonymousUserEmbeddingExperienceConfiguration,
SessionTags = sessionTags,
SessionLifetimeInMinutes = 600,
}).Result.EmbedUrl
);
} catch (Exception ex) {
Console.WriteLine(ex.Message);
}
}
}
}
Untuk mengambil peran, pilih salah satu operasi API AWS Security Token Service (AWS STS) berikut:
-
AssumeRole— Gunakan operasi ini ketika Anda menggunakan identitas IAM untuk mengambil peran.
-
AssumeRoleWithWebIdentity— Gunakan operasi ini saat Anda menggunakan penyedia identitas web untuk mengautentikasi pengguna Anda.
-
AssumeRoleWithSaml— Gunakan operasi ini saat Anda menggunakan Security Assertion Markup Language (SAMP) untuk mengautentikasi pengguna Anda.
Contoh berikut menunjukkan perintah CLI untuk mengatur peran IAM. Peran harus mengaktifkan izin untukquicksight:GenerateEmbedUrlForAnonymousUser
.
aws sts assume-role \ --role-arn "
arn:aws:iam::11112222333:role/QuickSightEmbeddingAnonymousPolicy
" \ --role-session-nameanonymous caller
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 di CLI. 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_visual_role/QuickSightEmbeddingAnonymousPolicy
. 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 yang berkunjung. Itu juga membuat setiap sesi terpisah dan berbeda. Jika Anda menggunakan array server web, misalnya untuk load balancing, dan sesi terhubung kembali ke server yang berbeda, sesi baru dimulai.
Untuk mendapatkan URL yang ditandatangani untuk visual, panggil generate-embed-url-for-anynymous-user
dari server aplikasi. Ini mengembalikan URL visual yang dapat disematkan. Contoh berikut menunjukkan cara membuat URL untuk visual yang disematkan menggunakan panggilan sisi server untuk pengguna yang melakukan kunjungan anonim ke portal web atau aplikasi Anda.
aws quicksight generate-embed-url-for-anonymous-user \ --aws-account-id
111122223333
\ --namespacedefault-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
}}'
Untuk informasi selengkapnya tentang penggunaan operasi ini, lihat GenerateEmbedUrlForAnonymousUser. Anda dapat menggunakan ini dan operasi API lainnya dalam kode Anda sendiri.
Langkah 3: Sematkan URL visual
Berlaku untuk: Enterprise Edition |
Pemirsa yang dituju: QuickSight Pengembang Amazon |
Di bagian berikut, Anda dapat mengetahui bagaimana Anda dapat menggunakan QuickSight Embedding SDK
-
Tempatkan visual pada halaman HTML.
-
Masukkan parameter ke dalam visual.
-
Menangani status kesalahan dengan pesan yang disesuaikan dengan aplikasi Anda.
Panggil operasi GenerateEmbedUrlForAnonymousUser
API untuk menghasilkan URL yang dapat disematkan di aplikasi. URL ini berlaku selama 5 menit, dan sesi yang dihasilkan berlaku selama 10 jam. Operasi API menyediakan URL dengan kode otorisasi (auth) yang memungkinkan sesi masuk tunggal.
Berikut ini menunjukkan contoh respons darigenerate-embed-url-for-anonymous-user
.
Dalam contoh ini adalah URL yang Anda gunakan untuk mengakses QuickSight akun Anda.quicksightdomain
//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" }
Sematkan visual ini di halaman web Anda dengan menggunakan QuickSight Embedding SDK
Domain yang akan menjadi tuan rumah disematkan visual harus ada di daftar izinkan, daftar domain yang disetujui untuk Amazon QuickSight langganan Anda. Persyaratan ini melindungi data Anda dengan menjaga domain yang tidak disetujui dari hosting visual dan dasbor yang disematkan. Untuk informasi selengkapnya tentang menambahkan domain untuk visual dan dasbor yang disematkan, lihat. Izinkan daftar domain saat runtime dengan API QuickSight
Contoh berikut menunjukkan cara menggunakan URL yang dihasilkan. Kode ini berada di server aplikasi Anda.
<!DOCTYPE html>
<html>
<head>
<title>Visual 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 embedVisual = 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 = {
parameters: [
{
Name: 'country',
Values: ['United States'],
},
{
Name: 'states',
Values: [
'California',
'Washington'
]
}
],
locale: "en-US",
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 occured while rendering the experience. Error code:", messageEvent.message.errorCode);
break;
}
case 'PARAMETERS_CHANGED': {
console.log("Parameters changed. Changed parameters:", messageEvent.message.changedParameters);
break;
}
case 'SIZE_CHANGED': {
console.log("Size changed. New dimensions:", messageEvent.message);
break;
}
}
},
};
const embeddedVisualExperience = await embeddingContext.embedVisual(frameOptions, contentOptions);
const selectCountryElement = document.getElementById('country');
selectCountryElement.addEventListener('change', (event) => {
embeddedVisualExperience.setParameters([
{
Name: 'country',
Values: event.target.value
}
]);
});
};
</script>
</head>
<body onload="embedVisual()">
<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>
<!DOCTYPE html>
<html>
<head>
<title>Visual Embedding Example</title>
<!-- You can download the latest QuickSight embedding SDK version from https://www.npmjs.com/package/amazon-quicksight-embedding-sdk -->
<!-- Or you can do "npm install amazon-quicksight-embedding-sdk", if you use npm for javascript dependencies -->
<script src="./quicksight-embedding-js-sdk.min.js"></script>
<script type="text/javascript">
let embeddedVisualExperience;
function onVisualLoad(payload) {
console.log("Do something when the visual is fully loaded.");
}
function onError(payload) {
console.log("Do something when the visual fails loading");
}
function embedVisual() {
const containerDiv = document.getElementById("embeddingContainer");
const options = {
url: "<YOUR_EMBED_URL>", // replace this value with the url generated via embedding API
container: containerDiv,
parameters: {
country: "United States"
},
height: "700px",
width: "1000px",
locale: "en-US"
};
embeddedVisualExperience = QuickSightEmbedding.embedVisual(options);
embeddedVisualExperience.on("error", onError);
embeddedVisualExperience.on("load", onVisualLoad);
}
function onCountryChange(obj) {
embeddedVisualExperience.setParameters({country: obj.value});
}
</script>
</head>
<body onload="embedVisual()">
<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 visual yang disematkan di situs web Anda. JavaScript Untuk mendapatkan salinan Anda, lakukan salah satu hal berikut:
-
Unduh Amazon QuickSight Embedding SDK
dari. GitHub Repositori ini dikelola oleh sekelompok pengembang. QuickSight -
Unduh versi SDK QuickSight penyematan 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