Incorporamento di QuickSight dashboard per utenti registrati - Amazon QuickSight

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 dashboard per utenti registrati

Importante

Amazon QuickSight dispone di nuove operazioni API per incorporare l'analisi: GenerateEmbedUrlForAnonymousUser eGenerateEmbedUrlForRegisteredUser.

Puoi comunque utilizzare le operazioni GetDashboardEmbedUrl e le GetSessionEmbedUrl API per incorporare dashboard e QuickSight console, ma non contengono le funzionalità di incorporamento più recenti. Per ulteriori informazioni sull'incorporamento tramite le vecchie operazioni API, consulta Incorporamento dell'analisi utilizzando GetDashboardEmbedURL e GetSessionEmbedURL Operazioni API.

 Si applica a: Enterprise Edition 
   Destinatari: QuickSight sviluppatori Amazon 

Nelle sezioni seguenti, puoi trovare informazioni dettagliate su come configurare QuickSight dashboard Amazon integrate per gli utenti registrati di Amazon QuickSight.

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 operazione richiede l'accesso amministrativo a IAM.

Ogni utente che accede a una dashboard assume un ruolo che gli conferisce QuickSight l'accesso e le autorizzazioni Amazon alla dashboard. Per renderlo possibile, crea un ruolo IAM nel tuo. Account AWS Associa una policy IAM al ruolo per fornire le autorizzazioni a qualsiasi utente che lo assume. Il ruolo IAM 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 URL per tutti gli utenti in uno spazio dei nomi specifico o per un sottoinsieme di utenti in spazi dei nomi specifici. Per questo, aggiungi quicksight:GenerateEmbedUrlForRegisteredUser.

Puoi creare una condizione nella tua policy IAM che limiti i domini che gli sviluppatori possono elencare nel parametro AllowedDomains di un'operazione API GenerateEmbedUrlForRegisteredUser. Il parametro AllowedDomains è un parametro facoltativo. In qualità di sviluppatore, offre agli sviluppatori la possibilità di sovrascrivere i domini statici configurati nel menu Gestisci. QuickSight Puoi invece elencare fino a tre domini o sottodomini che possono accedere all'URL generato. Questo URL viene quindi incorporato nel sito Web che crei. Solo i domini elencati nel parametro possono accedere all'elemento visivo 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 condizione AllowedEmbeddingDomains alla tua policy IAM. 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:RegisterUserautorizzazione nella politica.

La seguente politica di esempio fornisce l'autorizzazione a recuperare un URL di incorporamento 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, è necessario che all'identità IAM dell'applicazione sia associata una policy 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'utente l'accesso. QuickSight 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 policy di trust per OpenID Connect o l'autenticazione SAML, consulta le sezioni seguenti della Guida per l'utente di IAM:

Fase 2: Generazione dell'URL con il codice di autenticazione allegato

Nella sezione seguente, è possibile scoprire come autenticare l'utente e ottenere l'URL del pannello di controllo incorporato nel server delle applicazioni. Se prevedi di incorporare dashboard per IAM o tipi di QuickSight identità, condividi la dashboard con gli utenti.

Quando un utente accede all'applicazione, l'applicazione assume il ruolo IAM per conto dell'utente. Quindi aggiunge l'utente a QuickSight, se quell'utente non esiste già. In seguito, sarà necessario passare un identificatore come l'ID della sessione del ruolo univoco.

L'esecuzione di questi passaggi garantisce che ogni visualizzatore della dashboard 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'autenticazione IAM per conto dell'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.GenerateEmbedUrlForRegisteredUserRequest; import com.amazonaws.services.quicksight.model.GenerateEmbedUrlForRegisteredUserResult; import com.amazonaws.services.quicksight.model.RegisteredUserEmbeddingExperienceConfiguration; import com.amazonaws.services.quicksight.model.RegisteredUserDashboardEmbeddingConfiguration; /** * Class to call QuickSight AWS SDK to get url for dashboard embedding. */ public class GetQuicksightEmbedUrlRegisteredUserDashboardEmbedding { private final AmazonQuickSight quickSightClient; public GetQuicksightEmbedUrlRegisteredUserDashboardEmbedding() { 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, // AWS Account ID final String dashboardId, // Dashboard ID to embed final List<String> allowedDomains, // Runtime allowed domain for embedding 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. ) throws Exception { final RegisteredUserEmbeddingExperienceConfiguration experienceConfiguration = new RegisteredUserEmbeddingExperienceConfiguration() .withDashboard(new RegisteredUserDashboardEmbeddingConfiguration().withInitialDashboardId(dashboardId)); 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": { "Dashboard": { "InitialDashboardId": dashboardId } }, "UserArn": userArn, "AllowedDomains": allowedDomains, "SessionLifetimeInMinutes": 600 }; const quicksightClient = 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 } }); quicksightClient.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 # 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, 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 = { "Dashboard": { "InitialDashboardId": dashboardId } }, 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 JavaScript (Node.js) che è possibile utilizzare sul server dell'app per generare l'URL per la dashboard incorporata. È possibile utilizzare questo URL nel sito Web o nell'applicazione per visualizzare il pannello di controllo.

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': { 'Dashboard': { 'InitialDashboardId': '1c1fe111-e2d2-3b30-44ef-a0e111111cde' } }, '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' }

L'esempio seguente mostra il codice .NET/C# che è possibile utilizzare nel server delle applicazioni per ottenere l'URL per il pannello di controllo incorporato. È possibile utilizzare questo URL nel sito Web o nell'applicazione per visualizzare il pannello di controllo.

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 { RegisteredUserDashboardEmbeddingConfiguration registeredUserDashboardEmbeddingConfiguration = new RegisteredUserDashboardEmbeddingConfiguration { InitialDashboardId = "dashboardId" }; RegisteredUserEmbeddingExperienceConfiguration registeredUserEmbeddingExperienceConfiguration = new RegisteredUserEmbeddingExperienceConfiguration { Dashboard = registeredUserDashboardEmbeddingConfiguration }; 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, scegliete una delle seguenti AWS Security Token Service ()AWS STS operazioni API:

  • AssumeRole— Utilizzate questa operazione quando utilizzate un'identità IAM per assumere il ruolo.

  • AssumeRoleWithWebIdentity— Utilizza questa operazione quando utilizzi un provider di identità web per autenticare il tuo utente.

  • AssumeRoleWithSaml— Utilizza questa operazione quando utilizzi SAML per autenticare i tuoi utenti.

L'esempio seguente mostra il comando dell'interfaccia a riga di comando per impostare il ruolo IAM. 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 il ruolo è necessario abilitare anche le autorizzazioni. quicksight:RegisterUser

aws sts assume-role \ --role-arn "arn:aws:iam::111122223333:role/embedding_quicksight_dashboard_role" \ --role-session-name john.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_KEY_ID

  • AWS_SECRET_CHIAVE_ACCESSO

  • AWS_SESSION_GETTONE

L'esempio seguente mostra come impostare questi tre parametri nell'interfaccia a riga di comando. 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_dashboard_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.

Inoltre, l’ID della sessione del ruolo diventa il nome utente in QuickSight. Puoi utilizzare questo modello per effettuare il provisioning degli utenti in QuickSight anticipo o per effettuare il provisioning la prima volta che accedono alla dashboard.

L'esempio seguente mostra il comando dell'interfaccia a riga di comando che è possibile utilizzare per effettuare il provisioning di un utente. Per ulteriori informazioni e altre operazioni QuickSight API RegisterUserDescribeUser, consulta l'QuickSight API Reference.

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

Se l'utente viene autenticato tramite Microsoft AD, non è necessario utilizzare RegisterUser per configurarlo. In caso contrario, deve essere automaticamente sottoscritto al primo accesso a QuickSight. Per gli utenti Microsoft AD, puoi utilizzare DescribeUser per ottenere l'ARN dell'utente.

La prima volta che un utente accede QuickSight, puoi anche aggiungere questo utente al gruppo con cui è condivisa la dashboard. L'esempio seguente mostra il comando dell'interfaccia a riga di 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_dashboard_role/john.doe@example.com"

Ora hai un utente della tua app che è anche utente di QuickSight e che ha accesso alla dashboard.

Infine, per ottenere un URL provvisto di firma per il pannello di controllo, chiama generate-embed-url-for-registered-user dal server delle applicazioni. Questo restituisce l'URL del pannello di controllo incorporato. L'esempio seguente mostra come generare l'URL per una dashboard incorporata utilizzando una chiamata lato server per gli utenti autenticati tramite AWS Managed Microsoft AD o Single Sign-On (IAM Identity Center).

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 Dashboard={InitialDashboardId=1a1ac2b2-3fc3-4b44-5e5d-c6db6778df89}

Per ulteriori informazioni sull'utilizzo di questa operazione, consulta GenerateEmbedUrlForRegisteredUser. Puoi utilizzare questa e altre operazioni API nel tuo codice.

Fase 3: Incorporamento dell'URL del pannello di controllo

Nella sezione seguente, puoi scoprire come utilizzare Amazon QuickSight Embedding SDK (JavaScript) per incorporare l'URL della dashboard dal passaggio 3 nella pagina del tuo sito Web o dell'applicazione. Con il kit SDK, puoi procedere come segue:

  • Posiziona il pannello di controllo in una pagina HTML.

  • Passare i parametri nel pannello di controllo.

  • Gestisci stati di errore con messaggi personalizzati per l'applicazione.

Chiama l'operazione API GenerateEmbedUrlForRegisteredUser per generare l'URL da incorporare nella tua app. Questo URL è valido per 5 minuti, mentre la sessione risultante è valida per 10 ore. L'operazione API fornisce l'URL con un auth_code che consente una sessione di single sign-on.

Di seguito viene mostrata una risposta di esempio da 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/embed/12345/dashboards/67890..", "RequestId": "7bee030e-f191-45c4-97fe-d9faf0e03713" }

Incorpora questa dashboard nella tua pagina web utilizzando l'QuickSight Embedding SDK o aggiungendo questo URL in un iframe. Se imposti un'altezza e una larghezza fisse (in pixel), QuickSight utilizza questi valori o non modificare l’elemento visivo mentre la finestra si ridimensiona. Se imposti un'altezza e una larghezza percentuali relative, QuickSight fornisce un layout dinamico che viene modificato al variare delle dimensioni della finestra. Utilizzando Amazon QuickSight Embedding SDK, puoi anche controllare i parametri all'interno della dashboard e ricevere callback in termini di completamento del caricamento della pagina ed errori.

Il dominio che ospiterà le dashboard integrate deve essere incluso nell'elenco dei domini consentiti, l'elenco dei domini approvati per l'abbonamento. QuickSight Questo requisito protegge i tuoi dati impedendo ai domini non approvati di ospitare pannelli di controllo incorporati. Per ulteriori informazioni sull'aggiunta di domini per i pannelli di controllo incorporati, consulta Consenti di elencare i domini in fase di esecuzione con l'API QuickSight .

Il seguente esempio illustra come utilizzare l'URL generato. Questo codice viene generato sul server delle applicazioni.

<!DOCTYPE html> <html> <head> <title>Dashboard 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 embedDashboard = 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>', 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", sheetOptions: { initialSheetId: '<YOUR_SHEETID>', singleSheet: false, emitSizeChangedEventOnSheetChange: false, }, toolbarOptions: { export: false, undoRedo: false, reset: false }, attributionOptions: { overlayContent: false, }, 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 occurred while rendering the experience. Error code:", messageEvent.message.errorCode); break; } case 'PARAMETERS_CHANGED': { console.log("Parameters changed. Changed parameters:", messageEvent.message.changedParameters); break; } case 'SELECTED_SHEET_CHANGED': { console.log("Selected sheet changed. Selected sheet:", messageEvent.message.selectedSheet); break; } case 'SIZE_CHANGED': { console.log("Size changed. New dimensions:", messageEvent.message); break; } case 'MODAL_OPENED': { window.scrollTo({ top: 0 // iframe top position }); break; } } }, }; const embeddedDashboardExperience = await embeddingContext.embedDashboard(frameOptions, contentOptions); const selectCountryElement = document.getElementById('country'); selectCountryElement.addEventListener('change', (event) => { embeddedDashboardExperience.setParameters([ { Name: 'country', Values: event.target.value } ]); }); }; </script> </head> <body onload="embedDashboard()"> <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>Basic Embed</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 dashboard function onDashboardLoad(payload) { console.log("Do something when the dashboard is fully loaded."); } function onError(payload) { console.log("Do something when the dashboard fails loading"); } function embedDashboard() { 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", container: containerDiv, parameters: { country: "United States" }, scrolling: "no", height: "700px", width: "1000px", locale: "en-US", footerPaddingEnabled: true }; dashboard = QuickSightEmbedding.embedDashboard(options); dashboard.on("error", onError); dashboard.on("load", onDashboardLoad); } function onCountryChange(obj) { dashboard.setParameters({country: obj.value}); } </script> </head> <body onload="embedDashboard()"> <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 dashboard incorporata sul tuo sito Web utilizzando. JavaScript Per ottenere la tua copia, procedi in uno dei seguenti modi: