Fase 1: Configurazione delle autorizzazioni Fase 2: Generare il URL Passaggio 3: incorpora il URL

Incorporamento di QuickSight dashboard per utenti anonimi (non registrati)

Importante

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

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

Si applica a: Enterprise Edition

Destinatari: QuickSight sviluppatori Amazon

Nelle sezioni seguenti, puoi trovare informazioni dettagliate su come configurare QuickSight dashboard Amazon integrate per utenti anonimi (non registrati).

Argomenti

Fase 1: Configurazione delle autorizzazioni
Fase 2: Generare il file URL con il codice di autenticazione allegato
Passaggio 3: incorpora la dashboard URL

Fase 1: Configurazione delle autorizzazioni

Si applica a: Enterprise Edition

Destinatari: QuickSight sviluppatori Amazon

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 aIAM.

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 IAM ruolo nel tuo. Account AWS Associa una IAM policy al ruolo per fornire le autorizzazioni a qualsiasi utente che la assume.

Puoi creare una condizione nella tua IAM politica che limiti i domini che gli sviluppatori possono elencare nel AllowedDomains parametro di un'operazione. 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, GenerateEmbedUrlForAnonymousUserconsulta Amazon QuickSight API Reference.

La seguente policy di esempio fornisce le autorizzazioni da utilizzare con GenerateEmbedUrlForAnonymousUser. Affinché questo approccio funzioni, hai anche bisogno di un session pack, o tariffazione della capacità della sessione, per il tuo Account AWS. Altrimenti, quando un utente prova ad accedere al pannello di controllo, viene restituito l'errore UnsupportedPricingPlanException.


{
"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"
                ]
        }
    }
}

L'IAMidentità della tua applicazione deve essere associata a una politica di fiducia per consentire l'accesso al ruolo che hai appena creato. Ciò significa che, quando un utente accede all'applicazione, l'applicazione può assumere quel ruolo per conto dell'utente per aprire il pannello di controllo. 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à, consulta Credenziali di sicurezza temporanee IAM nella Guida per l'IAMutente.

Fase 2: Generare il file URL con il codice di autenticazione allegato

Si applica a: Enterprise Edition

Destinatari: QuickSight sviluppatori Amazon

Nella sezione seguente, puoi scoprire come autenticarti per conto del visitatore anonimo e ottenere la dashboard incorporabile URL sul tuo server delle applicazioni.

Quando un utente accede alla tua app, l'app assume il IAM ruolo 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.

Gli esempi seguenti eseguono l'IAMautenticazione per conto dell'utente. Passa un identificatore come l'ID della sessione del ruolo univoco. Questo codice viene eseguito sul server delle applicazioni.


import java.util.List;
    import com.amazonaws.auth.AWSCredentials;
    import com.amazonaws.auth.AWSCredentialsProvider;
    import com.amazonaws.auth.BasicAWSCredentials;
    import com.amazonaws.regions.Regions;
    import com.amazonaws.services.quicksight.AmazonQuickSight;
    import com.amazonaws.services.quicksight.AmazonQuickSightClientBuilder;
    import com.amazonaws.services.quicksight.model.RegisteredUserDashboardEmbeddingConfiguration;
    import com.amazonaws.services.quicksight.model.AnonymousUserEmbeddingExperienceConfiguration;
    import com.amazonaws.services.quicksight.model.GenerateEmbedUrlForAnonymousUserRequest;
    import com.amazonaws.services.quicksight.model.GenerateEmbedUrlForAnonymousUserResult;
    import com.amazonaws.services.quicksight.model.SessionTag;


    /**
    * Class to call QuickSight AWS SDK to generate embed url for anonymous user.
    */
    public class GenerateEmbedUrlForAnonymousUserExample {

        private final AmazonQuickSight quickSightClient;

        public GenerateEmbedUrlForAnonymousUserExample() {
            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 GenerateEmbedUrlForAnonymousUser(
            final String accountId, // YOUR AWS ACCOUNT ID
            final String initialDashboardId, // DASHBOARD ID TO WHICH THE CONSTRUCTED URL POINTS.
            final String namespace, // ANONYMOUS EMBEDDING REQUIRES SPECIFYING A VALID NAMESPACE FOR WHICH YOU WANT THE EMBEDDING URL
            final List<String> authorizedResourceArns, // DASHBOARD ARN LIST TO EMBED
            final List<String> allowedDomains, // RUNTIME ALLOWED DOMAINS FOR EMBEDDING
            final List<SessionTag> sessionTags // SESSION TAGS USED FOR ROW-LEVEL SECURITY
        ) throws Exception {
            AnonymousUserEmbeddingExperienceConfiguration experienceConfiguration = new AnonymousUserEmbeddingExperienceConfiguration();
            AnonymousUserDashboardEmbeddingConfiguration dashboardConfiguration = new AnonymousUserDashboardEmbeddingConfiguration();
            dashboardConfiguration.setInitialDashboardId(initialDashboardId);
            experienceConfiguration.setDashboard(dashboardConfiguration);

            GenerateEmbedUrlForAnonymousUserRequest generateEmbedUrlForAnonymousUserRequest = new GenerateEmbedUrlForAnonymousUserRequest()
                .withAwsAccountId(accountId)
                .withNamespace(namespace)
                .withAuthorizedResourceArns(authorizedResourceArns)
                .withExperienceConfiguration(experienceConfiguration)
                .withSessionTags(sessionTags)
                .withSessionLifetimeInMinutes(600L); // OPTIONAL: VALUE CAN BE [15-600]. DEFAULT: 600
                .withAllowedDomains(allowedDomains);

            GenerateEmbedUrlForAnonymousUserResult dashboardEmbedUrl = quickSightClient.generateEmbedUrlForAnonymousUser(generateEmbedUrlForAnonymousUserRequest);

            return dashboardEmbedUrl.getEmbedUrl();
        }

    }


global.fetch = require('node-fetch');
const AWS = require('aws-sdk');

function generateEmbedUrlForAnonymousUser(
accountId, // YOUR AWS ACCOUNT ID
initialDashboardId, // DASHBOARD ID TO WHICH THE CONSTRUCTED URL POINTS
quicksightNamespace, // VALID NAMESPACE WHERE YOU WANT TO DO NOAUTH EMBEDDING
authorizedResourceArns, // DASHBOARD ARN LIST TO EMBED
allowedDomains, // RUNTIME ALLOWED DOMAINS FOR EMBEDDING
sessionTags, // SESSION TAGS USED FOR ROW-LEVEL SECURITY
generateEmbedUrlForAnonymousUserCallback, // GENERATEEMBEDURLFORANONYMOUSUSER SUCCESS CALLBACK METHOD
errorCallback // GENERATEEMBEDURLFORANONYMOUSUSER ERROR CALLBACK METHOD
) {
const experienceConfiguration = {
    "DashboardVisual": {
        "InitialDashboardVisualId": {
            "DashboardId": "dashboard_id",
            "SheetId": "sheet_id",
            "VisualId": "visual_id"
        }
    }
};

const generateEmbedUrlForAnonymousUserParams = {
    "AwsAccountId": accountId,
    "Namespace": quicksightNamespace,
    "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
# dashboardId: DASHBOARD ID TO WHICH THE CONSTRUCTED URL POINTS
# sessionTags: SESSION TAGS USED FOR ROW-LEVEL SECURITY
def generateEmbedUrlForAnonymousUser(accountId, quicksightNamespace, authorizedResourceArns, allowedDomains, dashboardId, sessionTags):
try:
    response = quicksightClient.generate_embed_url_for_anonymous_user(
        AwsAccountId = accountId,
        Namespace = quicksightNamespace,
        AuthorizedResourceArns = authorizedResourceArns,
        AllowedDomains = allowedDomains,
            ExperienceConfiguration = {
                "Dashboard": {
                    "InitialDashboardId": dashboardId
                }
            },
        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)

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.generateEmbedUrlForAnonymousUser({
        'AwsAccountId': '111122223333',
        'Namespace' : 'default',
        'AuthorizedResourceArns': authorizedResourceArns,
        'AllowedDomains': allowedDomains,
        'ExperienceConfiguration': experienceConfiguration,
        '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..',
            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;

    var quicksightClient = new AmazonQuickSightClient(
        AccessKey,
        SecretAccessKey,
        sessionToken,
        Amazon.RegionEndpoint.USEast1);
        
    try
    {
        Console.WriteLine(
            quicksightClient.GenerateEmbedUrlForAnonymousUserAsync(new GenerateEmbedUrlForAnonymousUserRequest
            {
                AwsAccountId = "111122223333",
                Namespace = default,
                AuthorizedResourceArns = authorizedResourceArns,
                AllowedDomains = allowedDomains,
                ExperienceConfiguration = experienceConfiguration,
                SessionTags = sessionTags,
                SessionLifetimeInMinutes = 600,
            }).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 Security Assertion Markup Language (SAML) per autenticare gli utenti.

L'esempio seguente mostra il CLI comando per impostare il ruolo. IAM Il ruolo deve avere le autorizzazioni abilitate per quicksight:GenerateEmbedUrlForAnonymousUser.


aws sts assume-role \
    --role-arn "arn:aws:iam::11112222333:role/QuickSightEmbeddingAnonymousPolicy" \
    --role-session-name anonymous caller

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_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_dashboard_role/QuickSightEmbeddingAnonymousPolicy. 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 visitatore. Inoltre, mantiene ogni sessione separata e distinta. Se utilizzi una serie di server Web, ad esempio per il bilanciamento del carico, e una sessione viene ricollegata a un server diverso, viene avviata una nuova sessione.

Per ottenere una firma URL per la dashboard, chiama generate-embed-url-for-anynymous-user dal server dell'app. Ciò restituisce la dashboard incorporabile. URL L'esempio seguente mostra come generare il file URL per una dashboard incorporata utilizzando una chiamata lato server per gli utenti che effettuano visite anonime al portale Web o all'app.


aws quicksight generate-embed-url-for-anonymous-user \
--aws-account-id 111122223333 \
--namespace default-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}}'

Per ulteriori informazioni sull'utilizzo di questa operazione, vedere GenerateEmbedUrlForAnonymousUser. È possibile utilizzare questa e altre API operazioni nel proprio codice.

Passaggio 3: incorpora la dashboard URL

Si applica a: Enterprise Edition

Destinatari: QuickSight sviluppatori Amazon

Nella sezione seguente, puoi scoprire come utilizzare QuickSight Embedding SDK (JavaScript) per incorporare la dashboard URL dal passaggio 2 nella pagina del tuo sito Web o dell'applicazione. ConSDK, puoi fare quanto segue:

Posiziona la dashboard su una HTML pagina.
Passare i parametri nel pannello di controllo.
Gestisci stati di errore con messaggi personalizzati per l'applicazione.

Chiama l'GenerateEmbedUrlForAnynymousUserAPIoperazione per generare il URL file che puoi incorporare nella tua app. URLÈ valido per 5 minuti e la sessione risultante è valida per 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-anynymous-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 incorporamento SDK o aggiungendola URL in un iframe. Se imposti un numero fisso di altezza e larghezza (in pixel), li QuickSight utilizza e non modifica la visualizzazione man mano che 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 l' QuickSightincorporamentoSDK, puoi anche controllare i parametri all'interno della dashboard e ricevere richiami in termini di completamento del caricamento della pagina ed errori.

Il dominio che ospiterà le dashboard integrate deve essere 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 pannelli di controllo incorporati. Per ulteriori informazioni sull'aggiunta di domini per 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 si trova 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 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:

Scarica Amazon QuickSight Embedding SDK da GitHub. Questo repository è gestito da un gruppo di QuickSight sviluppatori.
Scarica l'ultima SDK versione di QuickSight Embedding da. https://www.npmjs.com/package/amazon-quicksight-embedding-sdk
Se npm la utilizzi per JavaScript le dipendenze, scaricala e installala eseguendo il comando seguente.
```
npm install amazon-quicksight-embedding-sdk
```

Avvertimento JavaScript è disabilitato o non è disponibile nel tuo browser.

Per usare la documentazione AWS, JavaScript deve essere abilitato. Consulta le pagine della guida del browser per le istruzioni.

Convenzioni dei documenti

Incorporamento di pannelli di controllo per gli utenti registrati

Incorporamento di elementi visivi