Incruste un gráfico autenticado mediante un proveedor JWT personalizado

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.

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

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

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

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.

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.

Se muestra la página Visualizaciones integradas.

Vaya a la Authentication Settings vista.

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, haga clic en Add.

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

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

3. Haga clic en Save.

En el código de su servidor de aplicaciones, genere y devuelva un JWT. La implementación varía según su proveedor de autenticación.

El app.js archivo en la aplicación de muestra utiliza un servicio web simple y el jsonwebtoken paquete para generar y devolver un JWT firmado mediante el HS256 algoritmo 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 se define en un archivo en su aplicación llamado config.js:

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

Incrustar un gráfico.

1. Crea un nuevo objeto de la clase ChartsEmbedSDK. Indica:

   • El valor de la propiedad baseUrl con la URL que apunta a su instancia de Gráficos. Para incrustar uno de sus gráficos en la aplicación de ejemplo, reemplace este valor con :guilabel:Base URL en el cuadro de diálogo "Incrustar gráfico".

   • La propiedad chartId especifica el identificador único del gráfico que desea incrustar. Para incrustar uno de sus gráficos en la aplicación de ejemplo, reemplace este valor con :guilabel:Chart ID en el cuadro de diálogo "Incrustar gráfico".

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

   • Cualquier propiedad opcional que desee proporcionar. Para obtener una lista de todas las propiedades que puede usar al incrustar gráficos con el SDK, consulte la 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. Para cada gráfico que desee incrustar, invoque el método CreateChart del objeto que acaba de crear. Para incrustar uno de sus gráficos en la aplicación de ejemplo, sustituya el valor de la propiedad id por :guilabel:Chart ID en el cuadro de diálogo "Incrustar gráfico".

   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

Representar el gráfico.

Utilice el método render de su objeto gráfico para representarlo en su 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 el gráfico si puede validar el token recibido con la solicitud. Si el token no es válido, Charts no lo renderiza 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.