Incrustación de paneles de QuickSight para usuarios anónimos (no registrados)
importante
Amazon QuickSight tiene nuevas operaciones de API para integrar análisis: GenerateEmbedUrlForAnonymousUser y GenerateEmbedUrlForRegisteredUser.
Puede seguir utilizando las operaciones de la API de GetDashboardEmbedUrl y GetSessionEmbedUrl para integrar los paneles y la consola de QuickSight, pero no incluyen las funciones de integración más recientes. Para obtener más información sobre la integración mediante las antiguas operaciones de la API, consulte Integración de análisis mediante las operaciones de la API GetDashboardEmbedURL y GetSessionEmbedURL.
| Se aplica a: Enterprise Edition |
| Público al que va dirigido: desarrolladores de Amazon QuickSight |
En las siguientes secciones encontrará información detallada sobre cómo configurar paneles de Amazon QuickSight integrados para usuarios anónimos (no registrados).
Temas
Paso 1: configuración de permisos
| Se aplica a: Enterprise Edition |
| Público al que va dirigido: desarrolladores de Amazon QuickSight |
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 obtenga acceso a un panel asume un rol que le proporcione acceso a Amazon QuickSight y permisos para el panel. Para ello, 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. Le otorga a usted, como desarrollador, la opción de anular los dominios estáticos que están configurados en el menú Administrar QuickSight. 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 parámetro AllowedDomains, consulte GenerateEmbedUrlForAnonymousUser en la referencia de la API de Amazon QuickSight.
La siguiente política de ejemplo ofrece estos permisos para usar con GenerateEmbedUrlForAnonymousUser. Para que este enfoque funcione, también necesita un paquete de sesiones, o un precio por capacidad de sesión, para su Cuenta de AWS. De lo contrario, cuando un usuario intenta acceder al panel de control, se devuelve el error UnsupportedPricingPlanException.
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 panel. En el siguiente ejemplo, se muestra una muestra de política de confianza.
Para obtener más información sobre las políticas de confianza, consulte Credenciales de seguridad temporales en IAM en la Guía del usuario de IAM.
Paso 2: generación de la URL con el código de autenticación adjunto
| Se aplica a: Enterprise Edition |
| Público al que va dirigido: desarrolladores de Amazon QuickSight |
En la siguiente sección, puede obtener información sobre cómo autenticarse en nombre del visitante anónimo y obtener la URL del panel 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 QuickSight, si dicho 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.
import java.util.List; import com.amazonaws.auth.AWSCredentials; import com.amazonaws.auth.AWSCredentialsProvider; import com.amazonaws.auth.BasicAWSCredentials; import com.amazonaws.regions.Regions; import com.amazonaws.services.quicksight.AmazonQuickSight; import com.amazonaws.services.quicksight.AmazonQuickSightClientBuilder; import com.amazonaws.services.quicksight.model.RegisteredUserDashboardEmbeddingConfiguration; import com.amazonaws.services.quicksight.model.AnonymousUserEmbeddingExperienceConfiguration; import com.amazonaws.services.quicksight.model.GenerateEmbedUrlForAnonymousUserRequest; import com.amazonaws.services.quicksight.model.GenerateEmbedUrlForAnonymousUserResult; import com.amazonaws.services.quicksight.model.SessionTag; /** * Class to call QuickSight AWS SDK to generate embed url for anonymous user. */ public class GenerateEmbedUrlForAnonymousUserExample { private final AmazonQuickSight quickSightClient; public GenerateEmbedUrlForAnonymousUserExample() { quickSightClient = AmazonQuickSightClientBuilder .standard() .withRegion(Regions.US_EAST_1.getName()) .withCredentials(new AWSCredentialsProvider() { @Override public AWSCredentials getCredentials() { // provide actual IAM access key and secret key here return new BasicAWSCredentials("access-key", "secret-key"); } @Override public void refresh() { } } ) .build(); } public String GenerateEmbedUrlForAnonymousUser( final String accountId, // YOUR AWS ACCOUNT ID final String initialDashboardId, // DASHBOARD ID TO WHICH THE CONSTRUCTED URL POINTS. final String namespace, // ANONYMOUS EMBEDDING REQUIRES SPECIFYING A VALID NAMESPACE FOR WHICH YOU WANT THE EMBEDDING URL final List<String> authorizedResourceArns, // DASHBOARD ARN LIST TO EMBED final List<String> allowedDomains, // RUNTIME ALLOWED DOMAINS FOR EMBEDDING final List<SessionTag> sessionTags // SESSION TAGS USED FOR ROW-LEVEL SECURITY ) throws Exception { AnonymousUserEmbeddingExperienceConfiguration experienceConfiguration = new AnonymousUserEmbeddingExperienceConfiguration(); AnonymousUserDashboardEmbeddingConfiguration dashboardConfiguration = new AnonymousUserDashboardEmbeddingConfiguration(); dashboardConfiguration.setInitialDashboardId(initialDashboardId); experienceConfiguration.setDashboard(dashboardConfiguration); GenerateEmbedUrlForAnonymousUserRequest generateEmbedUrlForAnonymousUserRequest = new GenerateEmbedUrlForAnonymousUserRequest() .withAwsAccountId(accountId) .withNamespace(namespace) .withAuthorizedResourceArns(authorizedResourceArns) .withExperienceConfiguration(experienceConfiguration) .withSessionTags(sessionTags) .withSessionLifetimeInMinutes(600L); // OPTIONAL: VALUE CAN BE [15-600]. DEFAULT: 600 .withAllowedDomains(allowedDomains); GenerateEmbedUrlForAnonymousUserResult dashboardEmbedUrl = quickSightClient.generateEmbedUrlForAnonymousUser(generateEmbedUrlForAnonymousUserRequest); return dashboardEmbedUrl.getEmbedUrl(); } }
global.fetch = require('node-fetch'); const AWS = require('aws-sdk'); function generateEmbedUrlForAnonymousUser( accountId, // YOUR AWS ACCOUNT ID initialDashboardId, // DASHBOARD ID TO WHICH THE CONSTRUCTED URL POINTS quicksightNamespace, // VALID NAMESPACE WHERE YOU WANT TO DO NOAUTH EMBEDDING authorizedResourceArns, // DASHBOARD ARN LIST TO EMBED allowedDomains, // RUNTIME ALLOWED DOMAINS FOR EMBEDDING sessionTags, // SESSION TAGS USED FOR ROW-LEVEL SECURITY generateEmbedUrlForAnonymousUserCallback, // GENERATEEMBEDURLFORANONYMOUSUSER SUCCESS CALLBACK METHOD errorCallback // GENERATEEMBEDURLFORANONYMOUSUSER ERROR CALLBACK METHOD ) { const experienceConfiguration = { "DashboardVisual": { "InitialDashboardVisualId": { "DashboardId": "dashboard_id", "SheetId": "sheet_id", "VisualId": "visual_id" } } }; const generateEmbedUrlForAnonymousUserParams = { "AwsAccountId": accountId, "Namespace": quicksightNamespace, "AuthorizedResourceArns": authorizedResourceArns, "AllowedDomains": allowedDomains, "ExperienceConfiguration": experienceConfiguration, "SessionTags": sessionTags, "SessionLifetimeInMinutes": 600 }; const quicksightClient = new AWS.QuickSight({ region: process.env.AWS_REGION, credentials: { accessKeyId: AccessKeyId, secretAccessKey: SecretAccessKey, sessionToken: SessionToken, expiration: Expiration } }); quicksightClient.generateEmbedUrlForAnonymousUser(generateEmbedUrlForAnonymousUserParams, function(err, data) { if (err) { console.log(err, err.stack); errorCallback(err); } else { const result = { "statusCode": 200, "headers": { "Access-Control-Allow-Origin": "*", // USE YOUR WEBSITE DOMAIN TO SECURE ACCESS TO THIS API "Access-Control-Allow-Headers": "Content-Type" }, "body": JSON.stringify(data), "isBase64Encoded": false } generateEmbedUrlForAnonymousUserCallback(result); } }); }
import json import boto3 from botocore.exceptions import ClientError import time # Create QuickSight and STS clients quicksightClient = boto3.client('quicksight',region_name='us-west-2') sts = boto3.client('sts') # Function to generate embedded URL for anonymous user # accountId: YOUR AWS ACCOUNT ID # quicksightNamespace: VALID NAMESPACE WHERE YOU WANT TO DO NOAUTH EMBEDDING # authorizedResourceArns: DASHBOARD ARN LIST TO EMBED # allowedDomains: RUNTIME ALLOWED DOMAINS FOR EMBEDDING # dashboardId: DASHBOARD ID TO WHICH THE CONSTRUCTED URL POINTS # sessionTags: SESSION TAGS USED FOR ROW-LEVEL SECURITY def generateEmbedUrlForAnonymousUser(accountId, quicksightNamespace, authorizedResourceArns, allowedDomains, dashboardId, sessionTags): try: response = quicksightClient.generate_embed_url_for_anonymous_user( AwsAccountId = accountId, Namespace = quicksightNamespace, AuthorizedResourceArns = authorizedResourceArns, AllowedDomains = allowedDomains, ExperienceConfiguration = { "Dashboard": { "InitialDashboardId": dashboardId } }, SessionTags = sessionTags, SessionLifetimeInMinutes = 600 ) return { 'statusCode': 200, 'headers': {"Access-Control-Allow-Origin": "*", "Access-Control-Allow-Headers": "Content-Type"}, 'body': json.dumps(response), 'isBase64Encoded': bool('false') } except ClientError as e: print(e) return "Error generating embeddedURL: " + str(e)
En el siguiente ejemplo, se muestra el código 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.
const AWS = require('aws-sdk'); const https = require('https'); var quicksightClient = new AWS.Service({ apiConfig: require('./quicksight-2018-04-01.min.json'), region: 'us-east-1', }); quicksightClient.generateEmbedUrlForAnonymousUser({ 'AwsAccountId': '111122223333', 'Namespace' : 'default', 'AuthorizedResourceArns': authorizedResourceArns, 'AllowedDomains': allowedDomains, 'ExperienceConfiguration': experienceConfiguration, 'SessionTags': sessionTags, 'SessionLifetimeInMinutes': 600 }, function(err, data) { console.log('Errors: '); console.log(err); console.log('Response: '); console.log(data); });
//The URL returned is over 900 characters. For this example, we've shortened the string for //readability and added ellipsis to indicate that it's incomplete. { Status: 200, EmbedUrl: 'https://quicksightdomain/embed/12345/dashboards/67890..', RequestId: '7bee030e-f191-45c4-97fe-d9faf0e03713' }
En el siguiente ejemplo, se muestra el código .NET/C# 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.
using System; using Amazon.QuickSight; using Amazon.QuickSight.Model; var quicksightClient = new AmazonQuickSightClient( AccessKey, SecretAccessKey, sessionToken, Amazon.RegionEndpoint.USEast1); try { Console.WriteLine( quicksightClient.GenerateEmbedUrlForAnonymousUserAsync(new GenerateEmbedUrlForAnonymousUserRequest { AwsAccountId = "111122223333", Namespace = default, AuthorizedResourceArns = authorizedResourceArns, AllowedDomains = allowedDomains, ExperienceConfiguration = experienceConfiguration, SessionTags = sessionTags, SessionLifetimeInMinutes = 600, }).Result.EmbedUrl ); } catch (Exception ex) { Console.WriteLine(ex.Message); }
Para asumir el rol, elija una de las siguientes operaciones de la API de AWS Security Token Service (AWS STS):
-
AssumeRole: utilice esta operación cuando use una identidad de IAM para asumir el rol.
-
AssumeRoleWithWebIdentity: utilice esta operación cuando utilice un proveedor de identidad web para autenticar al usuario.
-
AssumeRoleWithSaml: utilice esta operación cuando use el lenguaje de marcado para confirmaciones de seguridad (SAML) para autenticar a los 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-nameanonymous 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_ACCESS_KEY_ID
-
AWS_SECRET_ACCESS_KEY
-
AWS_SESSION_TOKEN
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_dashboard_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 panel, llame a generate-embed-url-for-anynymous-user desde el servidor de aplicaciones. Esta operación devuelve la URL del panel integrable. En el siguiente ejemplo, se muestra cómo generar la URL de un panel 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-id111122223333\ --namespacedefault-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 GenerateEmbedUrlForAnonymousUser. Puede utilizar esta y otras operaciones de la API en su propio código.
Paso 3 integración de la URL del panel
| Se aplica a: Enterprise Edition |
| Público al que va dirigido: desarrolladores de Amazon QuickSight |
En la siguiente sección, puede obtener información sobre cómo utilizar el SDK de integración de QuickSight
-
Coloque el panel en una página HTML.
-
Transferir los parámetros al panel.
-
Resolver los estados de error con mensajes que se personalizan en su aplicación.
Llamar a la operación de la API GenerateEmbedUrlForAnynymousUser 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 auth_code que permite una sesión con inicio único.
El siguiente es un ejemplo de respuesta de generate-embed-url-for-anynymous-user.
//The URL returned is over 900 characters. For this example, we've shortened the string for //readability and added ellipsis to indicate that it's incomplete. { "Status": "200", "EmbedUrl": "https://quicksightdomain/embed/12345/dashboards/67890..", "RequestId": "7bee030e-f191-45c4-97fe-d9faf0e03713" }
Integre este panel en su página web con el SDK de integración de QuickSight
El dominio que va a alojar paneles integrados deben estar incluido en la lista de permitidos, la lista de dominios aprobados de la suscripción a Quick Suite. Este requisito protege los datos impidiendo que dominios no aprobados alojen paneles integrados. Para obtener más información acerca de añadir dominios a los paneles integrados, consulte Permiso para la publicación de dominios en tiempo de ejecución con la API QuickSight.
En el siguiente ejemplo, se muestra cómo utilizar la URL generada. Este código reside en el servidor de aplicaciones.
<!DOCTYPE html> <html> <head> <title>Dashboard Embedding Example</title> <script src="https://unpkg.com/amazon-quicksight-embedding-sdk@2.0.0/dist/quicksight-embedding-js-sdk.min.js"></script> <script type="text/javascript"> const embedDashboard = async() => { const { createEmbeddingContext, } = QuickSightEmbedding; const embeddingContext = await createEmbeddingContext({ onChange: (changeEvent, metadata) => { console.log('Context received a change', changeEvent, metadata); }, }); const frameOptions = { url: '<YOUR_EMBED_URL>', container: '#experience-container', height: "700px", width: "1000px", onChange: (changeEvent, metadata) => { switch (changeEvent.eventName) { case 'FRAME_MOUNTED': { console.log("Do something when the experience frame is mounted."); break; } case 'FRAME_LOADED': { console.log("Do something when the experience frame is loaded."); break; } } }, }; const contentOptions = { parameters: [ { Name: 'country', Values: [ 'United States' ], }, { Name: 'states', Values: [ 'California', 'Washington' ] } ], locale: "en-US", sheetOptions: { initialSheetId: '<YOUR_SHEETID>', singleSheet: false, emitSizeChangedEventOnSheetChange: false, }, toolbarOptions: { export: false, undoRedo: false, reset: false }, attributionOptions: { overlayContent: false, }, onMessage: async (messageEvent, experienceMetadata) => { switch (messageEvent.eventName) { case 'CONTENT_LOADED': { console.log("All visuals are loaded. The title of the document:", messageEvent.message.title); break; } case 'ERROR_OCCURRED': { console.log("Error occurred while rendering the experience. Error code:", messageEvent.message.errorCode); break; } case 'PARAMETERS_CHANGED': { console.log("Parameters changed. Changed parameters:", messageEvent.message.changedParameters); break; } case 'SELECTED_SHEET_CHANGED': { console.log("Selected sheet changed. Selected sheet:", messageEvent.message.selectedSheet); break; } case 'SIZE_CHANGED': { console.log("Size changed. New dimensions:", messageEvent.message); break; } case 'MODAL_OPENED': { window.scrollTo({ top: 0 // iframe top position }); break; } } }, }; const embeddedDashboardExperience = await embeddingContext.embedDashboard(frameOptions, contentOptions); const selectCountryElement = document.getElementById('country'); selectCountryElement.addEventListener('change', (event) => { embeddedDashboardExperience.setParameters([ { Name: 'country', Values: event.target.value } ]); }); }; </script> </head> <body onload="embedDashboard()"> <span> <label for="country">Country</label> <select id="country" name="country"> <option value="United States">United States</option> <option value="Mexico">Mexico</option> <option value="Canada">Canada</option> </select> </span> <div id="experience-container"></div> </body> </html>
<!DOCTYPE html> <html> <head> <title>Basic Embed</title> <script src="https://unpkg.com/amazon-quicksight-embedding-sdk@1.0.15/dist/quicksight-embedding-js-sdk.min.js"></script> <script type="text/javascript"> var dashboard function onDashboardLoad(payload) { console.log("Do something when the dashboard is fully loaded."); } function onError(payload) { console.log("Do something when the dashboard fails loading"); } function embedDashboard() { var containerDiv = document.getElementById("embeddingContainer"); var options = { // replace this dummy url with the one generated via embedding API url: "https://us-east-1.quicksight.aws.amazon.com/sn/dashboards/dashboardId?isauthcode=true&identityprovider=quicksight&code=authcode", container: containerDiv, parameters: { country: "United States" }, scrolling: "no", height: "700px", width: "1000px", locale: "en-US", footerPaddingEnabled: true }; dashboard = QuickSightEmbedding.embedDashboard(options); dashboard.on("error", onError); dashboard.on("load", onDashboardLoad); } function onCountryChange(obj) { dashboard.setParameters({country: obj.value}); } </script> </head> <body onload="embedDashboard()"> <span> <label for="country">Country</label> <select id="country" name="country" onchange="onCountryChange(this)"> <option value="United States">United States</option> <option value="Mexico">Mexico</option> <option value="Canada">Canada</option> </select> </span> <div id="embeddingContainer"></div> </body> </html>
Para que este ejemplo funcione, asegúrese de utilizar el SDK de integración de QuickSight para cargar el panel integrado en su sitio web mediante JavaScript. Para obtener su copia, siga uno de estos pasos:
-
Descargue el SDK de integración de Amazon QuickSight
desde GitHub. Este repositorio lo mantiene un grupo de desarrolladores de QuickSight. -
Descargue la última versión del SDK de integración de QuickSight desde https://www.npmjs.com/package/amazon-quicksight-embedding-sdk
. -
Si usa
npmpara dependencias de JavaScript, descárguelo e instálelo ejecutando el siguiente comando.npm install amazon-quicksight-embedding-sdk