Este tutorial muestra cómo configurar una aplicación de ejemplo para renderizar una gráfica incrustada autenticada por Google en una página web.
Los usuarios deben iniciar sesión con su cuenta de Google para ver la gráfica. Si un usuario no inicia sesión con Google, Charts no renderiza la vista autenticada de la gráfica.
Requisitos previos
Debes ser un Atlas Propietario del proyecto para configurar los proveedores de autenticación de incrustación para tu instancia de Charts vinculada.
Procedimientos
Activar la incrustación autenticada para tu gráfica
Habilita la incrustación autenticada para generar una URL base de Charts y una ID de gráfica. Necesitarás la URL base de Charts y el ID de la gráfica para mostrar la gráfica en una página web.
Selecciona un tablero.
Desde el Dashboards en la página, selecciona el tablero que contiene la gráfica que deseas insertar. Para obtener instrucciones sobre cómo navegar a los Tableros, consulte Tableros.
Seleccione una gráfica.
Desde el tablero, haz clic en en la parte superior derecha de la gráfica para acceder a su información de inserción. Seleccione Embed chart del menú desplegable.
Nota
Si una gráfica se encuentra en un tablero que tiene integración activada, la opción Embed Chart se activa automáticamente. Por lo tanto, no puedes seleccionar la opción Embed chart para las gráficas dentro de los tableros que tienen habilitada la incrustación.
Habilite el uso compartido externo en la fuente de datos
Si ya has habilitado el uso compartido externo en el origen de datos que utiliza esta gráfica, omite este paso. Si aún no has activado la integración en la fuente de datos, puedes hacerlo ahora. Haz clic en el enlace Configure external sharing.
(Opcional) Especifique una función de filtro para inyectar por usuario.
Puede especificar una función para inyectar un documento de filtro de MongoDB para cada usuario que vea la gráfica. Esto es útil para generar gráficas específicas de usuario.
Ejemplo
La siguiente función de filtro solo renderiza datos donde la
ownerId el campo de un documento coincide con el valor del campo sub del token del proveedor de autenticación de embedding:
function getFilter(context) { return { ownerId: context.token.sub }; }
Tip
Para obtener más información sobre cómo inyectar filtros por usuario, consulta Inyecta Filtros Específicos para Usuarios.
(Opcional) Especifique los campos filtrables para su gráfica.
Especifica los campos en los que los espectadores de la gráfica pueden filtrar los datos. Por defecto, no hay campos especificados, lo que significa que no se puede filtrar la gráfica hasta que se permita explícitamente al menos un campo.
Tip
Para aprender más sobre los campos que se pueden filtrar, consulte Especificar campos filtrables.
Crea un ID de cliente de Google
Crea un proyecto en la Consola de API de Google para generar un ID de cliente de Google. Necesitarás tu ID de cliente de Google para configurar Charts y utilizar Google Sign-In.
Para crear un proyecto en Google API Console, consulta Cómo integrar Google Sign-In en tu aplicación web.
Configura Charts para usar Google Sign-In
Ir a la página Embedded Visualizations.
Haga clic en Embedded Visualizations en el encabezado Services en la barra lateral Visualization.
Se muestra la página Visualizaciones integradas.
Go a la vista Authentication Settings.
Nota
Debe ser un propietario del proyecto para acceder a la página Authentication Settings. Como usuario que no es administrador, todavía puede usar gráficas integradas, pero debe obtener una clave de un propietario del proyecto.
Haz clic en la pestaña Authentication Settings.
Se muestra la pestaña Configuración de autenticación.
Cree una aplicación web para mostrar su gráfica
MongoDB ofrece una aplicación de ejemplo preconstruida que muestra cómo utilizar el SDK de integración para mostrar una gráfica integrada utilizando autenticación de Google.
Para ejecutar la aplicación de ejemplo, clona el Ejemplo de integración de Atlas Charts - Autenticación de Google repositorio de GitHub y sigue las instrucciones en el archivo Readme para comenzar a usar la aplicación. Puedes ejecutar la aplicación tal cual con una gráfica de muestra, o puedes personalizarla para usar una gráfica preexistente.
Personalizar la aplicación Node.js
Todas las líneas que necesita editar están marcadas con un comentario que contiene ~REPLACE~.
Introduce tu ID de cliente de Google
Reemplace el ID de cliente de Google existente con su ID de cliente de Google.
<!-- Optional: ~REPLACE~ content with your Google Client ID --> <meta name="google-signin-client_id" content="012345678910-ifpoccch8js9srh9obfdn683h1iss2ag.apps.googleusercontent.com" />
Tu ID de cliente de Google es visible después de crear un proyecto en la consola de API de Google. Consulta Crear una ID de cliente de Google para obtener instrucciones sobre cómo crear una ID de cliente de Google.
Introduce la URL base de tus Charts
Reemplaza el baseUrl existente con la Base URL de la gráfica que deseas mostrar.
const sdk = new ChartsEmbedSDK({ baseUrl: "https://charts-dev.mongodb.com/charts-exampleproject-fjotk", // Optional: ~REPLACE~ with your Charts URL getUserToken: () => id_token });
La URL base de Charts es visible en la ventana modal de opciones de integración. Consulta SDK de incrustación para obtener instrucciones detalladas sobre cómo habilitar la incrustación de una gráfica.
Introduce tu ID de gráfica
Reemplace el chartId existente con la ID de la gráfica que desea mostrar.
const chart = sdk.createChart({ chartId: "example-acaf-4af0-8320-5099bfebd1bd", // Optional: ~REPLACE~ with your Chart ID });
El ID de tu gráfica es visible en la ventana modal de opciones de incrustación. Consulta SDK de incrustación para obtener instrucciones detalladas sobre cómo habilitar la incrustación de una gráfica.
Después de que termine dee personalizar la aplicación, estará lista para ejecutarse.