Incruste un gráfico autenticado mediante un proveedor JWT personalizado

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.

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.

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

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.

function getFilter(context) {
  return { ownerId: context.token.sub };
}

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

Copia el 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.

Vaya Charts a.

Si Atlas Charts aún no está activado, haz clic en Visualization bajo el encabezado Services en la barra lateral de la interfaz de usuario de Atlas.

Atlas lanza una instancia de Charts vinculada a tu proyecto.

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.

Haz clic en la pestaña Authentication Settings.

Se muestra la pestaña Configuración de autenticación.

Agregue el proveedor de autenticación.

1. Desde la sección Authentication providers, haz clic en Add.

2. Proporcione los siguientes valores para configurar los gráficos para validar el JWT para el tutorial.

   Campo	Valor
   Nombre	Introduce charts-jwt-tutorial.
   Proveedor	Seleccione Custom JSON Web Token.
   Algoritmo de firma	Seleccione HS256.
   Clave de firma	Introduce topsecret.

3. Haga clic en Save.

En el código de tu servidor de aplicaciones, genera y devuelve un JWT. La implementación varía según el proveedor de autenticación.

El archivo app.js en la aplicación de muestra utiliza un simple servicio web y el paquete jsonwebtoken para generar y devolver un JWT firmado utilizando el algoritmo HS256 cuando un usuario inicia sesión en la aplicación con estas credenciales:

• Nombre de usuario: admin

• Contraseña: password

1
const express = require("express");
2
const bodyParser = require("body-parser");
3
const cors = require("cors");
4
const jwt = require("jsonwebtoken");
5
const config = require("./config.js");
6
7
const app = express();
8
const port = 8000;
9
10
// Configuring body parser middleware
11
app.use(bodyParser.urlencoded({ extended: false }));
12
app.use(bodyParser.json());
13
app.use(cors());
14
15
app.post("/login", (req, res) => {
16
  const loginDetails = req.body;
17
  // mock a check against the database
18
  let mockedUsername = "admin";
19
  let mockedPassword = "password";
20
21
  if (
22
    loginDetails &&
23
    loginDetails.username === mockedUsername &&
24
    loginDetails.password === mockedPassword
25
  ) {
26
    let token = jwt.sign({ username: loginDetails.username }, config.secret, {
27
      expiresIn: "24h" // expires in 24 hours
28
    });
29
    res.json({ bearerToken: token });
30
  } else {
31
    res.status(401).send(false);
32
  }
33
});
34
35
app.listen(port, () => console.log(`Example app listening on port ${port}!`));

En la aplicación de muestra, la clave de firma topsecret está definida en un archivo en tu aplicación llamado config.js:

module.exports = {
  secret: "topsecret"
};

Incrustar un gráfico.

1. Cree un nuevo objeto de la clase ChartsEmbedSDK. Proporcione:

   • El valor de la propiedad baseUrl con la URL que apunta a tu instancia de Charts. Para insertar una de tus gráficas en la aplicación de muestra, reemplaza este valor por el :guilabel:Base URL del diálogo de Inserción de gráfica.

   • La propiedad chartId para especificar el identificador único de la gráfica que deseas incrustar. Para incrustar una de tus gráficas en la aplicación de muestra, sustituye este valor por :guilabel:Chart ID de tu cuadro de diálogo Insertar gráfica.

   • La propiedad getUserToken para especificar la función que genera y devuelve un JWT desde tu proveedor de autenticación.

   • Cualquier propiedad opcional que quieras proporcionar. Para obtener una lista de todas las propiedades que puede usar al incrustar gráficas mediante el SDK, consulte Referencia de opciones del SDK.

   En el archivo src/index.js de la aplicación de ejemplo, la función login en la propiedad getUserToken llama al servicio web que creaste para generar un JWT. Si el inicio de sesión tiene éxito, esa función retorna un JWT válido a la propiedad getUserToken.

   1
   import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom";
   2
   import "regenerator-runtime/runtime";
   3
   4
   document
   5
     .getElementById("loginButton")
   6
     .addEventListener("click", async () => await tryLogin());
   7
   8
   function getUser() {
   9
   return document.getElementById("username").value;
   10
   }
   11
   12
   function getPass() {
   13
   return document.getElementById("password").value;
   14
   }
   15
   16
   async function tryLogin() {
   17
   if (await login(getUser(), getPass())) {
   18
     document.body.classList.toggle("logged-in", true);
   19
     await renderChart();
   20
   }
   21
   }
   22
   23
   async function login(username, password) {
   24
   const rawResponse = await fetch("http://localhost:8000/login", {
   25
     method: "POST",
   26
     headers: {
   27
       Accept: "application/json",
   28
       "Content-Type": "application/json"
   29
     },
   30
     body: JSON.stringify({ username: username, password: password })
   31
   });
   32
   const content = await rawResponse.json();
   33
   34
   return content.bearerToken;
   35
   }
   36
   37
   async function renderChart() {
   38
   const sdk = new ChartsEmbedSDK({
   39
     baseUrl: "https://localhost/mongodb-charts-iwfxn", // ~REPLACE~ with the Base URL from your Embed Chart dialog
   40
     chartId: "d98f67cf-374b-4823-a2a8-f86e9d480065", // ~REPLACE~ with the Chart ID from your Embed Chart dialog
   41
     getUserToken: async function() {
   42
       return await login(getUser(), getPass());
   43
     }
   44
   });

2. Por cada gráfica que quieras incrustar, invoca el método CreateChart del objeto que acabas de crear. Para incrustar una de tus gráficas en la aplicación de muestra, reemplaza el valor de la propiedad id con el :guilabel:Chart ID de tu cuadro de diálogo Embed gráfica.

   El siguiente ejemplo muestra una invocación del método CreateChart en el archivo src/index.js en la aplicación de muestra.

   const chart = sdk.createChart({ chartId: "d98f67cf-374b-4823-a2a8-f86e9d480065" }); // ~REPLACE~ with the Chart ID from your Embed Chart dialog

Renderiza la gráfica.

Utiliza el método render de tu objeto de gráfica para renderizarlo en tu aplicación.

El siguiente ejemplo muestra una invocación del método render en el archivo src/index.js en la aplicación de muestra.

chart.render(document.getElementById("chart"));

Implemente y pruebe su aplicación.

Charts renderiza la gráfica si puede validar el token que recibió con la solicitud para renderizar la gráfica. Si el token no es válido, Charts no renderiza la gráfica y muestra un código de error.

Para obtener más información sobre los códigos de error de incrustación de gráficos, consulte Códigos de error incrustados.