/ /

/ /

Introducción al SDK de incrustación

Puede incrustar un gráfico o panel en una aplicación web con el Incorporación de SDK que permite ajustes más flexibles de la configuración y la representación.

Requisitos previos

Debes ser autor del panel para habilitar la inserción de un gráfico.
Crear un nuevo panel de control
Crear un gráfico

Procedimientos

Habilitar incrustación

Seleccione un panel de control.

Desde Dashboards En la página, seleccione el panel que contiene el gráfico que desea integrar. 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.

Active el uso compartido externo en la fuente de datos.

Si ya ha habilitado el uso compartido externo en la fuente de datos que usa este gráfico, omita este paso. Si aún no ha habilitado la incrustación en la fuente de datos, puede hacerlo ahora. Haga clic en el enlace Configure external sharing.

Seleccione la pestaña en la ventana de diálogo.Unauthenticated

haga clic para ampliar

Se puede establecer Enable unauthenticated access en On.

(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.

Alternativamente, puedes especificar todos los campos en la gráfica seleccionando Allow all fields in the data source used in this chart.

Para obtener más información sobre los campos filtrables, consulte Especificar campos filtrables.

Seleccione el Javascript SDK panel.

Copiar Charts Base URL Chart IDy.

Necesitará los valores de URL base e ID de gráfico en el código de su aplicación web.

Seleccione un panel de control.

En la Dashboards 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

Habilitar el uso compartido externo en la fuente de datos

Seleccione la pestaña en la ventana de diálogo.Authenticated

haga clic para ampliar

Se puede establecer Enable authenticated access en On.

(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.

Tip

Para obtener más información sobre los campos filtrables, consulte Especificar campos filtrables.

Copiar Chart Base URL y Chart ID

Usa estos valores en el código de tu aplicación junto con los atributos de tu proveedor de autenticación embebida para incrustar tu gráfica.

Configurar proveedores de autenticación para integración

Vaya Charts a.

Si Atlas Charts aún no se muestra, haga clic en Visualization debajo del encabezado Services en la barra lateral de la interfaz de usuario de Atlas.

Atlas lanza una instancia de Gráficos vinculados a su proyecto.

Ir a la página Embedded Visualizations.

Haga clic en Embedded Visualizations debajo del encabezado Services en la barra lateral Visualization.

El 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.

Agregue el proveedor de autenticación.

Desde la sección Authentication providers, haga clic en Add.
En el campo Name, ingrese un nombre descriptivo para el proveedor.
De la lista Provider, seleccione el tipo de proveedor que desea agregar.

Configurar gráficos para verificar tokens del proveedor.

Los valores que debes ingresar varían según el proveedor que hayas seleccionado:

Google
En el campo Client ID, ingrese el ID de cliente de API de Google de su aplicación, en el siguiente formato:
```
<prefix>.apps.googleusercontent.com
```

JWT personalizado

Proporcione los siguientes valores:

Campo

Valor

Algoritmo de firma

Algoritmo de cifrado con el que se La firmaJWT está codificada.

Debe ser uno de los siguientes:

Clave de firma

Secreto o clave utilizada para validar la firma de JWT. Si los tokens no están firmados, Charts los considera inválidos. Si proporcionas una clave incorrecta, Charts no puede verificar las firmas de tokens y las considera inválidas.

El valor que debe proporcionar depende de Signing Algorithm:

HS256:Ingrese la clave secreta utilizada para firmar el JWT.

RS256: Seleccione JWK or JWKS URL o PEM Public Key.

Si JWK or JWKS URL selecciona, Charts recupera la clave del archivo JWK o JWKS en la URL especificada. Charts utiliza la clave para validar el token web JSON. Si el archivo contiene varias claves, Charts prueba cada una hasta encontrar una coincidencia. Introduzca la URL que contiene el archivo JWK o JWKS.

Si PEM Public Key selecciona, Charts usará la clave pública especificada para verificar el token web JSON. Introduzca la clave pública del par de claves utilizado para firmar el JWT. La clave pública debe estar en formato PEM, como se muestra en el siguiente ejemplo:

Audiencia(opcional)

Afirmación de audiencia que debe estar presente en el JWT para que Charts lo considere válido.

Haga clic en Save.

Seleccione un panel de control.

En la Dashboards página, seleccione el panel que desea incrustar. Para obtener instrucciones sobre cómo acceder a los paneles, consulte Paneles.

Seleccione Embed.

Desde el panel, haga clic en la esquina superior derecha para acceder a la información de incrustación. Seleccione Embed en el menú desplegable.

Active el uso compartido externo en la fuente de datos.

Si ya ha habilitado el uso compartido externo en la fuente de datos que usa este panel, omita este paso. Si aún no ha habilitado la incrustación en la fuente de datos, puede hacerlo ahora. Haga clic en el enlace Configure.

Seleccione la pestaña en la ventana de diálogo.Unauthenticated

Se puede establecer Enable unauthenticated access en On.

(Opcional) Especifique campos filtrables para su panel decontrol.

Especifique los campos en los que los usuarios del panel pueden filtrar datos. De forma predeterminada, no se especifica ningún campo, lo que significa que el panel no se puede filtrar hasta que se permita explícitamente al menos un campo.

Alternativamente, puede especificar todos los campos en su panel seleccionando Allow all fields in the data source used in this dashboard.

Para obtener más información sobre los campos filtrables, consulte Especificar campos filtrables.

Seleccione el Javascript SDK panel.

Copie y guarde la URL base.

Copie y guarde el ID del panel.

Seleccione un panel de control.

En la Dashboards página, seleccione el panel que desea incrustar. Para obtener instrucciones sobre cómo acceder a los paneles, consulte Paneles.

Seleccione Embed.

Desde el panel, haga clic en la esquina superior derecha para acceder a la información de incrustación. Seleccione Embed en el menú desplegable.

Active el uso compartido externo en la fuente de datos.

Seleccione la pestaña en la ventana de diálogo.Authenticated

Se puede establecer Enable authenticated access en On.

Agregar proveedores de autenticación.

Si ya configuraste los proveedores de autenticación, omite este paso. Si aún no has configurado los proveedores de autenticación, puedes hacerlo ahora.

Para obtener más información, consulte Configurar proveedores de autenticación de incrustación.

Haga clic en Add.
Especifique un nombre para la integración de autenticación.
Seleccione un proveedor y especifique la configuración del proveedor.
Haga clic en Save.
Haga clic en Back to Embed Dashboard.

(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 acceda al panel. Esto resulta útil para renderizar paneles específicos de cada usuario.

Ejemplo

La siguiente función de filtro solo representa datos donde el campo ownerId 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 panel decontrol.

Alternativamente, puede especificar todos los campos en su panel seleccionando Allow all fields in the data source used in this dashboard.

Para obtener más información sobre los campos filtrables, consulte Especificar campos filtrables.

Copie y guarde la URL base.

Copie y guarde el ID del panel.

Crear una aplicación web

Continúe con los pasos restantes para crear una nueva aplicación en la que mostrar su gráfico.

Nota

MongoDB ofrece una aplicación de ejemplo prediseñada en el repositorio de GitHub que muestra cómo usar el SDK de incrustación para mostrar un gráfico incrustado no autenticado.

Continúe con los pasos restantes para crear una nueva aplicación en la que mostrar su gráfico.

Nota

MongoDB ofrece un ejemplo prediseñado en el repositorio de GitHub que le muestra cómo usar el SDK de incrustación para autenticar un gráfico incrustado usando su proveedor de autenticación.

Continúe con los pasos restantes para crear una nueva aplicación en la que mostrar su panel de control.

Nota

MongoDB ofrece un ejemplo prediseñado de un panel incrustado sin autenticar en el repositorio de GitHub. Este ejemplo muestra cómo usar el SDK de incrustación para mostrar un panel incrustado sin autenticar.

Continúe con los pasos restantes para crear una nueva aplicación en la que mostrar su tablero.

Nota

MongoDB ofrece ejemplos de paneles incrustados autenticados en el repositorio de GitHub. Estos ejemplos muestran cómo usar el SDK de incrustación para autenticar un panel incrustado mediante proveedores de autenticación de Google o JWT.

Agregar código de inserción a su aplicación

Para saber cómo instalar el SDK de incrustación en su aplicación, consulte Instalar el SDK de incrustación.

Agregue el siguiente código a su aplicación web para ejecutarlo donde desea que se represente su gráfico:

Nota

Reemplace la URL base y el ID del gráfico con los valores del gráfico que desea mostrar. La URL base y el ID del gráfico se muestran en la ventana modal de opciones de incrustación.

import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom";
const sdk = new ChartsEmbedSDK({
  baseUrl: "https://charts.mongodb.com/charts-embedding-examples-wgffp", // ~REPLACE~ with the Base URL from your Embed Chart dialog.
});
const chart = sdk.createChart({
  chartId: "735cfa75-15b8-483a-bc2e-7c6659511c7c", // ~REPLACE~ with the Chart ID from your Embed Chart dialog.
  height: "700px",
  // Additional options go here
});
chart.render(document.getElementById("chart"));

Añade el siguiente código a tu aplicación web para que se ejecute donde quieras que se muestre el gráfico. El siguiente ejemplo se autentica con un token de Google.

import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom";
const id_token = googleUser.getAuthResponse().id_token;
const ChartsEmbedSDK = window.ChartsEmbedSDK;
const sdk = new ChartsEmbedSDK({
   baseUrl: "https://charts.mongodb.com/charts-embedding-examples-wgffp", // Optional: replace with your Charts URL
   getUserToken: () => id_token,
});
const chart = sdk.createChart({
   chartId: "8d4dff93-e7ca-4ccd-a622-e20e8a100197", // Optional: replace with your Chart ID
});
document.body.classList.toggle("logged-in", true);
chart.render(document.getElementById("chart"));

Agregue el siguiente código a su aplicación web para ejecutarlo donde desea que se represente su panel.

Nota

Reemplace el Dashboards Base URL y el ID del panel con los valores del panel que desea mostrar. El Dashboards Base URL y el ID del panel se muestran en la ventana modal de opciones de inserción.

import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom";
const sdk = new ChartsEmbedSDK({
   baseUrl: "https://charts.mongodb.com/charts-embedding-examples-wgffp", // ~REPLACE~ with the Base URL from your Embed Dashboard dialog.
});
const dashboard = sdk.createDashboard({
   dashboardId: "735cfa75-15b8-483a-bc2e-7c6659511c7c", // ~REPLACE~ with the Dashboard ID from your Embed Dashboard dialog.
   height: "700px",
   widthMode: "scale",
   heightMode: "fixed"
   // Additional options go here
});
dashboard.render(document.getElementById("dashboard"));

Agrega el siguiente código a tu aplicación web para ejecutarla donde quieras que se muestre el panel. El siguiente ejemplo se autentica con un token de Google.

import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom";
const id_token = googleUser.getAuthResponse().id_token;
const ChartsEmbedSDK = window.ChartsEmbedSDK;
const sdk = new ChartsEmbedSDK({
   baseUrl: "https://charts.mongodb.com/charts-embedding-examples-wgffp", // Optional: ~REPLACE~ with your Base URL
   getUserToken: () => id_token,
});
// Read https://dochub.mongodb.org/core/charts-dashboards-embedded-dashboard-options for more options
const dashboard = sdk.createDashboard({
   // Optional: ~REPLACE~ with your Dashboard ID
   dashboardId: "620c9847-fc5c-4199-865d-27b2ae20db07",
   theme: "dark",
   widthMode: "scale",
});
document.body.classList.toggle("logged-in", true);
dashboard.render(document.getElementById("dashboard"));

Volver

SDK de incrustación

Configurar proveedores de autenticación