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 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 panel, haga clic en la esquina superior derecha del gráfico para acceder a su información de incrustación. Seleccione Embed chart en el menú desplegable.
Nota
Si un gráfico está en un panel con la función de incrustación habilitada, la opción Embed Chart se habilita automáticamente. Por lo tanto, no se puede seleccionar la opción Embed chart para gráficos en paneles con la función de incrustación habilitada.
Habilitar 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 visualice el gráfico. Esto resulta útil para representar gráficos específicos del 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 campos filtrables para su gráfico.
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 obtener más información sobre los campos filtrables, 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 debajo del 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 prediseñada que muestra cómo utilizar el SDK de incrustación para mostrar un gráfico incrustado usando la 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 necesitas 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.
Ingrese la URL base de sus gráficos
Reemplace el baseUrl existente con la URL base del gráfico que desea 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.
Ingrese su ID de gráfico
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.