Este tutorial le muestra cómo configurar una aplicación de muestra para representar un gráfico incrustado y autenticado 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 El propietario del proyecto debe configurar proveedores de autenticación de incrustación para su instancia de Charts vinculada.
Procedimientos
Habilite la incrustación autenticada para su gráfico
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.
Seleccione un panel de control.
Desde Dashboards En la página , seleccione el panel que contiene el gráfico que desea incrustar. Para obtener instrucciones sobre cómo acceder a los paneles, consulte Paneles.
Seleccione un gráfico.
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.
(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 procesa datos donde
ownerId El campo de un documento coincide con el valor del campo sub del token del proveedor de autenticación de incrustación:
function getFilter(context) { return { ownerId: context.token.sub }; }
Tip
Para obtener más información sobre cómo inyectar filtros por usuario, consulte Inyectar filtros específicos del usuario.
(Opcional) Especifique campos filtrables para su gráfico.
Especifique los campos en los que los visores de gráficos pueden filtrar datos. De forma predeterminada, no se especifica ningún campo, lo que significa que el gráfico no se puede filtrar 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.
Crear 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 de la Consola de API de Google, consulta Cómo integrar el inicio de sesión de Google en tu aplicación web.
Configurar gráficos para usar el inicio de sesión de Google
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.
Vaya a la Authentication Settings vista.
Nota
Debe ser el propietario del proyecto para acceder a la Authentication Settings página. Como usuario no administrador, puede usar gráficos incrustados, pero debe obtener una clave del 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áfico
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, clone el repositorio Atlas Charts Embedding Example - Google Authentication desde GitHub y siga las instrucciones Readme del archivo para empezar a usarla. Puede ejecutar la aplicación tal cual con un gráfico de ejemplo o personalizarla para usar un gráfico existente.
Personalizar la aplicación Node.js
Todas las líneas que necesitas editar están marcadas con un comentario que contiene ~REPLACE~.
Ingrese su 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 de la Consola de API de Google. Consulta "Crear un ID de cliente de Google" para obtener instrucciones sobre cómo crear un 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 tus gráficos se puede ver en la ventana modal de opciones de incrustación. Consulta el SDK de incrustación para obtener instrucciones detalladas sobre cómo habilitar la incrustación de un gráfico.
Ingrese su ID de gráfico
Reemplace el chartId existente con el ID del gráfico que desea mostrar.
const chart = sdk.createChart({ chartId: "example-acaf-4af0-8320-5099bfebd1bd", // Optional: ~REPLACE~ with your Chart ID });
El ID de su gráfico se puede ver en la ventana modal de opciones de incrustación. Consulte el SDK de incrustación para obtener instrucciones detalladas sobre cómo habilitar la incrustación de un gráfico.
Una vez que termine de personalizar la aplicación, estará lista para ejecutarse.