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.
| Se aplica a: Enterprise Edition |
| Público objetivo: QuickSight desarrolladores de Amazon |
En las siguientes secciones, encontrarás información detallada sobre cómo configurar los QuickSight elementos visuales incrustados de Amazon para los usuarios registrados de Amazon QuickSight.
Temas
Paso 1: configuración de permisos
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 aIAM.
Cada usuario que accede a una imagen asume un rol que le da QuickSight acceso y permisos a Amazon para acceder a la imagen. Para que esto sea posible, crea un IAM rol en tu Cuenta de AWS. Asocie una IAM política al rol para proporcionar permisos a cualquier usuario que lo asuma. El IAM rol debe proporcionar permisos para recuperar la incrustación de URLs un grupo de usuarios específico. Con la ayuda del carácter comodín *, puede conceder los permisos URL para generar un a todos los usuarios de un espacio de nombres específico o a un subconjunto de usuarios de espacios de nombres específicos. Para ello, añada quicksight:GenerateEmbedUrlForRegisteredUser.
Puede crear una condición en su IAM política que limite los dominios que los desarrolladores pueden incluir en el parámetro de una operación. AllowedDomains GenerateEmbedUrlForAnonymousUser API El parámetro AllowedDomains es opcional. Como desarrollador, tiene la opción de anular los dominios estáticos que están configurados en el QuickSight menú Administrar. En su lugar, puedes enumerar hasta tres dominios o subdominios que pueden acceder a uno generado. URL A continuación, URL se incrusta en el sitio web que crees. 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, agrega una AllowedEmbeddingDomains condición a tu IAM política. Para obtener más información sobre el AllowedDomains parámetro, consulta GenerateEmbedUrlForRegisteredUserAmazon QuickSight API Reference.
La siguiente política de ejemplo ofrece estos permisos.
{ "Version": "2012-10-17", "Statement": [ { "Effect": "Allow", "Action": [ "quicksight:GenerateEmbedUrlForRegisteredUser" ], "Resource": "arn:partition:quicksight:region:accountId:user/namespace/userName", "Condition": { "ForAllValues:StringEquals": { "quicksight:AllowedEmbeddingDomains": [ "https://my.static.domain1.com", "https://*.my.static.domain2.com" ] } } } ] }
Además, si vas a crear usuarios primerizos que vayan a ser QuickSight lectores de Amazon, asegúrate de añadir el quicksight:RegisterUser permiso en la política.
El siguiente ejemplo de política proporciona permiso para recuperar una incrustación URL a los usuarios primerizos que vayan a ser lectores. QuickSight
{
"Version": "2012-10-17",
"Statement": [
{
"Action": "quicksight:RegisterUser",
"Resource": "*",
"Effect": "Allow"
},
{
"Effect": "Allow",
"Action": [
"quicksight:GenerateEmbedUrlForRegisteredUser"
],
"Resource": [
"arn:{{partition}}:quicksight:{{region}}:{{accountId}}:namespace/{{namespace}}",
"arn:{{partition}}:quicksight:{{region}}:{{accountId}}:dashboard/{{dashboardId-1}}",
"arn:{{partition}}:quicksight:{{region}}:{{accountId}}:dashboard/{{dashboardId-2}}"
],
"Condition": {
"ForAllValues:StringEquals": {
"quicksight:AllowedEmbeddingDomains": [
"https://my.static.domain1.com",
"https://*.my.static.domain2.com"
]
}
}
}
]
}Por último, la IAM identidad 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 tu aplicación, esta puede asumir la función en nombre del usuario y aprovisionarlo. QuickSight En el siguiente ejemplo, se muestra una muestra de política de confianza.
{
"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 OpenID Connect o la SAML autenticación, consulte las siguientes secciones de la Guía del IAMusuario:
Paso 2: generarlo URL con el código de autenticación adjunto
En la siguiente sección, puede averiguar cómo autenticar a su QuickSight usuario y obtener la imagen URL integrable en su servidor de aplicaciones. Si planea incrustar imágenes para tipos de QuickSight identidad IAM o tipos de identidad, compártalas con los usuarios. QuickSight
Cuando un QuickSight usuario accede a tu aplicación, la aplicación asume la IAM función en nombre del QuickSight usuario. A continuación, agrega el usuario a QuickSight, si ese QuickSight usuario aún no existe. A continuación, transfiere un identificador como ID de sesión de rol único.
Al llevar a cabo los pasos descritos, se garantiza que cada espectador de la imagen se aprovisione de forma única. QuickSight 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.
En los siguientes ejemplos, se realiza la IAM autenticación en nombre del QuickSight usuario. Este código se ejecuta en el servidor de aplicaciones.
import com.amazonaws.auth.AWSCredentials;
import com.amazonaws.auth.BasicAWSCredentials;
import com.amazonaws.auth.AWSCredentialsProvider;
import com.amazonaws.regions.Regions;
import com.amazonaws.services.quicksight.AmazonQuickSight;
import com.amazonaws.services.quicksight.AmazonQuickSightClientBuilder;
import com.amazonaws.services.quicksight.model.DashboardVisualId;
import com.amazonaws.services.quicksight.model.GenerateEmbedUrlForRegisteredUserRequest;
import com.amazonaws.services.quicksight.model.GenerateEmbedUrlForRegisteredUserResult;
import com.amazonaws.services.quicksight.model.RegisteredUserDashboardVisualEmbeddingConfiguration;
import com.amazonaws.services.quicksight.model.RegisteredUserEmbeddingExperienceConfiguration;
import java.util.List;
/**
* Class to call QuickSight AWS SDK to get url for Visual embedding.
*/
public class GenerateEmbedUrlForRegisteredUserTest {
private final AmazonQuickSight quickSightClient;
public GenerateEmbedUrlForRegisteredUserTest() {
this.quickSightClient = AmazonQuickSightClientBuilder
.standard()
.withRegion(Regions.US_EAST_1.getName())
.withCredentials(new AWSCredentialsProvider() {
@Override
public AWSCredentials getCredentials() {
// provide actual IAM access key and secret key here
return new BasicAWSCredentials("access-key", "secret-key");
}
@Override
public void refresh() {
}
}
)
.build();
}
public String getEmbedUrl(
final String accountId, // AWS Account ID
final String dashboardId, // Dashboard ID of the dashboard to embed
final String sheetId, // Sheet ID of the sheet to embed
final String visualId, // Visual ID of the visual to embed
final List<String> allowedDomains, // Runtime allowed domains for embedding
final String userArn // Registered user arn of the user that you want to provide embedded visual. Refer to Get Embed Url section in developer portal to find out how to get user arn for a QuickSight user.
) throws Exception {
final DashboardVisualId dashboardVisual = new DashboardVisualId()
.withDashboardId(dashboardId)
.withSheetId(sheetId)
.withVisualId(visualId);
final RegisteredUserDashboardVisualEmbeddingConfiguration registeredUserDashboardVisualEmbeddingConfiguration
= new RegisteredUserDashboardVisualEmbeddingConfiguration()
.withInitialDashboardVisualId(dashboardVisual);
final RegisteredUserEmbeddingExperienceConfiguration registeredUserEmbeddingExperienceConfiguration
= new RegisteredUserEmbeddingExperienceConfiguration()
.withDashboardVisual(registeredUserDashboardVisualEmbeddingConfiguration);
final GenerateEmbedUrlForRegisteredUserRequest generateEmbedUrlForRegisteredUserRequest
= new GenerateEmbedUrlForRegisteredUserRequest()
.withAwsAccountId(accountId)
.withUserArn(userArn)
.withExperienceConfiguration(registeredUserEmbeddingExperienceConfiguration)
.withAllowedDomains(allowedDomains);
final GenerateEmbedUrlForRegisteredUserResult generateEmbedUrlForRegisteredUserResult = quickSightClient.generateEmbedUrlForRegisteredUser(generateEmbedUrlForRegisteredUserRequest);
return generateEmbedUrlForRegisteredUserResult.getEmbedUrl();
}
}global.fetch = require('node-fetch');
const AWS = require('aws-sdk');
function generateEmbedUrlForRegisteredUser(
accountId, // Your AWS account ID
dashboardId, // Dashboard ID to which the constructed URL points
sheetId, // Sheet ID to which the constructed URL points
visualId, // Visual ID to which the constructed URL points
openIdToken, // Cognito-based token
userArn, // registered user arn
roleArn, // IAM user role to use for embedding
sessionName, // Session name for the roleArn assume role
allowedDomains, // Runtime allowed domain for embedding
getEmbedUrlCallback, // GetEmbedUrl success callback method
errorCallback // GetEmbedUrl error callback method
) {
const stsClient = new AWS.STS();
let stsParams = {
RoleSessionName: sessionName,
WebIdentityToken: openIdToken,
RoleArn: roleArn
}
stsClient.assumeRoleWithWebIdentity(stsParams, function(err, data) {
if (err) {
console.log('Error assuming role');
console.log(err, err.stack);
errorCallback(err);
} else {
const getDashboardParams = {
"AwsAccountId": accountId,
"ExperienceConfiguration": {
"DashboardVisual": {
"InitialDashboardVisualId": {
"DashboardId": dashboardId,
"SheetId": sheetId,
"VisualId": visualId
}
}
},
"UserArn": userArn,
"AllowedDomains": allowedDomains,
"SessionLifetimeInMinutes": 600
};
const quicksightGetDashboard = new AWS.QuickSight({
region: process.env.AWS_REGION,
credentials: {
accessKeyId: data.Credentials.AccessKeyId,
secretAccessKey: data.Credentials.SecretAccessKey,
sessionToken: data.Credentials.SessionToken,
expiration: data.Credentials.Expiration
}
});
quicksightGetDashboard.generateEmbedUrlForRegisteredUser(getDashboardParams, function(err, data) {
if (err) {
console.log(err, err.stack);
errorCallback(err);
} else {
const result = {
"statusCode": 200,
"headers": {
"Access-Control-Allow-Origin": "*", // Use your website domain to secure access to GetEmbedUrl API
"Access-Control-Allow-Headers": "Content-Type"
},
"body": JSON.stringify(data),
"isBase64Encoded": false
}
getEmbedUrlCallback(result);
}
});
}
});
}import json
import boto3
from botocore.exceptions import ClientError
sts = boto3.client('sts')
# Function to generate embedded URL
# accountId: AWS account ID
# dashboardId: Dashboard ID to embed
# sheetId: SHEET ID to embed from the dashboard
# visualId: Id for the Visual you want to embedded from the dashboard sheet.
# userArn: arn of registered user
# allowedDomains: Runtime allowed domain for embedding
# roleArn: IAM user role to use for embedding
# sessionName: session name for the roleArn assume role
def getEmbeddingURL(accountId, dashboardId, sheetId, visualId, userArn, allowedDomains, roleArn, sessionName):
try:
assumedRole = sts.assume_role(
RoleArn = roleArn,
RoleSessionName = sessionName,
)
except ClientError as e:
return "Error assuming role: " + str(e)
else:
assumedRoleSession = boto3.Session(
aws_access_key_id = assumedRole['Credentials']['AccessKeyId'],
aws_secret_access_key = assumedRole['Credentials']['SecretAccessKey'],
aws_session_token = assumedRole['Credentials']['SessionToken'],
)
try:
quicksightClient = assumedRoleSession.client('quicksight', region_name='us-west-2')
response = quicksightClient.generate_embed_url_for_registered_user(
AwsAccountId=accountId,
ExperienceConfiguration = {
'DashboardVisual': {
'InitialDashboardVisualId': {
'DashboardId': dashboardId,
'SheetId': sheetId,
'VisualId': visualId
}
},
},
UserArn = userArn,
AllowedDomains = allowedDomains,
SessionLifetimeInMinutes = 600
)
return {
'statusCode': 200,
'headers': {"Access-Control-Allow-Origin": "*", "Access-Control-Allow-Headers": "Content-Type"},
'body': json.dumps(response),
'isBase64Encoded': bool('false')
}
except ClientError as e:
return "Error generating embedding url: " + str(e)
El siguiente ejemplo muestra el archivo JavaScript (Node.js) que puede usar en el servidor de aplicaciones URL para generar el panel integrado. Puede usarlo URL en su sitio web o aplicación para mostrar el panel.
const AWS = require('aws-sdk');
const https = require('https');
var quicksightClient = new AWS.Service({
apiConfig: require('./quicksight-2018-04-01.min.json'),
region: 'us-east-1',
});
quicksightClient.generateEmbedUrlForRegisteredUser({
'AwsAccountId': '111122223333',
'ExperienceConfiguration': {
'DashboardVisual': {
'InitialDashboardVisualId': {
'DashboardId': 'dashboard_id',
'SheetId': 'sheet_id',
'VisualId': 'visual_id'
}
}
},
'UserArn': 'REGISTERED_USER_ARN',
'AllowedDomains': allowedDomains,
'SessionLifetimeInMinutes': 100
}, function(err, data) {
console.log('Errors: ');
console.log(err);
console.log('Response: ');
console.log(data);
});//The URL returned is over 900 characters. For this example, we've shortened the string for //readability and added ellipsis to indicate that it's incomplete. { "Status": "200", "EmbedUrl": "https://quicksightdomain/embed/12345/dashboards/67890/sheets/12345/visuals/67890...", "RequestId": "7bee030e-f191-45c4-97fe-d9faf0e03713" }
El siguiente ejemplo muestra el. NETCódigo /C # que puede usar en el servidor de aplicaciones para generar el código URL para el panel integrado. Puede usarlo URL en su sitio web o aplicación para mostrar el panel.
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);
}
}
}
}Para asumir el rol, elija una de las siguientes API operaciones AWS Security Token Service (AWS STS):
-
AssumeRole— Utilice esta operación cuando utilice una IAM identidad para asumir el rol.
-
AssumeRoleWithWebIdentity— Utilice esta operación cuando utilice un proveedor de identidad web para autenticar a su usuario.
-
AssumeRoleWithSaml— Usa esta operación cuando la utilices SAML para autenticar a tus usuarios.
En el siguiente ejemplo, se muestra el CLI comando para establecer el IAM rol. El rol debe tener los permisos de quicksight:GenerateEmbedUrlForRegisteredUser habilitados. Si opta por añadir just-in-time usuarios la primera vez que abren un panel, el rol también necesita tener habilitados los permisosquicksight:RegisterUser.
aws sts assume-role \ --role-arn "arn:aws:iam::111122223333:role/embedding_quicksight_visual_role" \ --role-session-namejohn.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_ACCESS_ KEY _ID
-
AWS_SECRET_ACCESS_KEY
-
AWS_SESSION_TOKEN
El siguiente ejemplo muestra cómo configurar estos tres parámetros en. 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 QuickSight desde varias ubicaciones.
El ID de sesión del rol también se convierte en el nombre de usuario en QuickSight. Puede utilizar este patrón para aprovisionar a sus usuarios QuickSight con antelación o para aprovisionarlos la primera vez que accedan al panel de control.
El siguiente ejemplo muestra el CLI comando que puede usar para aprovisionar un usuario. Para obtener más información RegisterUsery otras QuickSight API operaciones, consulte la QuickSight APIReferencia. DescribeUser
aws quicksight register-user \ --aws-account-id111122223333\ --namespacedefault\ --identity-typeIAM\ --iam-arn "arn:aws:iam::111122223333:role/embedding_quicksight_visual_role" \ --user-roleREADER\ --user-namejhnd\ --session-name "john.doe@example.com" \ --emailjohn.doe@example.com\ --regionus-east-1\ --custom-permissions-nameTeamA1
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 QuickSight accedan. Para los usuarios de Microsoft AD, puede utilizar DescribeUser para obtener el usuarioARN.
La primera vez que un usuario accede QuickSight, también puedes agregarlo al grupo con el que se comparte la imagen. En el siguiente ejemplo, se muestra el CLI comando 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 y que tiene acceso a lo visual. QuickSight
Por último, para obtener una firma URL para la imagen, llama generate-embed-url-for-registered-user desde el servidor de la aplicación. Esto devuelve la imagen que se puede incrustar. URL En el siguiente ejemplo, se muestra cómo generar un elemento visual incrustado mediante una llamada desde el URL servidor para los usuarios autenticados mediante un inicio de sesión único (Identity AWS Managed Microsoft AD Center). IAM
aws quicksight generate-embed-url-for-registered-user \ --aws-account-id111122223333\ --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 el uso de esta operación, consulte GenerateEmbedUrlForRegisteredUser. Puede utilizar esta y otras API operaciones en su propio código.
Paso 3: incrusta lo visual URL
En la siguiente sección, puede averiguar cómo puede utilizar Amazon QuickSight Embedding SDK
-
Coloca la imagen en una HTML página.
-
Pase los parámetros al elemento visual.
-
Resolver los estados de error con mensajes que se personalizan en su aplicación.
Llama a la GenerateEmbedUrlForRegisteredUser API operación para generar lo URL que puedas incrustar en tu aplicación. Esto URL es válido durante 5 minutos y la sesión resultante es válida durante un máximo de 10 horas. La API operación URL proporciona una auth_code que permite una sesión de inicio de sesión único.
El siguiente es un ejemplo de respuesta de generate-embed-url-for-registered-user. El quicksightdomain
//The URL returned is over 900 characters. For this example, we've shortened the string for //readability and added ellipsis to indicate that it's incomplete. { "Status": "200", "EmbedUrl": "https://quicksightdomain/embed/12345/dashboards/67890/sheets/12345/visuals/67890...", "RequestId": "7bee030e-f191-45c4-97fe-d9faf0e03713" }
Inserta esta imagen en tu página web mediante la QuickSight incrustación SDK
El dominio que alojará las imágenes y los paneles incrustados debe estar en la lista de dominios permitidos, es decir, los dominios aprobados para su suscripción. Amazon QuickSight Este requisito protege los datos impidiendo que dominios no aprobados alojen elementos visuales y paneles integrados. Para obtener más información acerca de añadir dominios a los paneles y elementos visuales integrados, consulte Permita publicar dominios en tiempo de ejecución con QuickSight API.
En el siguiente ejemplo, se muestra cómo utilizar los generados. URL Este código se genera en el servidor de aplicaciones.
<!DOCTYPE html>
<html>
<head>
<title>Visual Embedding Example</title>
<script src="https://unpkg.com/amazon-quicksight-embedding-sdk@2.0.0/dist/quicksight-embedding-js-sdk.min.js"></script>
<script type="text/javascript">
const embedVisual = async() => {
const {
createEmbeddingContext,
} = QuickSightEmbedding;
const embeddingContext = await createEmbeddingContext({
onChange: (changeEvent, metadata) => {
console.log('Context received a change', changeEvent, metadata);
},
});
const frameOptions = {
url: "<YOUR_EMBED_URL>", // replace this value with the url generated via embedding API
container: '#experience-container',
height: "700px",
width: "1000px",
onChange: (changeEvent, metadata) => {
switch (changeEvent.eventName) {
case 'FRAME_MOUNTED': {
console.log("Do something when the experience frame is mounted.");
break;
}
case 'FRAME_LOADED': {
console.log("Do something when the experience frame is loaded.");
break;
}
}
},
};
const contentOptions = {
parameters: [
{
Name: 'country',
Values: ['United States'],
},
{
Name: 'states',
Values: [
'California',
'Washington'
]
}
],
locale: "en-US",
onMessage: async (messageEvent, experienceMetadata) => {
switch (messageEvent.eventName) {
case 'CONTENT_LOADED': {
console.log("All visuals are loaded. The title of the document:", messageEvent.message.title);
break;
}
case 'ERROR_OCCURRED': {
console.log("Error occured while rendering the experience. Error code:", messageEvent.message.errorCode);
break;
}
case 'PARAMETERS_CHANGED': {
console.log("Parameters changed. Changed parameters:", messageEvent.message.changedParameters);
break;
}
case 'SIZE_CHANGED': {
console.log("Size changed. New dimensions:", messageEvent.message);
break;
}
}
},
};
const embeddedVisualExperience = await embeddingContext.embedVisual(frameOptions, contentOptions);
const selectCountryElement = document.getElementById('country');
selectCountryElement.addEventListener('change', (event) => {
embeddedVisualExperience.setParameters([
{
Name: 'country',
Values: event.target.value
}
]);
});
};
</script>
</head>
<body onload="embedVisual()">
<span>
<label for="country">Country</label>
<select id="country" name="country">
<option value="United States">United States</option>
<option value="Mexico">Mexico</option>
<option value="Canada">Canada</option>
</select>
</span>
<div id="experience-container"></div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>Visual Embedding Example</title>
<!-- You can download the latest QuickSight embedding SDK version from https://www.npmjs.com/package/amazon-quicksight-embedding-sdk -->
<!-- Or you can do "npm install amazon-quicksight-embedding-sdk", if you use npm for javascript dependencies -->
<script src="./quicksight-embedding-js-sdk.min.js"></script>
<script type="text/javascript">
let embeddedVisualExperience;
function onVisualLoad(payload) {
console.log("Do something when the visual is fully loaded.");
}
function onError(payload) {
console.log("Do something when the visual fails loading");
}
function embedVisual() {
const containerDiv = document.getElementById("embeddingContainer");
const options = {
url: "<YOUR_EMBED_URL>", // replace this value with the url generated via embedding API
container: containerDiv,
parameters: {
country: "United States"
},
height: "700px",
width: "1000px",
locale: "en-US"
};
embeddedVisualExperience = QuickSightEmbedding.embedVisual(options);
embeddedVisualExperience.on("error", onError);
embeddedVisualExperience.on("load", onVisualLoad);
}
function onCountryChange(obj) {
embeddedVisualExperience.setParameters({country: obj.value});
}
</script>
</head>
<body onload="embedVisual()">
<span>
<label for="country">Country</label>
<select id="country" name="country" onchange="onCountryChange(this)">
<option value="United States">United States</option>
<option value="Mexico">Mexico</option>
<option value="Canada">Canada</option>
</select>
</span>
<div id="embeddingContainer"></div>
</body>
</html>Para que este ejemplo funcione, asegúrese de utilizar Amazon QuickSight Embedding SDK para cargar la imagen incrustada en su sitio web utilizando JavaScript. Para obtener su copia, siga uno de estos pasos:
-
Descarga Amazon QuickSight Embedding SDK
desde GitHub. Este repositorio lo mantiene un grupo de QuickSight desarrolladores. -
Descargue la última SDK versión de incrustación desde https://www.npmjs.com/package/amazon-quicksight-embedding-sdk
. -
Si lo usa
npmpara JavaScript dependencias, descárguelo e instálelo ejecutando el siguiente comando.npm install amazon-quicksight-embedding-sdk
