Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.

# Integración de imágenes de Amazon Quick Sight con Amazon Quick Sight APIs
<a name="embedding-visuals"></a>

Puede incrustar imágenes individuales que formen parte de un panel publicado en su aplicación con la API Amazon Quick Sight.

**Topics**
+ [

# Incrustar imágenes de Amazon Quick Sight para usuarios registrados
](embedded-analytics-visuals-for-authenticated-users.md)
+ [

# Incrustar imágenes de Amazon Quick Sight para usuarios anónimos (no registrados)
](embedded-analytics-visuals-for-everyone.md)

# Incrustar imágenes de Amazon Quick Sight para usuarios registrados
<a name="embedded-analytics-visuals-for-authenticated-users"></a>


|  | 
| --- |
|  Se aplica a: Enterprise Edition  | 


|  | 
| --- |
|    Público objetivo: desarrolladores de Amazon Quick  | 

En las siguientes secciones, encontrará información detallada sobre cómo configurar las imágenes integradas de Amazon Quick Sight para los usuarios registrados de Amazon Quick Sight.

**Topics**
+ [

## Paso 1: configuración de permisos
](#embedded-visuals-for-authenticated-users-step-1)
+ [

## Paso 2: generación de la URL con el código de autenticación adjunto
](#embedded-visuals-for-authenticated-users-step-2)
+ [

## Paso 3: integración de la URL del elemento visual
](#embedded-visuals-for-authenticated-users-step-3)

## Paso 1: configuración de permisos
<a name="embedded-visuals-for-authenticated-users-step-1"></a>

En la siguiente sección, puede encontrar cómo configurar los permisos de la aplicación de backend o del servidor web. Esta tarea requiere acceso administrativo a IAM.

Cada usuario que accede a una imagen asume una función que le da acceso a Amazon Quick Sight y permisos para acceder a la imagen. Para que esto sea posible, cree un rol de IAM en su. Cuenta de AWS Asocie una política de IAM al rol para proporcionar permisos a cualquier usuario que lo asuma. El rol de IAM debe proporcionar permisos para recuperar la incrustación de un grupo URLs de usuarios específico. Con la ayuda del carácter comodín *\$1*, puede conceder los permisos para generar una URL para todos los usuarios de un espacio de nombres específico, o para un subconjunto de usuarios de espacios de nombres específicos. Para ello, añada `quicksight:GenerateEmbedUrlForRegisteredUser`.

Puede crear una condición en su política de IAM que limite los dominios que los desarrolladores pueden incluir en el parámetro `AllowedDomains` de una operación de la API `GenerateEmbedUrlForAnonymousUser`. El parámetro `AllowedDomains` es opcional. Como desarrollador, tiene la opción de anular los dominios estáticos que están configurados en el menú **Gestionar Amazon Quick Sight**. En su lugar, puede enumerar hasta tres dominios o subdominios que pueden acceder a una URL generada. A continuación, esta URL se integra en el sitio web que cree. Solo los dominios que aparecen en el parámetro pueden acceder al panel integrado. Sin esta condición, usted puede incluir cualquier dominio de Internet en el parámetro `AllowedDomains`. 

Para limitar los dominios que los desarrolladores pueden usar con este parámetro, añada una condición `AllowedEmbeddingDomains` a su política de IAM. Para obtener más información sobre el `AllowedDomains` parámetro, consulte la *referencia [GenerateEmbedUrlForRegisteredUser](https://docs.aws.amazon.com//quicksight/latest/APIReference/API_GenerateEmbedUrlForRegisteredUser.html)de la API de Amazon Quick Sight*.

**Prácticas recomendadas de seguridad para los operadores de condiciones de IAM**  
Los operadores de condiciones de IAM configurados incorrectamente pueden permitir el acceso no autorizado a los recursos rápidos integrados mediante variaciones de URL. Cuando utilices la clave de `quicksight:AllowedEmbeddingDomains` condición en tus políticas de IAM, utiliza operadores de condiciones que permitan dominios específicos o denieguen todos los dominios que no estén específicamente permitidos. Para obtener más información sobre los operadores de condiciones de IAM, consulte [Elementos de la política JSON de IAM: operadores de condiciones](https://docs.aws.amazon.com/IAM/latest/UserGuide/reference_policies_elements_condition_operators.html) en la Guía del usuario de IAM.  
Muchas variaciones de URL diferentes pueden apuntar al mismo recurso. Por ejemplo, URLs todo lo siguiente tiene el mismo contenido:  
`https://example.com`
`https://example.com/`
`https://Example.com`
Si su política utiliza operadores que no tienen en cuenta estas variaciones de URL, un atacante puede eludir sus restricciones proporcionando variaciones de URL equivalentes.  
Debe comprobar que su política de IAM utiliza los operadores de condiciones adecuados para evitar que se eludan las vulnerabilidades y garantizar que solo los dominios a los que va destinados puedan acceder a los recursos integrados.

La siguiente política de ejemplo ofrece estos permisos.

Además, si va a crear usuarios primerizos que vayan a ser lectores de Amazon Quick Sight, asegúrese de añadir el `quicksight:RegisterUser` permiso en la política.

El siguiente ejemplo de política proporciona permiso para recuperar una URL incrustada para los usuarios primerizos que vayan a ser lectores de Amazon Quick Sight.

Finalmente, la identidad de IAM de su aplicación debe tener asociada una política de confianza para permitir el acceso al rol que acaba de crear. Esto significa que cuando un usuario accede a su aplicación, esta puede asumir la función en nombre del usuario y aprovisionar al usuario en Amazon Quick Sight. En el siguiente ejemplo, se muestra una muestra de política de confianza.

------
#### [ JSON ]

****  

```
{
    "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 obtener más información sobre las políticas de confianza para la autenticación de OpenID Connect o SAML, consulte las siguientes secciones de la *Guía del usuario de IAM: *
+ [Creación de un rol para identidades federadas web u OpenID Connect (consola)](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_create_for-idp_oidc.html)
+ [Creación de un rol para una federación SAML 2.0 (consola)](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_create_for-idp_saml.html)

## Paso 2: generación de la URL con el código de autenticación adjunto
<a name="embedded-visuals-for-authenticated-users-step-2"></a>

En la siguiente sección, encontrarás información sobre cómo autenticar a tu usuario de Amazon Quick Sight y obtener la URL visual integrable en tu servidor de aplicaciones. Si planea incrustar imágenes para los tipos de identidad de IAM o Amazon Quick Sight, comparta las imágenes con los usuarios de Amazon Quick Sight.

Cuando un usuario de Amazon Quick Sight accede a tu aplicación, la aplicación asume la función de IAM en nombre del usuario de Amazon Quick Sight. A continuación, añade el usuario a Amazon Quick Sight, si ese usuario de Amazon Quick Sight aún no existe. A continuación, transfiere un identificador como ID de sesión de rol único. 

Al realizar los pasos descritos, se garantiza que cada espectador de la imagen se aprovisione de forma única en Amazon Quick Sight. También aplica la configuración por usuario, como la seguridad de nivel de fila y los valores predeterminados dinámicos de los parámetros.

Los siguientes ejemplos realizan la autenticación de IAM en nombre del usuario de Amazon Quick Sight. Este código se ejecuta en el servidor de aplicaciones.

### Java
<a name="embedded-visuals-for-authenticated-users-java"></a>

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

### JavaScript
<a name="embedded-visuals-for-authenticated-users-js"></a>

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

### Python3
<a name="embedded-visuals-for-authenticated-users-py"></a>

```
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)
```

### Node.js
<a name="embedded-visuals-for-authenticated-users-node"></a>

El siguiente ejemplo muestra el archivo JavaScript (Node.js) que puede usar en el servidor de aplicaciones para generar la URL del panel integrado. Puede utilizar esta URL en su sitio web o aplicación para mostrar el panel. 

**Example**  

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

**Example**  

```
//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"
    }
```

### .NET/C\$1
<a name="embedded-visuals-for-authenticated-users-cs"></a>

En el siguiente ejemplo, se muestra el código .NET/C\$1 que puede usar en el servidor de aplicaciones para generar la URL del panel integrado. Puede utilizar esta URL en su sitio web o aplicación para mostrar el panel. 

**Example**  

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

### AWS CLI
<a name="embedded-visuals-for-authenticated-users-cli"></a>

Para asumir la función, elija una de las siguientes AWS Security Token Service (AWS STS) operaciones de API:
+ [AssumeRole](https://docs.aws.amazon.com/STS/latest/APIReference/API_AssumeRole.html)— Utilice esta operación cuando utilice una identidad de IAM para asumir la función.
+ [AssumeRoleWithWebIdentity](https://docs.aws.amazon.com/STS/latest/APIReference/API_AssumeRoleWithWebIdentity.html)— Utilice esta operación cuando utilice un proveedor de identidad web para autenticar a su usuario. 
+ [AssumeRoleWithSaml](https://docs.aws.amazon.com/STS/latest/APIReference/API_AssumeRoleWithSAML.html)— Usa esta operación cuando utilices SAML para autenticar a tus usuarios.

En el siguiente ejemplo, se muestra el comando de la CLI para definir el rol de IAM. El rol debe tener los permisos de `quicksight:GenerateEmbedUrlForRegisteredUser` habilitados. Si opta por añadir usuarios just-in-time la primera vez que abren un panel de control, el rol también necesita tener habilitados los permisos. `quicksight:RegisterUser`

```
aws sts assume-role \
    --role-arn "arn:aws:iam::111122223333:role/embedding_quicksight_visual_role" \
    --role-session-name john.doe@example.com
```

La operación `assume-role` devuelve tres parámetros de salida: la clave de acceso, la clave secreta y el token de sesión. 

**nota**  
Si se produce un error `ExpiredToken` al llamar a la operación `AssumeRole`, probablemente se debe a que el `SESSION TOKEN` anterior aún se encuentra en las variables de entorno. Para retirarlo, establezca las variables siguientes:  
*AWS\$1ACCESS\$1KEY\$1ID* 
*AWS\$1SECRET\$1ACCESS\$1KEY* 
*AWS\$1SESSION\$1TOKEN* 

En el siguiente ejemplo, se muestra cómo definir estos tres parámetros en la CLI. Si utiliza un equipo con Microsoft Windows, utilice `set` en lugar 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"
```

Al ejecutar estos comandos, se define el ID de sesión del rol del usuario que visita su sitio web como `embedding_quicksight_visual_role/john.doe@example.com`. El ID de sesión del rol está compuesto por el nombre del rol de `role-arn` y el valor de `role-session-name`. Al utilizar el ID de sesión del rol único para cada usuario, se garantiza que se definan los permisos correspondientes para cada usuario. También evitará la limitación del acceso de los usuarios. *La limitación* es una función de seguridad que impide que el mismo usuario acceda a Amazon Quick Sight desde varios lugares. 

El ID de sesión del rol también se convierte en el nombre de usuario en Amazon Quick Sight. Puede utilizar este patrón para aprovisionar a sus usuarios en Amazon Quick Sight con antelación o para aprovisionarlos la primera vez que accedan al panel de control. 

En el siguiente ejemplo, se muestra el comando de la CLI que puede utilizar para incluir a un usuario. Para obtener más información sobre [RegisterUser](https://docs.aws.amazon.com/quicksight/latest/APIReference/API_RegisterUser.html)y otras operaciones de la API de Amazon Quick Sight, consulte la [referencia de la API de Amazon Quick Sight](https://docs.aws.amazon.com/quicksight/latest/APIReference/Welcome.html). [DescribeUser](https://docs.aws.amazon.com/quicksight/latest/APIReference/API_DescribeUser.html)

```
aws quicksight register-user \
    --aws-account-id 111122223333 \
    --namespace default \
    --identity-type IAM \
    --iam-arn "arn:aws:iam::111122223333:role/embedding_quicksight_visual_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
```

Si el usuario se ha autenticado a través de Microsoft AD, no es necesario utilizar `RegisterUser` para configurarlo. En su lugar, deberían suscribirse automáticamente la primera vez que accedan a Amazon Quick Sight. En el caso de los usuarios de Microsoft AD, puede utilizar `DescribeUser` para obtener el ARN del usuario.

La primera vez que un usuario accede a Amazon Quick Sight, también puede añadir este usuario al grupo con el que se comparte la imagen. En el siguiente ejemplo, se muestra el comando de la CLI para añadir un usuario a un grupo.

```
aws quicksight create-group-membership \
    --aws-account-id=111122223333 \
    --namespace=default \
    --group-name=financeusers \
    --member-name="embedding_quicksight_visual_role/john.doe@example.com"
```

Ahora tienes un usuario de tu aplicación que también es usuario de Amazon Quick Sight y que tiene acceso a lo visual. 

Por último, para obtener una URL firmada para el elemento visual, llame a `generate-embed-url-for-registered-user` desde el servidor de aplicaciones. Esta operación devuelve la URL del elemento visual integrable. En el siguiente ejemplo, se muestra cómo generar la URL de un elemento visual incrustado mediante una llamada desde el servidor para los usuarios autenticados mediante AWS Managed Microsoft AD un inicio de sesión único (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 'DashboardVisual={InitialDashboardVisualId={DashboardId=dashboard_id,SheetId=sheet_id,VisualId=visual_id}}'
```

Para obtener más información sobre cómo usar esta operación, consulte [https://docs.aws.amazon.com/quicksight/latest/APIReference/API_GenerateEmbedUrlForRegisteredUser.html](https://docs.aws.amazon.com/quicksight/latest/APIReference/API_GenerateEmbedUrlForRegisteredUser.html). Puede utilizar esta y otras operaciones de la API en su propio código.

## Paso 3: integración de la URL del elemento visual
<a name="embedded-visuals-for-authenticated-users-step-3"></a>

En la siguiente sección, encontrará información sobre cómo utilizar el [SDK de incrustación de Amazon Quick Sight](https://www.npmjs.com/package/amazon-quicksight-embedding-sdk) (JavaScript) para incrustar la URL visual del paso 3 en su sitio web o página de aplicación. Con el SDK, puede hacer lo siguiente: 
+ Coloque el elemento visual en una página HTML.
+ Pase los parámetros al elemento visual.
+ Resolver los estados de error con mensajes que se personalizan en su aplicación.

Llamar a la operación de la API `GenerateEmbedUrlForRegisteredUser` para generar la dirección URL que puede integrar en la aplicación. Esta URL es válida durante 5 minutos, y la sesión resultante es válida hasta 10 horas. La operación de la API proporciona la URL con un `auth_code` que permite una sesión con inicio único. 

El siguiente es un ejemplo de respuesta de `generate-embed-url-for-registered-user`. La `quicksightdomain` de este ejemplo es la URL que utilizas para acceder a tu cuenta de Amazon Quick Sight.

```
//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"
    }
```

Inserta esta imagen en tu página web mediante el [SDK de incrustación de Amazon Quick Sight](https://www.npmjs.com/package/amazon-quicksight-embedding-sdk) o añadiendo esta URL a un iframe. Si estableces un número fijo de altura y anchura (en píxeles), Amazon Quick Sight los usará y no cambiará la imagen a medida que la ventana cambie de tamaño. Si establece un porcentaje relativo de altura y anchura, Amazon Quick Sight proporciona un diseño adaptable que se modifica a medida que cambia el tamaño de la ventana. Con el SDK de incrustación de Amazon Quick Sight, también puede controlar los parámetros visuales y recibir llamadas en función de la finalización de la carga de la página y de los errores. 

El dominio que alojará las imágenes y los paneles integrados debe figurar en la *lista de dominios permitidos*, es decir, los dominios aprobados para la suscripción. Quick Este requisito protege los datos impidiendo que dominios no aprobados alojen elementos visuales y paneles integrados. Para obtener más información sobre cómo añadir dominios para imágenes y paneles integrados, consulte [Permitir la publicación de dominios en tiempo de ejecución con la API Amazon Quick Sight](https://docs.aws.amazon.com/quicksight/latest/user/embedding-run-time.html).

En el siguiente ejemplo, se muestra cómo utilizar la URL generada. Este código se genera en el servidor de aplicaciones.

### SDK 2.0
<a name="embedded-visuals-for-authenticated-users-sdkv2"></a>

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

### SDK 1.0
<a name="embedded-visuals-for-authenticated-users-sdkv1"></a>

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

Para que este ejemplo funcione, asegúrese de utilizar el SDK de incrustación de Amazon Quick Sight para cargar el elemento visual incrustado en su sitio web utilizando JavaScript. Para obtener su copia, siga uno de estos pasos:
+ Descargue el [SDK de incrustación de Amazon Quick Sight](https://github.com/awslabs/amazon-quicksight-embedding-sdk#step-3-create-the-quicksight-session-object) desde GitHub. Este repositorio lo mantiene un grupo de desarrolladores de Amazon Quick Sight.
+ Descargue la última versión del SDK de incrustación desde [https://www.npmjs.com/package/amazon-quicksight-embedding-sdk](https://www.npmjs.com/package/amazon-quicksight-embedding-sdk).
+ Si lo usas `npm` para JavaScript dependencias, descárgalo e instálalo ejecutando el siguiente comando.

  ```
  npm install amazon-quicksight-embedding-sdk
  ```

# Incrustar imágenes de Amazon Quick Sight para usuarios anónimos (no registrados)
<a name="embedded-analytics-visuals-for-everyone"></a>


|  | 
| --- |
|  Se aplica a: Enterprise Edition  | 


|  | 
| --- |
|    Público objetivo: desarrolladores de Amazon Quick  | 

En las siguientes secciones, encontrará información detallada sobre cómo configurar las imágenes integradas de Amazon Quick Sight para usuarios anónimos (no registrados).

**Topics**
+ [

## Paso 1: configuración de permisos
](#embedded-analytics-visuals-with-anonymous-users-step-1)
+ [

## Paso 2: generación de la URL con el código de autenticación adjunto
](#embedded-analytics-visuals-with-anonymous-users-step-2)
+ [

## Paso 3: integración de la URL del elemento visual
](#embedded-analytics-visuals-with-anonymous-users-step-3)

## Paso 1: configuración de permisos
<a name="embedded-analytics-visuals-with-anonymous-users-step-1"></a>


|  | 
| --- |
|  Se aplica a: Enterprise Edition  | 


|  | 
| --- |
|    Público objetivo: desarrolladores de Amazon Quick  | 

En la siguiente sección, puede encontrar cómo configurar los permisos de la aplicación de backend o del servidor web. Esta tarea requiere acceso administrativo a IAM.

Cada usuario que accede a una imagen asume una función que le da acceso a Amazon Quick Sight y permisos para acceder a la imagen. Para que esto sea posible, cree un rol de IAM en su. Cuenta de AWS Asocie una política de IAM al rol para proporcionar permisos a cualquier usuario que lo asuma.

Puede crear una condición en su política de IAM que limite los dominios que los desarrolladores pueden incluir en el parámetro `AllowedDomains` de una operación de la API `GenerateEmbedUrlForAnonymousUser`. El parámetro `AllowedDomains` es opcional. Como desarrollador, tiene la opción de anular los dominios estáticos que están configurados en el menú **Gestionar Amazon Quick Sight**. En su lugar, puede enumerar hasta tres dominios o subdominios que pueden acceder a una URL generada. A continuación, esta URL se integra en el sitio web que cree. Solo los dominios que aparecen en el parámetro pueden acceder al panel integrado. Sin esta condición, usted puede incluir cualquier dominio de Internet en el parámetro `AllowedDomains`. 

Para limitar los dominios que los desarrolladores pueden usar con este parámetro, añada una condición `AllowedEmbeddingDomains` a su política de IAM. Para obtener más información sobre el `AllowedDomains` parámetro, consulte la *referencia [GenerateEmbedUrlForAnonymousUser](https://docs.aws.amazon.com//quicksight/latest/APIReference/API_GenerateEmbedUrlForAnonymousUser.html)de la API de Amazon Quick Sight*.

**Prácticas recomendadas de seguridad para los operadores de condiciones de IAM**  
Los operadores de condiciones de IAM configurados incorrectamente pueden permitir el acceso no autorizado a los recursos rápidos integrados mediante variaciones de URL. Cuando utilices la clave de `quicksight:AllowedEmbeddingDomains` condición en tus políticas de IAM, utiliza operadores de condiciones que permitan dominios específicos o denieguen todos los dominios que no estén específicamente permitidos. Para obtener más información sobre los operadores de condiciones de IAM, consulte [Elementos de la política JSON de IAM: operadores de condiciones](https://docs.aws.amazon.com/IAM/latest/UserGuide/reference_policies_elements_condition_operators.html) en la Guía del usuario de IAM.  
Muchas variaciones de URL diferentes pueden apuntar al mismo recurso. Por ejemplo, URLs todo lo siguiente se traduce en el mismo contenido:  
`https://example.com`
`https://example.com/`
`https://Example.com`
Si su política utiliza operadores que no tienen en cuenta estas variaciones de URL, un atacante puede eludir sus restricciones proporcionando variaciones de URL equivalentes.  
Debe comprobar que su política de IAM utiliza los operadores de condiciones adecuados para evitar que se eludan las vulnerabilidades y garantizar que solo los dominios a los que va destinados puedan acceder a los recursos integrados.

La identidad de IAM de su aplicación debe tener asociada una política de confianza para permitir el acceso al rol que acaba de crear. Esto significa que, cuando un usuario accede a su aplicación, esta puede asumir el rol en nombre del usuario para abrir el elemento visual. En el siguiente ejemplo, se muestra una muestra de política de confianza.

------
#### [ JSON ]

****  

```
{
    "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 obtener más información sobre las políticas de confianza, consulte [Credenciales de seguridad temporales en IAM](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_credentials_temp.html) en la *Guía del usuario de IAM*.

## Paso 2: generación de la URL con el código de autenticación adjunto
<a name="embedded-analytics-visuals-with-anonymous-users-step-2"></a>


|  | 
| --- |
|  Se aplica a: Enterprise Edition  | 


|  | 
| --- |
|    Público objetivo: desarrolladores de Amazon Quick  | 

En la siguiente sección, puede obtener información sobre cómo autenticar el usuario y obtener la URL del elemento visual integrable en el servidor de su aplicación.

Cuando un usuario accede a su aplicación, esta asume el rol de IAM en nombre del usuario. A continuación, añade el usuario a Amazon Quick Sight, si ese usuario aún no existe. A continuación, transfiere un identificador como ID de sesión de rol único. 

Los siguientes ejemplos realizan la autenticación de IAM en nombre del usuario. Transfiere un identificador como ID de sesión de rol único. Este código se ejecuta en el servidor de aplicaciones.

### Java
<a name="embedded-analytics-visuals-with-anonymous-users-java"></a>

```
import com.amazonaws.auth.AWSCredentials;
import com.amazonaws.auth.BasicAWSCredentials;
import com.amazonaws.auth.AWSCredentialsProvider;
import com.amazonaws.regions.Regions;
import com.amazonaws.services.quicksight.AmazonQuickSight;
import com.amazonaws.services.quicksight.AmazonQuickSightClientBuilder;
import com.amazonaws.services.quicksight.model.AnonymousUserDashboardVisualEmbeddingConfiguration;
import com.amazonaws.services.quicksight.model.AnonymousUserEmbeddingExperienceConfiguration;
import com.amazonaws.services.quicksight.model.DashboardVisualId;
import com.amazonaws.services.quicksight.model.GenerateEmbedUrlForAnonymousUserRequest;
import com.amazonaws.services.quicksight.model.GenerateEmbedUrlForAnonymousUserResult;
import com.amazonaws.services.quicksight.model.SessionTag;

import java.util.List;

/**
 * Class to call QuickSight AWS SDK to get url for Visual embedding.
 */
public class GenerateEmbedUrlForAnonymousUserTest {
    private final AmazonQuickSight quickSightClient;

    public GenerateEmbedUrlForAnonymousUserTest() {
        this.quickSightClient = AmazonQuickSightClientBuilder
            .standard()
            .withRegion(Regions.US_EAST_1.getName())
            .withCredentials(new AWSCredentialsProvider() {
                    @Override
                    public AWSCredentials getCredentials() {
                        // provide actual IAM access key and secret key here
                        return new BasicAWSCredentials("access-key", "secret-key");
                    }

                    @Override
                    public void refresh() {                           
                    }
                }
            )
            .build();
    }

    public String getEmbedUrl(
            final String accountId, // AWS Account ID
            final String namespace, // Anonymous embedding required specifying a valid namespace for which you want the enbedding URL
            final List<String> authorizedResourceArns, // Dashboard arn list of dashboard visuals to embed
            final String dashboardId, // Dashboard ID of the dashboard to embed
            final String sheetId, // Sheet ID of the sheet to embed
            final String visualId, // Visual ID of the visual to embed
            final List<String> allowedDomains, // Runtime allowed domains for embedding
            final List<SessionTag> sessionTags // Session tags used for row-level security
    ) throws Exception {
        final DashboardVisualId dashboardVisual = new DashboardVisualId()
            .withDashboardId(dashboardId)
            .withSheetId(sheetId)
            .withVisualId(visualId);
        final AnonymousUserDashboardVisualEmbeddingConfiguration anonymousUserDashboardVisualEmbeddingConfiguration
            = new AnonymousUserDashboardVisualEmbeddingConfiguration()
                .withInitialDashboardVisualId(dashboardVisual);
        final AnonymousUserEmbeddingExperienceConfiguration anonymousUserEmbeddingExperienceConfiguration
            = new AnonymousUserEmbeddingExperienceConfiguration()
                .withDashboardVisual(anonymousUserDashboardVisualEmbeddingConfiguration);
        final GenerateEmbedUrlForAnonymousUserRequest generateEmbedUrlForAnonymousUserRequest
            = new GenerateEmbedUrlForAnonymousUserRequest()
                .withAwsAccountId(accountId)
                .withNamespace(namespace)
                // authorizedResourceArns should contain ARN of dashboard used below in ExperienceConfiguration
                .withAuthorizedResourceArns(authorizedResourceArns)
                .withExperienceConfiguration(anonymousUserEmbeddingExperienceConfiguration)
                .withAllowedDomains(allowedDomains)
                .withSessionTags(sessionTags)
                .withSessionLifetimeInMinutes(600L);

        final GenerateEmbedUrlForAnonymousUserResult generateEmbedUrlForAnonymousUserResult
            = quickSightClient.generateEmbedUrlForAnonymousUser(generateEmbedUrlForAnonymousUserRequest);

        return generateEmbedUrlForAnonymousUserResult.getEmbedUrl();
    }
}
```

### JavaScript
<a name="embedded-analytics-visuals-with-anonymous-users-js"></a>

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

function generateEmbedUrlForAnonymousUser(
    accountId, // Your AWS account ID
    dashboardId, // Dashboard ID to which the constructed url points
    sheetId, // Sheet ID to which the constructed url points
    visualId, // Visual ID to which the constructed url points
    quicksightNamespace, // valid namespace where you want to do embedding
    authorizedResourceArns, // dashboard arn list of dashboard visuals to embed
    allowedDomains, // runtime allowed domains for embedding
    sessionTags, // session tags used for row-level security
    generateEmbedUrlForAnonymousUserCallback, // success callback method
    errorCallback // error callback method
    ) {
    const experienceConfiguration = {
        "DashboardVisual": {
            "InitialDashboardVisualId": {
                "DashboardId": dashboardId,
                "SheetId": sheetId,
                "VisualId": visualId
            }
        }
    };
    
    const generateEmbedUrlForAnonymousUserParams = {
        "AwsAccountId": accountId,
        "Namespace": quicksightNamespace,
        // authorizedResourceArns should contain ARN of dashboard used below in ExperienceConfiguration
        "AuthorizedResourceArns": authorizedResourceArns,
        "AllowedDomains": allowedDomains,
        "ExperienceConfiguration": experienceConfiguration,
        "SessionTags": sessionTags,
        "SessionLifetimeInMinutes": 600
    };

    const quicksightClient = new AWS.QuickSight({
        region: process.env.AWS_REGION,
        credentials: {
            accessKeyId: AccessKeyId,
            secretAccessKey: SecretAccessKey,
            sessionToken: SessionToken,
            expiration: Expiration
        }
    });

    quicksightClient.generateEmbedUrlForAnonymousUser(generateEmbedUrlForAnonymousUserParams, function(err, data) {
        if (err) {
            console.log(err, err.stack);
            errorCallback(err);
        } else {
            const result = {
                "statusCode": 200,
                "headers": {
                    "Access-Control-Allow-Origin": "*", // USE YOUR WEBSITE DOMAIN TO SECURE ACCESS TO THIS API
                    "Access-Control-Allow-Headers": "Content-Type"
                },
                "body": JSON.stringify(data),
                "isBase64Encoded": false
            }
            generateEmbedUrlForAnonymousUserCallback(result);
        }
    });
}
```

### Python3
<a name="embedded-analytics-visuals-with-anonymous-users-py"></a>

```
import json
import boto3
from botocore.exceptions import ClientError
import time

# Create QuickSight and STS clients
quicksightClient = boto3.client('quicksight',region_name='us-west-2')
sts = boto3.client('sts')

# Function to generate embedded URL for anonymous user
# accountId: YOUR AWS ACCOUNT ID
# quicksightNamespace: VALID NAMESPACE WHERE YOU WANT TO DO NOAUTH EMBEDDING
# authorizedResourceArns: DASHBOARD ARN LIST TO EMBED
# allowedDomains: RUNTIME ALLOWED DOMAINS FOR EMBEDDING
# experienceConfiguration: DASHBOARD ID, SHEET ID and VISUAL ID TO WHICH THE CONSTRUCTED URL POINTS
# Example experienceConfig -> 'DashboardVisual': {
#     'InitialDashboardVisualId': {
#         'DashboardId': 'dashboardId',
#         'SheetId': 'sheetId',
#         'VisualId': 'visualId'
#     }
# },
# sessionTags: SESSION TAGS USED FOR ROW-LEVEL SECURITY
def generateEmbedUrlForAnonymousUser(accountId, quicksightNamespace, authorizedResourceArns, allowedDomains, experienceConfiguration, sessionTags):
    try:
        response = quicksightClient.generate_embed_url_for_anonymous_user(
            AwsAccountId = accountId,
            Namespace = quicksightNamespace,
            AuthorizedResourceArns = authorizedResourceArns,
            AllowedDomains = allowedDomains,
            ExperienceConfiguration = experienceConfiguration,
            SessionTags = sessionTags,
            SessionLifetimeInMinutes = 600
        )
            
        return {
            'statusCode': 200,
            'headers': {"Access-Control-Allow-Origin": "*", "Access-Control-Allow-Headers": "Content-Type"},
            'body': json.dumps(response),
            'isBase64Encoded':  bool('false')
        }
    except ClientError as e:
        print(e)
        return "Error generating embeddedURL: " + str(e)
```

### Node.js
<a name="embedded-analytics-visuals-with-anonymous-users-node"></a>

El siguiente ejemplo muestra el archivo JavaScript (Node.js) que puede usar en el servidor de aplicaciones para generar la URL del panel integrado. Puede utilizar esta URL en su sitio web o aplicación para mostrar el panel. 

**Example**  

```
const AWS = require('aws-sdk');
const https = require('https');

var quicksightClient = new AWS.Service({
    apiConfig: require('./quicksight-2018-04-01.min.json'),
    region: 'us-east-1',
});

quicksightClient.generateEmbedUrlForAnonymousUser({
    'AwsAccountId': '111122223333',
    'Namespace' : 'default',
    // authorizedResourceArns should contain ARN of dashboard used below in ExperienceConfiguration
    'AuthorizedResourceArns': authorizedResourceArns,
    'ExperienceConfiguration': { 
        'DashboardVisual': {
            'InitialDashboardVisualId': {
                'DashboardId': 'dashboard_id',
                'SheetId': 'sheet_id',
                'VisualId': 'visual_id'
            }
        }
    },
    'AllowedDomains': allowedDomains,    
    'SessionTags': sessionTags,
    'SessionLifetimeInMinutes': 600

}, function(err, data) {
    console.log('Errors: ');
    console.log(err);
    console.log('Response: ');
    console.log(data);
});
```

**Example**  

```
//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"
    }
```

### .NET/C\$1
<a name="embedded-analytics-visuals-with-anonymous-users-cs"></a>

En el siguiente ejemplo, se muestra el código .NET/C\$1 que puede usar en el servidor de aplicaciones para generar la URL del panel integrado. Puede utilizar esta URL en su sitio web o aplicación para mostrar el panel. 

**Example**  

```
using System;
using Amazon.QuickSight;
using Amazon.QuickSight.Model;

namespace GenerateDashboardEmbedUrlForAnonymousUser
{
    class Program
    {
        static void Main(string[] args)
        {
            var quicksightClient = new AmazonQuickSightClient(
                AccessKey,
                SecretAccessKey,
                SessionToken,
                Amazon.RegionEndpoint.USEast1);
            try
            {
                DashboardVisualId dashboardVisual = new DashboardVisualId
                {
                    DashboardId = "dashboard_id",
                    SheetId = "sheet_id",
                    VisualId = "visual_id"
                };

                AnonymousUserDashboardVisualEmbeddingConfiguration anonymousUserDashboardVisualEmbeddingConfiguration
                    = new AnonymousUserDashboardVisualEmbeddingConfiguration
                    {
                        InitialDashboardVisualId = dashboardVisual                        
                    };               
                    
                AnonymousUserEmbeddingExperienceConfiguration anonymousUserEmbeddingExperienceConfiguration
                    = new AnonymousUserEmbeddingExperienceConfiguration
                    {
                        DashboardVisual = anonymousUserDashboardVisualEmbeddingConfiguration
                    }; 
                    
                Console.WriteLine(
                    quicksightClient.GenerateEmbedUrlForAnonymousUserAsync(new GenerateEmbedUrlForAnonymousUserRequest
                    {
                        AwsAccountId = "111222333444",
                        Namespace = default,
                        // authorizedResourceArns should contain ARN of dashboard used below in ExperienceConfiguration
                        AuthorizedResourceArns = { "dashboard_id" },
                        ExperienceConfiguration = anonymousUserEmbeddingExperienceConfiguration,
                        SessionTags = sessionTags,
                        SessionLifetimeInMinutes = 600,
                    }).Result.EmbedUrl
                );
            } catch (Exception ex) {
                Console.WriteLine(ex.Message);
            }
        }
    }
}
```

### AWS CLI
<a name="embedded-analytics-visuals-with-anonymous-users-cli"></a>

Para asumir la función, elija una de las siguientes AWS Security Token Service (AWS STS) operaciones de API:
+ [AssumeRole](https://docs.aws.amazon.com/STS/latest/APIReference/API_AssumeRole.html)— Utilice esta operación cuando utilice una identidad de IAM para asumir la función.
+ [AssumeRoleWithWebIdentity](https://docs.aws.amazon.com/STS/latest/APIReference/API_AssumeRoleWithWebIdentity.html)— Utilice esta operación cuando utilice un proveedor de identidad web para autenticar a su usuario. 
+ [AssumeRoleWithSaml](https://docs.aws.amazon.com/STS/latest/APIReference/API_AssumeRoleWithSAML.html)— Utilice esta operación cuando utilice el lenguaje de marcado de aserciones de seguridad (SAML) para autenticar a sus usuarios.

En el siguiente ejemplo, se muestra el comando de la CLI para definir el rol de IAM. El rol debe tener los permisos de `quicksight:GenerateEmbedUrlForAnonymousUser` habilitados. 

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

La operación `assume-role` devuelve tres parámetros de salida: la clave de acceso, la clave secreta y el token de sesión. 

**nota**  
Si se produce un error `ExpiredToken` al llamar a la operación `AssumeRole`, probablemente se debe a que el `SESSION TOKEN` anterior aún se encuentra en las variables de entorno. Para retirarlo, establezca las variables siguientes:  
*AWS\$1ACCESS\$1KEY\$1ID* 
*AWS\$1SECRET\$1ACCESS\$1KEY* 
*AWS\$1SESSION\$1TOKEN* 

En el siguiente ejemplo, se muestra cómo definir estos tres parámetros en la CLI. Si utiliza un equipo con Microsoft Windows, utilice `set` en lugar 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"
```

Al ejecutar estos comandos, se define el ID de sesión del rol del usuario que visita su sitio web como `embedding_quicksight_visual_role/QuickSightEmbeddingAnonymousPolicy`. El ID de sesión del rol está compuesto por el nombre del rol de `role-arn` y el valor de `role-session-name`. Al utilizar el ID de sesión del rol único para cada usuario, se garantiza que se definan los permisos correspondientes para cada usuario visitante. También mantiene cada sesión separada y distinta. Si utiliza una serie de servidores web, por ejemplo, para equilibrar la carga, y una sesión se vuelve a conectar a un servidor diferente, se inicia una nueva sesión.

Para obtener una URL firmada para el elemento visual, llame a `generate-embed-url-for-anynymous-user` desde el servidor de aplicaciones. Esta operación devuelve la URL del elemento visual integrable. En el siguiente ejemplo, se muestra cómo generar la URL de un elemento visual integrado mediante una llamada desde el servidor para los usuarios que realizan visitas anónimas a su portal web o aplicación.

```
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 obtener más información sobre cómo usar esta operación, consulte [https://docs.aws.amazon.com/quicksight/latest/APIReference/API_GenerateEmbedUrlForAnonymousUser.html](https://docs.aws.amazon.com/quicksight/latest/APIReference/API_GenerateEmbedUrlForAnonymousUser.html). Puede utilizar esta y otras operaciones de la API en su propio código. 

## Paso 3: integración de la URL del elemento visual
<a name="embedded-analytics-visuals-with-anonymous-users-step-3"></a>


|  | 
| --- |
|  Se aplica a: Enterprise Edition  | 


|  | 
| --- |
|    Público objetivo: desarrolladores de Amazon Quick  | 

En la siguiente sección, encontrará información sobre cómo utilizar el [SDK de incrustación de Amazon Quick Sight](https://www.npmjs.com/package/amazon-quicksight-embedding-sdk) (JavaScript) para incrustar la URL visual del paso 2 en su sitio web o página de aplicación. Con el SDK, puede hacer lo siguiente: 
+ Coloque el elemento visual en una página HTML.
+ Pase los parámetros al elemento visual.
+ Resolver los estados de error con mensajes que se personalizan en su aplicación.

Llamar a la operación de la API `GenerateEmbedUrlForAnonymousUser` para generar la dirección URL que puede integrar en la aplicación. Esta URL es válida durante 5 minutos, y la sesión resultante es válida durante 10 horas. La operación de la API proporciona la URL con un código de autorización (auth) que permite una sesión con inicio único. 

El siguiente es un ejemplo de respuesta de `generate-embed-url-for-anonymous-user`. La `quicksightdomain` de este ejemplo es la URL que utilizas para acceder a tu cuenta de Amazon Quick Sight.

```
//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"
    }
```

Inserte este elemento visual en su página web mediante el [SDK de incrustación](https://www.npmjs.com/package/amazon-quicksight-embedding-sdk) de Amazon Quick Sight o añadiendo esta URL a un iframe. Si estableces un número fijo de altura y anchura (en píxeles), Amazon Quick Sight los usará y no cambiará la imagen a medida que la ventana cambie de tamaño. Si establece un porcentaje relativo de altura y anchura, Amazon Quick Sight proporciona un diseño responsivo que se modifica a medida que cambia el tamaño de la ventana. Con el SDK de incrustación de Amazon Quick Sight, también puede controlar los parámetros visuales y recibir llamadas en función de la finalización de la carga visual y de los errores. 

El dominio que va a alojar elementos visuales integrados debe estar incluido en *allowlist*, la lista de dominios aprobados de la suscripción a Quick . Este requisito protege los datos impidiendo que dominios no aprobados alojen elementos visuales y paneles integrados. Para obtener más información sobre cómo añadir dominios para imágenes y paneles integrados, consulte [Permitir la publicación de dominios en tiempo de ejecución con la API Amazon Quick Sight](https://docs.aws.amazon.com/quicksight/latest/user/embedding-run-time.html).

En el siguiente ejemplo, se muestra cómo utilizar la URL generada. Este código reside en el servidor de aplicaciones.

### SDK 2.0
<a name="embedded-analytics-visuals-with-anonymous-users-sdkv2"></a>

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

### SDK 1.0
<a name="embedded-analytics-visuals-with-anonymous-users-sdkv1"></a>

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

Para que este ejemplo funcione, asegúrese de utilizar el SDK de incrustación de Amazon Quick Sight para cargar el elemento visual incrustado en su sitio web utilizando JavaScript. Para obtener su copia, siga uno de estos pasos:
+ Descargue el [SDK de incrustación de Amazon Quick Sight](https://github.com/awslabs/amazon-quicksight-embedding-sdk#step-3-create-the-quicksight-session-object) desde GitHub. Este repositorio lo mantiene un grupo de desarrolladores de Amazon Quick Sight.
+ Descargue la última versión del SDK QuickSight de incrustación desde [https://www.npmjs.com/package/amazon-quicksight-embedding-sdk](https://www.npmjs.com/package/amazon-quicksight-embedding-sdk).
+ Si lo usas `npm` para JavaScript dependencias, descárgalo e instálalo ejecutando el siguiente comando.

  ```
  npm install amazon-quicksight-embedding-sdk
  ```