Incorporação de QuickSight painéis para usuários anônimos (não registrados) - Amazon QuickSight
Etapa 1: configurar permissõesEtapa 2: gerar o URLEtapa 3: incorporar o URL

As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.

Incorporação de QuickSight painéis para usuários anônimos (não registrados)

Importante

QuickSight A Amazon tem novas API operações para incorporar análises: GenerateEmbedUrlForAnonymousUser e. GenerateEmbedUrlForRegisteredUser

Você ainda pode usar as GetSessionEmbedUrl API operações GetDashboardEmbedUrl e para incorporar painéis e o QuickSight console, mas elas não contêm os recursos de incorporação mais recentes. Para obter mais informações sobre a incorporação usando as API operações antigas, consulteComo incorporar análises usando as operações de API GetDashboardEmbedURL e GetSessionEmbedURL.

 Aplica-se a: Enterprise Edition 
   Público-alvo: QuickSight desenvolvedores da Amazon 

Nas seções a seguir, você encontrará informações detalhadas sobre como configurar QuickSight painéis incorporados da Amazon para usuários anônimos (não registrados).

Etapa 1: configurar permissões

 Aplica-se a: Enterprise Edition 
   Público-alvo: QuickSight desenvolvedores da Amazon 

Na seção a seguir, você descobrirá como configurar permissões para a aplicação de back-end ou para o servidor Web. Essa tarefa requer acesso administrativo IAM a.

Cada usuário que acessa um painel assume uma função que lhe dá QuickSight acesso e permissões da Amazon ao painel. Para tornar isso possível, crie uma IAM função em seu Conta da AWS. Associe uma IAM política à função para fornecer permissões a qualquer usuário que a assuma.

Você pode criar uma condição em sua IAM política que limite os domínios que os desenvolvedores podem listar no AllowedDomains parâmetro de uma GenerateEmbedUrlForAnonymousUser API operação. O parâmetro AllowedDomains é opcional. Ele concede a você, como desenvolvedor, a opção de substituir os domínios estáticos que estão configurados no menu Gerenciar QuickSight. Em vez disso, você pode listar até três domínios ou subdomínios que podem acessar um gerado. URL Em seguida, isso URL é incorporado ao site que você cria. Somente os domínios listados no parâmetro podem acessar o painel incorporado. Sem essa condição, você pode listar qualquer domínio da Internet no parâmetro AllowedDomains.

Para limitar os domínios que os desenvolvedores podem usar com esse parâmetro, adicione uma AllowedEmbeddingDomains condição à sua IAM política. Para obter mais informações sobre o AllowedDomains parâmetro, consulte GenerateEmbedUrlForAnonymousUserna Amazon QuickSight API Reference.

O exemplo de política apresentado a seguir fornece essas permissões para uso com GenerateEmbedUrlForAnonymousUser. Para que essa abordagem funcione, você também precisa de um pacote de sessões, ou de uma definição de preço da capacidade de sessão, para sua Conta da AWS. Caso contrário, quando um usuário tentar acessar o painel, o erro UnsupportedPricingPlanException será retornado. 

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

A IAM identidade do seu aplicativo deve ter uma política de confiança associada a ela para permitir o acesso à função que você acabou de criar. Isso significa que, quando um usuário acessar a aplicação, ele poderá assumir o perfil em nome do usuário para abrir o painel. O exemplo apresentado a seguir mostra um exemplo de política de confiança.

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

Para obter mais informações sobre políticas de confiança, consulte Credenciais de segurança temporárias IAM no Guia do IAM usuário.

Etapa 2: gerar o URL com o código de autenticação anexado

 Aplica-se a: Enterprise Edition 
   Público-alvo: QuickSight desenvolvedores da Amazon 

Na seção a seguir, você pode descobrir como se autenticar em nome do visitante anônimo e obter o painel incorporável URL em seu servidor de aplicativos.

Quando um usuário acessa seu aplicativo, o aplicativo assume a IAM função em nome do usuário. Em seguida, ele adiciona o usuário QuickSight, se esse usuário ainda não existir. Depois disso, ela transfere um identificador como o ID exclusivo de sessão do usuário.

Os exemplos a seguir realizam a IAM autenticação em nome do usuário. Um identificador é transferido como o ID exclusivo de sessão do usuário. Este código é executado no servidor da aplicação.

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)

O exemplo a seguir mostra o JavaScript (Node.js) que você pode usar no servidor do aplicativo para gerar o URL para o painel incorporado. Você pode usar isso URL em seu site ou aplicativo para exibir o painel. 

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' 
        }

O exemplo a seguir mostra o. NETCódigo /C # que você pode usar no servidor do aplicativo para gerar o URL para o painel incorporado. Você pode usar isso URL em seu site ou aplicativo para exibir o painel. 

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);
    }

Para assumir a função, escolha uma das seguintes API operações AWS Security Token Service (AWS STS):

  • AssumeRole— Use essa operação quando estiver usando uma IAM identidade para assumir a função.

  • AssumeRoleWithWebIdentity— Use essa operação quando estiver usando um provedor de identidade da web para autenticar seu usuário.

  • AssumeRoleWithSaml— Use essa operação quando estiver usando a Security Assertion Markup Language (SAML) para autenticar seus usuários.

O exemplo a seguir mostra o CLI comando para definir a IAM função. O perfil precisa ter permissões habilitadas para quicksight:GenerateEmbedUrlForAnonymousUser. 

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

A operação assume-role retorna três parâmetros de saída: a chave de acesso, a chave secreta e o token da sessão.

nota

Se você receber um erro ExpiredToken ao chamar a operação AssumeRole, isso provavelmente ocorre porque o SESSION TOKEN anterior ainda está nas variáveis de ambiente. Resolva isso definindo as seguintes variáveis:

  • AWS_ACCESS_ KEY _ID

  • AWS_SECRET_ACCESS_KEY

  • AWS_SESSION_TOKEN

O exemplo a seguir mostra como definir esses três parâmetros noCLI. Se você estiver usando uma máquina com Microsoft Windows, use set em vez de 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"

Executar esses comandos define o ID da sessão da função do usuário que está acessando o site embedding_quicksight_dashboard_role/QuickSightEmbeddingAnonymousPolicy. O ID da sessão da função é composto pelo nome da função a partir de role-arn e o valor de role-session-name. Usar o ID exclusivo de sessão do perfil para cada usuário garante que as permissões apropriadas sejam definidas para todos os usuários visitantes. Essa ação também mantém cada sessão separada e distinta. Se você estiver usando uma série de servidores Web, por exemplo, para balanceamento de carga, e uma sessão for reconectada a um servidor diferente, uma nova sessão será iniciada.

Para obter uma assinatura URL para o painel, ligue generate-embed-url-for-anynymous-user do servidor do aplicativo. Isso retorna o painel incorporável. URL O exemplo a seguir mostra como gerar o URL para um painel incorporado usando uma chamada do lado do servidor para usuários que estão fazendo visitas anônimas ao seu portal ou aplicativo da web.

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}}'

Para obter mais informações sobre como usar essa operação, consulte GenerateEmbedUrlForAnonymousUser. Você pode usar essa e outras API operações em seu próprio código.

Etapa 3: incorporar o painel URL

 Aplica-se a: Enterprise Edition 
   Público-alvo: QuickSight desenvolvedores da Amazon 

Na seção a seguir, você pode descobrir como usar o QuickSight Embedding SDK (JavaScript) para incorporar o painel a URL partir da etapa 2 em seu site ou página do aplicativo. Com oSDK, você pode fazer o seguinte:

  • Coloque o painel em uma HTML página.

  • Adicione parâmetros ao painel.

  • Corrija os estados de erro com mensagens que são personalizados para seu aplicativo.

Chame a GenerateEmbedUrlForAnynymousUser API operação para gerar o URL que você pode incorporar ao seu aplicativo. Isso URL é válido por 5 minutos e a sessão resultante é válida por 10 horas. A API operação URL fornece um auth_code que permite uma sessão de login único.

Veja a seguir uma resposta de exemplo de 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"
        }

Incorpore esse painel em sua página da web usando a QuickSight Incorporação SDK ou adicionando-o a um URL iframe. Se você definir um número fixo de altura e largura (em pixels), use-os QuickSight e não altere seu visual à medida que a janela é redimensionada. Se você definir uma porcentagem relativa de altura e largura, QuickSight fornece um layout responsivo que é modificado conforme o tamanho da janela muda. Ao usar a QuickSight incorporaçãoSDK, você também pode controlar os parâmetros no painel e receber retornos de chamada em termos de conclusão e erros no carregamento da página.

O domínio que hospedará painéis incorporados deve estar na lista de permissões, a lista de domínios aprovados para sua Amazon QuickSight assinatura. Esse requisito protege seus dados, impedindo que domínios não aprovados hospedem painéis incorporados. Para obter mais informações sobre como adicionar domínios para painéis incorporados, consulte Permitir listar domínios em tempo de execução com o QuickSight API.

O exemplo a seguir mostra como usar o geradoURL. Este código reside no seu servidor de aplicações.

<!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>

Para que este exemplo funcione, certifique-se de usar a QuickSight Incorporação SDK para carregar o painel incorporado em seu site usando JavaScript. Para obter sua cópia, siga um destes procedimentos: