Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.
Incorporamento di QuickSight immagini per gli utenti registrati
Si applica a: Enterprise Edition |
Destinatari: QuickSight sviluppatori Amazon |
Nelle sezioni seguenti, puoi trovare informazioni dettagliate su come configurare gli QuickSight elementi visivi Amazon incorporati per gli utenti registrati di Amazon QuickSight.
Argomenti
Fase 1: Configurazione delle autorizzazioni
Nella sezione seguente viene descritto come configurare le autorizzazioni per l'applicazione di back-end o il server Web. Questa attività richiede l'accesso amministrativo a. IAM
Ogni utente che accede a un oggetto visivo assume un ruolo che gli consente QuickSight l'accesso e le autorizzazioni di accesso ad Amazon. Per renderlo possibile, crea un IAM ruolo nel tuo. Account AWS Associa una IAM policy al ruolo per fornire le autorizzazioni a qualsiasi utente che la assume. Il IAM ruolo deve fornire le autorizzazioni per recuperare l'incorporamento URLs per un pool di utenti specifico. Con l'aiuto del carattere jolly *, puoi concedere le autorizzazioni per generare un file URL per tutti gli utenti in uno spazio dei nomi specifico o per un sottoinsieme di utenti in namespace specifici. Per questo, aggiungi quicksight:GenerateEmbedUrlForRegisteredUser
.
Puoi creare una condizione nella tua IAM policy che limiti i domini che gli sviluppatori possono elencare nel parametro di un'operazione. AllowedDomains
GenerateEmbedUrlForAnonymousUser
API Il parametro AllowedDomains
è un parametro facoltativo. In qualità di sviluppatore, ti offre la possibilità di sovrascrivere i domini statici configurati nel menu Gestisci. QuickSight Puoi invece elencare fino a tre domini o sottodomini che possono accedere a un file generato. URL Questo URL viene quindi incorporato nel sito Web che crei. Solo i domini elencati nel parametro possono accedere al pannello di controllo incorporato. Senza questa condizione, nel parametro AllowedDomains
puoi elencare qualsiasi dominio su Internet.
Per limitare i domini che gli sviluppatori possono utilizzare con questo parametro, aggiungi una AllowedEmbeddingDomains
condizione alla tua IAM politica. Per ulteriori informazioni sul AllowedDomains
parametro, GenerateEmbedUrlForRegisteredUserconsulta Amazon QuickSight API Reference.
Queste autorizzazioni sono fornite dalla seguente policy di esempio.
{ "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" ] } } } ] }
Inoltre, se stai creando utenti alle prime armi che saranno QuickSight lettori di Amazon, assicurati di aggiungere l'quicksight:RegisterUser
autorizzazione nella politica.
La seguente politica di esempio fornisce l'autorizzazione a recuperare un incorporamento URL per gli utenti alle prime armi che devono diventare lettori. QuickSight
{ "Version": "2012-10-17", "Statement": [ { "Action": "quicksight:RegisterUser", "Resource": "*", "Effect": "Allow" }, { "Effect": "Allow", "Action": [ "quicksight:GenerateEmbedUrlForRegisteredUser" ], "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" ] } } } ] }
Infine, all'IAMidentità dell'applicazione deve essere associata una politica di attendibilità per consentire l'accesso al ruolo appena creato. Ciò significa che quando un utente accede all'applicazione, quest'ultima può assumere il ruolo per conto dell'utente e fornire all' QuickSightutente l'accesso. Di seguito è mostrata una policy di attendibilità di esempio.
{ "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" } ] }
Per ulteriori informazioni sulle politiche di attendibilità per OpenID Connect o SAML l'autenticazione, consulta le seguenti sezioni della Guida per l'IAMutente:
Fase 2: Generare il URL file con il codice di autenticazione allegato
Nella sezione seguente, puoi scoprire come autenticare il tuo QuickSight utente e ottenere la visualizzazione incorporabile URL sul tuo server delle applicazioni. Se intendi incorporare elementi visivi per tipi di QuickSight identità IAM o tipi di identità, condividi l'elemento visivo con gli utenti. QuickSight
Quando un QuickSight utente accede alla tua app, l'app assume il IAM ruolo per conto dell' QuickSight utente. Quindi aggiunge l'utente a QuickSight, se quell' QuickSight utente non esiste già. In seguito, sarà necessario passare un identificatore come l'ID della sessione del ruolo univoco.
L'esecuzione dei passaggi descritti garantisce che ogni visualizzatore dell'immagine venga fornito in modo univoco. QuickSight Applica inoltre le impostazioni per utente, ad esempio la sicurezza a livello di riga e le impostazioni predefinite dinamiche per i parametri.
Gli esempi seguenti eseguono l'IAMautenticazione per conto dell' QuickSight utente. Questo codice viene eseguito sul server delle applicazioni.
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.DashboardVisualId; import com.amazonaws.services.quicksight.model.GenerateEmbedUrlForRegisteredUserRequest; import com.amazonaws.services.quicksight.model.GenerateEmbedUrlForRegisteredUserResult; import com.amazonaws.services.quicksight.model.RegisteredUserDashboardVisualEmbeddingConfiguration; import com.amazonaws.services.quicksight.model.RegisteredUserEmbeddingExperienceConfiguration; import java.util.List; /** * Class to call QuickSight AWS SDK to get url for Visual embedding. */ public class GenerateEmbedUrlForRegisteredUserTest { private final AmazonQuickSight quickSightClient; public GenerateEmbedUrlForRegisteredUserTest() { 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 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 String userArn // Registered user arn of the user that you want to provide embedded visual. Refer to Get Embed Url section in developer portal to find out how to get user arn for a QuickSight user. ) throws Exception { final DashboardVisualId dashboardVisual = new DashboardVisualId() .withDashboardId(dashboardId) .withSheetId(sheetId) .withVisualId(visualId); final RegisteredUserDashboardVisualEmbeddingConfiguration registeredUserDashboardVisualEmbeddingConfiguration = new RegisteredUserDashboardVisualEmbeddingConfiguration() .withInitialDashboardVisualId(dashboardVisual); final RegisteredUserEmbeddingExperienceConfiguration registeredUserEmbeddingExperienceConfiguration = new RegisteredUserEmbeddingExperienceConfiguration() .withDashboardVisual(registeredUserDashboardVisualEmbeddingConfiguration); final GenerateEmbedUrlForRegisteredUserRequest generateEmbedUrlForRegisteredUserRequest = new GenerateEmbedUrlForRegisteredUserRequest() .withAwsAccountId(accountId) .withUserArn(userArn) .withExperienceConfiguration(registeredUserEmbeddingExperienceConfiguration) .withAllowedDomains(allowedDomains); final GenerateEmbedUrlForRegisteredUserResult generateEmbedUrlForRegisteredUserResult = quickSightClient.generateEmbedUrlForRegisteredUser(generateEmbedUrlForRegisteredUserRequest); return generateEmbedUrlForRegisteredUserResult.getEmbedUrl(); } }
global.fetch = require('node-fetch'); const AWS = require('aws-sdk'); function generateEmbedUrlForRegisteredUser( 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 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": { "DashboardVisual": { "InitialDashboardVisualId": { "DashboardId": dashboardId, "SheetId": sheetId, "VisualId": visualId } } }, "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 sts = boto3.client('sts') # Function to generate embedded URL # accountId: AWS account ID # dashboardId: Dashboard ID to embed # sheetId: SHEET ID to embed from the dashboard # visualId: Id for the Visual you want to embedded from the dashboard sheet. # 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, dashboardId, sheetId, visualId, 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 = { 'DashboardVisual': { 'InitialDashboardVisualId': { 'DashboardId': dashboardId, 'SheetId': sheetId, 'VisualId': visualId } }, }, 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)
L'esempio seguente mostra il file JavaScript (Node.js) che è possibile utilizzare sul server dell'app URL per generare il pannello di controllo incorporato. Puoi utilizzarlo URL nel tuo sito Web o nella tua app per visualizzare la dashboard.
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': { 'DashboardVisual': { 'InitialDashboardVisualId': { 'DashboardId': 'dashboard_id', 'SheetId': 'sheet_id', 'VisualId': 'visual_id' } } }, '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/sheets/12345/visuals/67890...", "RequestId": "7bee030e-f191-45c4-97fe-d9faf0e03713" }
L'esempio seguente mostra il. NETCodice /C # che puoi utilizzare sul server dell'app per generare il codice URL per la dashboard incorporata. Puoi utilizzarlo URL nel tuo sito web o nella tua app per visualizzare la dashboard.
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 { DashboardVisualId dashboardVisual = new DashboardVisualId { DashboardId = "dashboard_id", SheetId = "sheet_id", VisualId = "visual_id" }; RegisteredUserDashboardVisualEmbeddingConfiguration registeredUserDashboardVisualEmbeddingConfiguration = new RegisteredUserDashboardVisualEmbeddingConfiguration { InitialDashboardVisualId = dashboardVisual }; RegisteredUserEmbeddingExperienceConfiguration registeredUserEmbeddingExperienceConfiguration = new RegisteredUserEmbeddingExperienceConfiguration { DashboardVisual = registeredUserDashboardVisualEmbeddingConfiguration }; 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); } } } }
Per assumere il ruolo, scegli una delle seguenti API operazioni AWS Security Token Service (AWS STS):
-
AssumeRole— Utilizzate questa operazione quando utilizzate un'IAMidentità per assumere il ruolo.
-
AssumeRoleWithWebIdentity— Utilizzate questa operazione quando utilizzate un provider di identità web per autenticare l'utente.
-
AssumeRoleWithSaml— Utilizza questa operazione quando utilizzi SAML per autenticare i tuoi utenti.
L'esempio seguente mostra il CLI comando per impostare il IAM ruolo. Il ruolo deve avere le autorizzazioni abilitate per quicksight:GenerateEmbedUrlForRegisteredUser
. Se stai adottando un just-in-time approccio per aggiungere utenti quando aprono per la prima volta una dashboard, per quicksight:RegisterUser
il ruolo è necessario abilitare anche le autorizzazioni.
aws sts assume-role \ --role-arn "
arn:aws:iam::111122223333:role/embedding_quicksight_visual_role
" \ --role-session-namejohn.doe@example.com
L'operazione assume-role
restituisce tre parametri di output: la chiave di accesso, la chiave segreta e il token della sessione.
Nota
Se si verifica un errore ExpiredToken
durante la chiamata all'operazione AssumeRole
, vuol dire che il SESSION TOKEN
precedente è ancora presente nelle variabili di ambiente. Cancellala impostando le seguenti variabili:
-
AWS_ACCESS_ _ID KEY
-
AWS_SECRET_ACCESS_KEY
-
AWS_SESSION_TOKEN
L'esempio seguente mostra come impostare questi tre parametri in. CLI Se usi un computer Microsoft Windows, utilizza set
invece di 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
"
L'esecuzione di questi comandi imposta l'ID della sessione del ruolo dell'utente che visita la pagina del tuo sito Web suembedding_quicksight_visual_role/john.doe@example.com
. L'ID della sessione del ruolo è costituito dal nome del ruolo di role-arn
e dal valore role-session-name
. L'utilizzo dell'ID della sessione del ruolo univoco per ciascun utente garantisce che le autorizzazioni appropriate siano impostate per ogni utente. Impedisce inoltre il throttling dell'accesso degli utenti. La limitazione è una funzionalità di sicurezza che impedisce allo stesso utente di accedere QuickSight da più postazioni.
L'ID della sessione del ruolo diventa anche il nome utente in. QuickSight Puoi utilizzare questo modello per effettuare il provisioning degli utenti in QuickSight anticipo o per assegnarli la prima volta che accedono alla dashboard.
L'esempio seguente mostra il CLI comando che è possibile utilizzare per effettuare il provisioning di un utente. Per ulteriori informazioni e altre QuickSight API operazioni RegisterUserDescribeUser, consultate il QuickSight APIReference.
aws quicksight register-user \ --aws-account-id
111122223333
\ --namespacedefault
\ --identity-typeIAM
\ --iam-arn "arn:aws:iam::111122223333:role/embedding_quicksight_visual_role
" \ --user-roleREADER
\ --user-namejhnd
\ --session-name "john.doe@example.com
" \ --emailjohn.doe@example.com
\ --regionus-east-1
\ --custom-permissions-nameTeamA1
Se l'utente viene autenticato tramite Microsoft AD, non è necessario utilizzare RegisterUser
per configurarlo. Dovrebbero invece essere sottoscritti automaticamente la prima volta che accedono QuickSight. Per gli utenti di Microsoft AD, è possibile utilizzare DescribeUser
per ottenere l'utenteARN.
La prima volta che un utente accede QuickSight, puoi anche aggiungere questo utente al gruppo con cui è condivisa l'immagine. L'esempio seguente mostra il CLI comando per aggiungere un utente a un gruppo.
aws quicksight create-group-membership \ --aws-account-id=
111122223333
\ --namespace=default \ --group-name=financeusers
\ --member-name="embedding_quicksight_visual_role/john.doe@example.com
"
Ora hai un utente della tua app che è anche un utente di QuickSight e che ha accesso alla grafica.
Infine, per farti firmare URL l'immagine, chiama generate-embed-url-for-registered-user
dal server dell'app. Ciò restituisce l'immagine incorporabile. URL L'esempio seguente mostra come generare il file URL per un elemento visivo incorporato utilizzando una chiamata lato server per gli utenti autenticati tramite AWS Managed Microsoft AD o Single Sign-On (Identity Center). IAM
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_visual_role/embeddingsession \ --allowed-domains '["domain1
","domain2
"]' \ --experience-configuration 'DashboardVisual={InitialDashboardVisualId={DashboardId=dashboard_id
,SheetId=sheet_id
,VisualId=visual_id
}}'
Per ulteriori informazioni sull'utilizzo di questa operazione, vedere GenerateEmbedUrlForRegisteredUser. È possibile utilizzare questa e altre API operazioni nel proprio codice.
Fase 3: Incorpora l'immagine URL
Nella sezione seguente, puoi scoprire come utilizzare Amazon QuickSight Embedding SDK (JavaScript) per incorporare
-
Posiziona l'immagine su una HTML pagina.
-
Passa i parametri all'elemento visivo.
-
Gestisci stati di errore con messaggi personalizzati per l'applicazione.
Chiama l'GenerateEmbedUrlForRegisteredUser
APIoperazione per generare il URL file che puoi incorporare nella tua app. URLÈ valido per 5 minuti e la sessione risultante è valida per un massimo di 10 ore. L'APIoperazione fornisce una sessione auth_code
che URL abilita una sessione Single Sign-On.
Di seguito viene mostrata una risposta di esempio da generate-embed-url-for-registered-user
.
In questo esempio è URL quello che usi per accedere al tuo QuickSight account.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" }
Incorpora questa immagine nella tua pagina web utilizzando l'QuickSight incorporamento SDK
Il dominio che ospiterà gli elementi visivi e le dashboard incorporati deve essere incluso nell'elenco dei domini consentiti, l'elenco dei domini approvati per l'abbonamento. Amazon QuickSight Questo requisito protegge i tuoi dati impedendo ai domini non approvati di ospitare elementi visivi e pannelli di controllo incorporati. Per ulteriori informazioni sull'aggiunta di domini per gli elementi visivi e i pannelli di controllo incorporati, consulta Consenti l'inserimento di domini in fase di esecuzione con QuickSight API.
L'esempio seguente mostra come utilizzare il generato. URL Questo codice viene generato sul server delle applicazioni.
<!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>
Affinché questo esempio funzioni, assicurati di utilizzare Amazon QuickSight Embedding SDK per caricare la grafica incorporata sul tuo sito Web utilizzando JavaScript. Per ottenere la tua copia, procedi in uno dei seguenti modi:
-
Scarica Amazon QuickSight Embedding SDK
da GitHub. Questo repository è gestito da un gruppo di QuickSight sviluppatori. -
Scarica l'ultima SDK versione di incorporamento da. https://www.npmjs.com/package/amazon-quicksight-embedding-sdk
-
Se lo utilizzi
npm
per JavaScript le dipendenze, scaricalo e installalo eseguendo il comando seguente.npm install amazon-quicksight-embedding-sdk