Incorpore componentes visuales de Amazon Quick Sight en aplicaciones web mediante Amazon Cognito y la automatización iAC - Recomendaciones de AWS
ResumenRequisitos previos y limitacionesArquitecturaTools (Herramientas)Prácticas recomendadasEpicsResolución de problemasRecursos relacionados

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.

Incorpore componentes visuales de Amazon Quick Sight en aplicaciones web mediante Amazon Cognito y la automatización iAC

Ishita Gupta y Srishti Wadhwa, Amazon Web Services

Resumen

Este patrón ofrece un enfoque especializado para integrar los componentes visuales de Amazon Quick Sight en las aplicaciones de React mediante la incorporación de usuarios registrados con la autenticación simplificada de Amazon Cognito. Luego, estos recursos se implementan a través de una plantilla de infraestructura como código (IaC). A diferencia de la integración tradicional de cuadros de mando, esta solución aísla cuadros y gráficos específicos para integrarlos directamente en las aplicaciones de React, lo que mejora drásticamente tanto el rendimiento como la experiencia del usuario.

La arquitectura establece un flujo de autenticación eficiente entre la administración de usuarios de Amazon Cognito y los permisos de Quick Sight: los usuarios se autentican a través de Amazon Cognito y acceden a sus visualizaciones autorizadas según las reglas de uso compartido de paneles de Quick Sight. Este enfoque simplificado elimina la necesidad de acceder directamente a la consola Quick Sight y, al mismo tiempo, mantiene sólidos controles de seguridad.

El entorno completo se implementa a través de una AWS CloudFormation plantilla única que aprovisiona todos los componentes de infraestructura necesarios, incluidos:

  • Un backend sin servidor que utiliza Amazon API AWS Lambda Gateway

  • Alojamiento frontend seguro a través de Amazon CloudFront, Amazon Simple Storage Service (Amazon S3) y AWS WAF

  • Administración de identidades mediante Amazon Cognito

Todos los componentes se configuran siguiendo las prácticas recomendadas de seguridad con políticas de privilegios mínimos AWS Identity and Access Management (IAM), AWS WAF protección y cifrado. end-to-end

Esta solución es ideal para los equipos de desarrollo y las organizaciones que desean integrar análisis interactivos y seguros en sus aplicaciones y, al mismo tiempo, mantener un control detallado del acceso de los usuarios. La solución utiliza servicios AWS gestionados y automatización para simplificar el proceso de integración, mejorar la seguridad y garantizar la escalabilidad para satisfacer las cambiantes necesidades empresariales.

Público objetivo y casos de uso:

  • Desarrolladores front-end que desean integrar análisis en las aplicaciones de React

  • Equipos de productos de software como servicio (SaaS) que desean ofrecer visualizaciones de datos por usuario o basadas en roles

  • Arquitectos de soluciones que estén interesados en integrar la analítica en portales personalizados AWS

  • Desarrolladores de inteligencia empresarial (BI) que desean exponer imágenes a usuarios autenticados sin necesidad de acceder por completo al panel de control

  • Equipos empresariales que desean integrar gráficos interactivos de Quick Sight en las herramientas internas

Requisitos previos y limitaciones

Requisitos previos 

Para implementar correctamente este patrón, asegúrese de que se cuente con lo siguiente:

  • Activo Cuenta de AWS: y Cuenta de AWS con permisos para implementar CloudFormation pilas y crear recursos de Lambda, API Gateway, Amazon Cognito CloudFront y Amazon S3.

  • Cuenta Amazon Quick Sight: una cuenta Quick Sight activa con al menos un panel de control que contiene imágenes. Para obtener instrucciones de configuración, consulte el Tutorial: Creación de un panel de Amazon Quick Sight con datos de ejemplo en la documentación de Amazon Quick Suite.

  • Un entorno de desarrollo que consta de:

    • Node.js (versión 16 o posterior)

    • npm o yarn instalados

    • Vite como herramienta de compilación de React

    • React (versión 19.1.1)

  • Uso compartido de paneles: los paneles deben compartirse en Quick Sight y el implementador debe iniciar sesión para acceder a las imágenes o paneles integrados.

Limitaciones

  • Este patrón utiliza el método de incrustación de usuarios registrados, que requiere que los implementadores tengan una cuenta de Quick Sight activa.

  • El acceso está restringido a los paneles e imágenes que se comparten explícitamente con el usuario autenticado de Quick Sight que está implementando este patrón. Si el implementador no tiene los derechos de acceso correctos, la generación de la URL incrustada fallará y las imágenes no se cargarán.

  • La CloudFormation pila debe implementarse en un entorno en el que Región de AWS se admitan Quick Sight, API Gateway y Amazon Cognito. Para conocer la disponibilidad de las regiones, consulte Servicios de AWS by Region.

Versiones de producto

Arquitectura

Arquitectura de destino

En el siguiente diagrama se muestran los componentes de la arquitectura y el flujo de trabajo de este patrón.

Arquitectura y flujo de trabajo para incrustar imágenes de Quick Sight en una aplicación de React.

En este flujo de trabajo:

  1. El usuario accede a la aplicación. El usuario abre la aplicación web React mediante un navegador. La solicitud se enruta a una CloudFront distribución, que actúa como una red de entrega de contenido para la aplicación.

  2. AWS WAF filtra las solicitudes maliciosas. Antes de que llegue la solicitud CloudFront, se tramita AWS WAF. AWS WAF inspecciona el tráfico y bloquea cualquier solicitud maliciosa o sospechosa según las normas de seguridad.

  3. Amazon S3 sirve archivos estáticos. Si la solicitud está limpia, CloudFront recupera los recursos estáticos de la interfaz (HTML, JS, CSS) de un bucket privado de S3 mediante el control de acceso de origen (OAC) y los envía al navegador.

  4. El usuario inicia sesión. Una vez cargada la aplicación, el usuario inicia sesión a través de Amazon Cognito, que autentica al usuario y devuelve un token web JSON (JWT) seguro para el acceso autorizado a la API.

  5. La aplicación realiza una solicitud a la API. Tras iniciar sesión, la aplicación React realiza una llamada segura al /get-embed-url punto final de API Gateway y pasa el token JWT al encabezado de la solicitud para su autenticación.

  6. El token está validado. API Gateway valida el token mediante un autorizador de Amazon Cognito. Si el token es válido, la solicitud continúa; de lo contrario, se deniega con una respuesta 401 (no autorizada).

  7. La solicitud se dirige a Lambda para su procesamiento. A continuación, la solicitud validada se reenvía a una función Lambda de backend. Esta función se encarga de generar la URL de inserción del elemento visual de Quick Sight solicitado.

  8. Lambda genera la URL de inserción desde Quick Sight. IAM utiliza una función de IAM con los permisos adecuados para llamar a la GenerateEmbedUrlForRegisteredUser API Quick Sight y generar una URL visual segura y orientada al usuario.

  9. Lambda devuelve la URL de inserción a API Gateway. Lambda devuelve la URL de inserción generada a API Gateway como parte de una respuesta de JSON. Luego, esta respuesta se prepara para su entrega a la interfaz.

  10. La URL de inserción se envía al navegador. La URL de inserción se devuelve al navegador como respuesta de la API.

  11. La imagen se muestra al usuario. La aplicación React recibe la respuesta y utiliza el SDK de incrustación Quick Sight para renderizar la imagen específica para el usuario.

Automatización y escala

Las implementaciones de backend y frontend se automatizan por completo mediante el uso de CloudFormation, lo que aprovisiona todos AWS los recursos necesarios, incluidos Amazon Cognito, Lambda, API Gateway, Amazon S3,,, funciones de IAM y Amazon en una sola implementación. CloudFront AWS WAF CloudWatch

Esta automatización garantiza una infraestructura uniforme y repetible en todos los entornos. Todos los componentes se escalan automáticamente: Lambda se ajusta a las invocaciones de funciones, entrega contenido en caché a nivel CloudFront mundial y API Gateway se escala en función de las solicitudes entrantes.

Tools (Herramientas)

Servicios de AWS

  • Amazon Quick Sight es un servicio de inteligencia empresarial nativo de la nube que le ayuda a crear, administrar e integrar cuadros de mando y elementos visuales interactivos.

  • Amazon API Gateway gestiona APIs la función de puente entre la aplicación React y los servicios de backend.

  • AWS Lambdaes un servicio de cómputo sin servidor que este patrón utiliza para generar una integración segura de Quick Sight de forma URLs dinámica y escalable automáticamente en función de las solicitudes.

  • Amazon Cognito proporciona autenticación y autorización a los usuarios y emite tokens seguros para el acceso a la API.

  • Amazon S3 aloja activos de interfaz estáticos para este patrón y los proporciona de forma segura. CloudFront

  • Amazon CloudFront ofrece contenido front-end a nivel mundial con baja latencia y se integra con él AWS WAF para filtrar el tráfico.

  • AWS WAFprotege la aplicación web del tráfico malicioso mediante la aplicación de reglas de seguridad y la limitación de velocidad.

  • AWS CloudFormationautomatiza el aprovisionamiento y la configuración de todos los recursos de la aplicación en una sola implementación.

  • Amazon CloudWatch recopila registros y métricas de Lambda, API Gateway y AWS WAF para la supervisión y la solución de problemas.

Herramientas de desarrollo

  • React JS es un marco de interfaz que este patrón utiliza para crear la aplicación web e integrar imágenes de Quick Sight integradas.

  • Vite es una herramienta de compilación que se utiliza para desarrollar rápidamente y optimizar las compilaciones de producción de la aplicación React.

  • El SDK de incrustación de Quick Sight facilita la integración de imágenes de Quick Sight en la aplicación React y permite una interacción perfecta entre la aplicación y las imágenes.

Repositorio de código

El código de este patrón está disponible en el repositorio GitHub Amazon Quick Sight Visual Embedding in React.

Prácticas recomendadas

Este patrón implementa automáticamente las siguientes mejores prácticas de seguridad:

  • Utiliza grupos de usuarios de Amazon Cognito para la autenticación basada en JWT, con autenticación multifactor (MFA) opcional.

  • Se protege APIs con los autorizadores de Amazon Cognito y aplica políticas de IAM con privilegios mínimos en todos los servicios.

  • Implementa la incrustación de usuarios registrados de Quick Sight y aprovisiona automáticamente a los usuarios con la función de lector.

  • Aplica un cifrado en tránsito compatible con TLS 1.2 y versiones posteriores hasta HTTPS. CloudFront

  • Cifra los datos en reposo mediante AES-256 para Amazon S3 con control de versiones y OAC.

  • Configura los planes de uso de API Gateway con limitaciones y cuotas.

  • Protege Lambda con concurrencia reservada y protección de variables de entorno.

  • Permite el registro para Amazon S3 CloudFront, Lambda y API Gateway; monitorea los servicios mediante el uso. CloudWatch

  • Cifra los registros, aplica controles de acceso y aplica políticas de denegación para las subidas sin HTTPS o sin cifrar.

Además, te recomendamos lo siguiente:

  • Úselo CloudFormation para automatizar las implementaciones y mantener configuraciones consistentes en todos los entornos.

  • Asegúrese de que cada usuario tenga los permisos de Quick Sight correctos para acceder a las imágenes integradas.

  • Proteja los puntos de enlace de API Gateway con los autorizadores de Amazon Cognito y aplique el principio de privilegios mínimos para todas las funciones de IAM.

  • Guarde información confidencial, como los nombres de los recursos de Amazon (ARNs) y las variables de entorno, IDs en lugar de codificarla de forma rígida.

  • Optimice las funciones Lambda reduciendo las dependencias y mejorando el rendimiento del arranque en frío. Para obtener más información, consulte la AWS entrada del blog Cómo optimizar el rendimiento del arranque en frío AWS Lambda mediante el uso de estrategias de cebado avanzadas con. SnapStart

  • Añada su CloudFront dominio a la lista de dominios permitidos de Quick Sight para permitir una incrustación visual segura.

  • Supervise el rendimiento y la seguridad mediante CloudWatch el uso AWS WAF de registros, alertas y protección del tráfico.

Otras prácticas recomendadas

  • Utilice dominios personalizados con certificados SSL de AWS Certificate Manager para ofrecer una experiencia de usuario segura y personalizada.

  • Cifre los datos y CloudWatch registros de Amazon S3 mediante claves administradas por el cliente AWS Key Management Service (AWS KMS) para tener un mayor control del cifrado.

  • Amplíe AWS WAF las reglas con el bloqueo geográfico, la protección por inyección de SQL (SQLi), la protección contra secuencias de comandos entre sitios (XSS) y filtros personalizados para mejorar la prevención de amenazas.

  • Active CloudWatch las alarmas y supervise AWS Config, audite y AWS CloudTrail cumpla con la configuración en tiempo real.

  • Aplique políticas de IAM detalladas, refuerce la rotación de claves de API y permita el acceso entre cuentas solo cuando sea absolutamente necesario.

  • Realice evaluaciones de seguridad periódicas para garantizar la alineación con los marcos de cumplimiento, como los Controles de Sistemas y Organizaciones 2 (SOC 2), el Reglamento General de Protección de Datos (GDPR) y la Ley de Portabilidad y Responsabilidad de los Seguros de Salud (HIPAA).

Epics

TareaDescripciónHabilidades requeridas

Clonar el repositorio.

Clone el GitHub repositorio de esta solución en su sistema local y navegue hasta el directorio del proyecto:

git clone https://github.com/aws-samples/sample-quicksight-visual-embedding.git

cd sample-quicksight-visual-embedding

Este repositorio contiene la CloudFormation plantilla y el código fuente de React necesarios para implementar la solución.

Desarrollador de aplicaciones
TareaDescripciónHabilidades requeridas

Implemente la plantilla.

  1. Inicie sesión en la AWS CloudFormation consola Consola de administración de AWS y ábrala.

  2. En la página Stacks, selecciona Crear pila en la esquina superior derecha y, a continuación, selecciona Con nuevos recursos (estándar).

  3. En la página Crear pila, en Requisito previo: preparar plantilla, selecciona Elegir una plantilla existente.

  4. En Specify template (Especificar plantilla), elija Upload a template file (Cargar un archivo de plantilla).

  5. Cargue el template.yaml archivo desde su GitHub repositorio local y, a continuación, seleccione Siguiente.

  6. En la página Especificar los detalles de la pila, introduce el nombre de la pila (por ejemplo,quicksight-embedding-stack).

  7. En la página Configurar opciones de pila, mantenga la configuración predeterminada y active la casilla para confirmar la creación de recursos de IAM. Elija Siguiente.

  8. En la página Revisar y crear, elija Enviar.

 Para obtener más información, consulte Creación y administración de pilas en la CloudFormation documentación.

Administrador de AWS

Supervise la creación de pilas.

Supervisa la pila en la pestaña Eventos hasta que su estado sea CREATE_COMPLETE.

Administrador de AWS

Recupera los resultados de la pila.

  1. Cuando se complete el despliegue, seleccione la pestaña Salidas.

  2. Anote los resultados clave: ApiGatewayUrlUserPoolId,UserPoolClientId,CloudFrontDomainName, yS3BucketName. Utilizará esta información en los pasos siguientes.

Administrador de AWS
TareaDescripciónHabilidades requeridas

Recupere los identificadores visuales de Quick Sight.

  1. Abra el panel de control de Quick Sight.

  2. Anote el ID del panel, el ID de la hoja y el ID visual de cada elemento visual que desee incrustar en su aplicación web.

Administrador de Quick Sight

Configura tu entorno local de React.

Para configurar tu entorno local de React y vincularlo a AWS los recursos, crea un .env archivo en la my-app/ carpeta de tu GitHub repositorio local. Rellena el archivo con:

  • Tu Región de AWS

  • Información sobre el pool de Amazon Cognito (a partir de los resultados de la CloudFormation pila)

  • Punto final de API Gateway (a partir de las salidas de la CloudFormation pila)

  • Vista rápida IDs (DashboardId,SheetId,VisualId)

Este es un .env archivo de ejemplo:

VITE_AWS_REGION=us-east-1

# Cognito Configuration (from CloudFormation outputs)
VITE_USER_POOL_ID=us-east-1_xxxxxxxxx VITE_USER_POOL_WEB_CLIENT_ID=xxxxxxxxxxxxxxxxxxxxxxxxxx

# API Configuration (from CloudFormation outputs)
VITE_API_URL=https:/your-api-id.execute-api.us-east-1.amazonaws.com/prod

# QuickSight Visual Configuration
VITE_DASHBOARD_ID=your-dashboard-id 
VITE_SHEET_ID=your-sheet-id 
VITE_VISUAL_ID=your-visual-id
Desarrollador de aplicaciones
TareaDescripciónHabilidades requeridas

Crear o administrar usuarios en Cognito

Para permitir el acceso de los usuarios autenticados a las imágenes de Quick Sight integradas, primero debe crear los usuarios en Amazon Cognito:

  1. En la consola de Amazon Cognito, elija Grupos de usuarios y, a continuación, elija el grupo que coincida UserPoolId (de los CloudFormation resultados).

  2. Agregue usuarios al grupo. Puede elegir entre dos opciones.

Administrador de AWS

Proporcione acceso al panel de control de Quick Sight

Para permitir el acceso a las imágenes de Quick Sight, conceda permiso de Visor a los usuarios autenticados:

  1. En la consola Quick Sight, seleccione Paneles de control.

  2. Seleccione el panel que desee compartir eligiendo su nombre.

  3. En la esquina superior derecha de la página del panel de control, selecciona Compartir.

  4. En el panel para compartir, selecciona Compartir con usuarios específicos.

  5. Para añadir nuevos usuarios, selecciona Invitar a usuarios o el icono con el signo más (+).

  6. En el campo de correo electrónico, introduce la dirección de correo electrónico completa del destinatario. (Este correo electrónico debe coincidir exactamente con el inicio de sesión de Amazon Cognito del usuario)

  7. En el menú de permisos situado junto al campo de correo electrónico, seleccione Visor.

  8. Para enviar la invitación y conceder el acceso, selecciona Compartir.

Cada usuario recibirá un correo electrónico con un enlace al panel de control. Puede modificar los permisos en cualquier momento a través del menú Compartir.

Para obtener más información, consulte Conceder acceso a usuarios y grupos individuales de Amazon Quick Sight a un panel de Amazon Quick Sight en la documentación de Amazon Quick Suite.

Administrador de Quick Sight
TareaDescripciónHabilidades requeridas

Instala las dependencias y crea el proyecto.

En el directorio de aplicaciones de React, ejecuta los siguientes comandos para generar archivos de producción optimizados:

cd my-app
npm install
npm run build
Desarrollador de aplicaciones

Cargue los archivos de compilación en Amazon S3.

Cargue todos los archivos del my-app/dist/ directorio al bucket de S3 aprovisionado por CloudFormation (no cargue la carpeta propiamente dicha).

Desarrollador de aplicaciones

Cree una CloudFront invalidación.

En la CloudFront consola, cree una invalidación para que Path /* actualice el contenido en caché tras la implementación. Para obtener instrucciones, consulte Invalidar archivos en la documentación. CloudFront

Administrador de AWS
TareaDescripciónHabilidades requeridas

Agregue el CloudFront dominio a la lista permitida de Quick Sight.

Para permitir que su CloudFront dominio incorpore imágenes de Quick Sight de forma segura:

  1. En la consola de Quick Sight, selecciona Administrar Quick Sight, los dominios y la incrustación.

  2. Agregue el CloudFront dominio al cuadro Dominio (por ejemplo,https://d1234567890abc.cloudfront.net).

  3. Elija Añadir dominio.

Administrador de Quick Sight
TareaDescripciónHabilidades requeridas

Abre la aplicación React.

Usa el CloudFront dominio (de CloudFormation las salidas) para abrir la aplicación web React implementada en un navegador.

Propietario de la aplicación

Verifica la autenticación.

Inicie sesión en la aplicación con las credenciales de Amazon Cognito para verificar el flujo de autenticación y la validación de JWT a través de API Gateway.

Propietario de la aplicación

Verifique las imágenes incrustadas.

Confirme que las imágenes de Quick Sight se carguen correctamente en la aplicación en función de los permisos de acceso específicos del usuario.

Propietario de la aplicación

Valide la conectividad API y Lambda.

Confirme que la aplicación puede llamar correctamente a la /get-embed-url API y recuperar una inserción de Quick Sight válida URLs sin errores.

Propietario de la aplicación
TareaDescripciónHabilidades requeridas

Supervise mediante el uso de CloudWatch.

Puede usar herramientas de AWS observabilidad para monitorear la aplicación y mantener un rendimiento seguro y escalable en la producción.

Revise los registros de Lambda, las métricas de API Gateway y los eventos de autenticación de Amazon Cognito para garantizar CloudWatch el estado de las aplicaciones y detectar anomalías.

Administrador de AWS

Realice un seguimiento y registre. AWS WAF CloudFront

Inspeccione AWS WAF los registros para detectar solicitudes bloqueadas o sospechosas y CloudFront acceda a los registros para ver las métricas de rendimiento y almacenamiento en caché.

Administrador de AWS

Resolución de problemas

ProblemaSolución

Error «Dominio no permitido»

  1. En la consola Quick Sight, seleccione Administrar Quick Sight, Dominios e Incrustaciones.

  2. Agrega tu CloudFront dominio (por ejemplo,https://d1234567890abc.cloudfront.net).

  3. Guarde la configuración y vuelva a cargar la aplicación.

Errores de autenticación

Causas posibles:

  • El ID del grupo de usuarios de Amazon Cognito o el ID de cliente de la aplicación son incorrectos en el .env archivo.

  • No se confirmó el usuario en el grupo de usuarios de Amazon Cognito.

  • El token JWT no es válido o falta en las solicitudes de API.

Soluciones:

  • Compruebe los valores de configuración de Amazon Cognito en el .env archivo.

  • En la consola de Amazon Cognito, compruebe la pestaña Usuarios para comprobar que el usuario está activo.

  • Confirme que el encabezado de autorización contenga un token JWT válido.

  • En la consola de API Gateway, compruebe Authorizers para comprobar que API Gateway utiliza el autorizador de Amazon Cognito para la autenticación.

Errores de API Gateway

Causas posibles:

  • Falta o está mal configurado el autorizador de Amazon Cognito en API Gateway.

  • Permisos Lambda insuficientes para llamar a la API Quick Sight.

  • La URL de la API no coincide entre los resultados .env y los resultados. CloudFormation

Soluciones:

  • Vuelva a confirmar que la URL de invocación de API Gateway está en su .env archivo.

  • En la consola de API Gateway, compruebe Autorizadores para comprobar la configuración de Amazon Cognito.

  • Adjunte la política de IAM requerida quicksight:GenerateEmbedUrlForRegisteredUser a la función de ejecución de Lambda.

  • Revise CloudWatch los registros para ver si hay errores detallados de API o permisos. Para obtener más información, consulte la documentación de API Gateway.

Las imágenes de Quick Sight no se cargan

Causas posibles:

  • El ID del panel de control, el ID de hoja o el ID visual de Quick Sight son incorrectos en la configuración del entorno.

  • Los usuarios de Quick Sight no pueden acceder a la imagen o al panel de control.

  • Falta la configuración de uso compartido de recursos entre orígenes (CORS) en API Gateway.

Soluciones:

  • Confirme la vista rápida IDs desde el menú de tres puntos situado en la esquina superior derecha de la imagen del panel de control.

  • Confirme que el usuario de Quick Sight tiene la función de visualizador del panel compartido.

  • Habilite CORS en API Gateway y vuelva a implementar la API. Para obtener más información, consulte la documentación de API Gateway.

  • Inspeccione la consola del navegador en busca de CORS para ver si hay errores relacionados con la red.

Error «El usuario no tiene acceso»

Causas posibles:

  • El correo electrónico del usuario no se compartió con el panel de Quick Sight.

  • El rol o el permiso de usuario en Quick Sight son incorrectos.

Solución:

  1. En la consola de Quick Sight, abra el panel y, a continuación, seleccione Compartir, compartir panel.

  2. Añada la dirección de correo electrónico del usuario (que coincida con el correo electrónico de inicio de sesión de Amazon Cognito).

  3. Asigne el rol de permiso de espectador.

  4. Pide al usuario que cierre sesión y vuelva a iniciarla para actualizar los permisos.

Recursos relacionados

AWS documentación

Tutoriales y videos