Incorpore um gráfico autenticado usando um provedor de JSON web token personalizado

Selecione um painel.

Na página do seu dashboard, selecione o dashboard que contém o gráfico que você deseja incorporar.

Selecione um gráfico.

No painel, clique em no canto superior direito do gráfico para acessar suas informações de incorporação. Selecione Embed chart no menu suspenso.

Habilitar o compartilhamento externo no conjunto de dados

Se você já habilitou o compartilhamento externo no conjunto de dados que este gráfico utiliza, pule esta etapa. Se ainda não habilitou a incorporação no conjunto de dados, você pode fazer isso agora. Clique no link Configure external sharing .

Selecione a aba na janela de diálogo.Authenticated

clique para ampliar

Alterne Enable authenticated access para On.

(Opcional) Especifique uma função de filtro para injetar por usuário.

Você pode especificar uma função para injetar um documento de filtro MongoDB para cada usuário que visualizar o gráfico. Isso é útil para renderizar gráficos específicos do usuário.

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

(Opcional) Especifique campos filtráveis para seu gráfico.

Especifique os campos nos quais os visualizadores de gráficos podem filtrar dados. Por padrão, nenhum campo é especificado, o que significa que o gráfico não pode ser filtrado até que você permita explicitamente pelo menos um campo.

Copie Chart Base URL o e o Chart ID

Use esses valores no código da aplicação junto com os atributos do provedor de autenticação incorporada para incorporar seu gráfico.

Go Vá Charts para.

Se o Atlas Charts ainda não estiver sendo exibido, clique na aba Charts na IU do Atlas.

O Atlas inicia uma instância do Charts vinculada ao seu projeto.

Vá para a página.<a class=\" \" href=\" \" title=\" \"><svg xmlns=\" \" width=\" \" height=\" \"Embedding fill=\" \" viewbox=\" \" class=\" \" role=\" \" aria-label=\" \"><path fill=\" \" d=\" \"> <path fill=\" \" d=\" \">

Clique em Embedding sob o título Development na barra lateral.

A página Incorporação é exibida.

VáGo para o Authentication Settings modo de exibição.

Clique na aba Authentication Settings.

A aba Configurações de autenticação é exibida.

Adicione o fornecedor de autenticação.

1. Na seção Authentication providers , clique em Add.

2. Forneça os seguintes valores para configurar o Charts para validar o JSON web token para o tutorial.

   Campo	Valor
   Nome	Insira charts-jwt-tutorial.
   Fornecedor	Selecione Custom JSON Web Token.
   Algoritmo de assinatura	Selecione HS256.
   Chave de assinatura	Insira topsecret.

3. Clique em Save.

No código do servidor do aplicação , gere e retorne um JSON web JSON web token token. A implementação varia de acordo com seu provedor de autenticação.

O arquivo app.js na aplicação de amostra usa um serviço web simples e o pacote jsonwebtoken para gerar e retornar um JSON web token assinado usando o algoritmo HS256 quando um usuário faz login na aplicação com estas credenciais:

• Nome de usuário: admin

• Senha: 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}!`));

No aplicativo de amostra, a chave de assinatura topsecret é definida em um arquivo em seu aplicativo chamado config.js:

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

Incorporar um gráfico.

1. Crie um novo objeto da classe ChartsEmbedSDK . Fornecer:

   • O valor da propriedade baseUrl com a URL que ponto para sua instância de Charts. Para incorporar um de seus gráficos no aplicativo de amostra, substitua este valor pelo :guilabel: Base URL da caixa de diálogo Incorporar Gráfico.

   • A propriedade chartId para especificar o identificador único do gráfico que você deseja incorporar. Para incorporar um de seus gráficos no aplicativo de amostra, substitua este valor pelo :guilabel: Chart ID da caixa de diálogo Incorporar Gráfico.

   • A propriedade getUserToken para especificar a função que gera e retorna um JSON web token do seu provedor de autenticação.

   • Quaisquer propriedades opcionais que você deseja fornecer. Para obter uma lista de todas as propriedade que você pode usar ao incorporar Atlas Charts usando o SDK, consulte Referência de opções do SDK.

   No arquivo src/index.js na aplicação de amostra, a função login na propriedade getUserToken chama o serviço da web que você criou para gerar um JSON web token. Se o login for bem-sucedido, essa função retornará um JSON web token válido para a propriedade 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 você deseja incorporar, invoque o método CreateChart do objeto que você acabou de criar. Para incorporar um de seus Atlas Charts na aplicação de amostra, substitua o valor da propriedade id pelo :guilabel:Chart ID da sua caixa de diálogo Incorporar Gráfico.

   O exemplo seguinte mostra uma invocação do método CreateChart no arquivo src/index.js no aplicativo de amostra.

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

Renderize o gráfico.

Use o método render do seu objeto de gráfico para renderizá-lo em seu aplicativo.

O exemplo seguinte mostra uma invocação do método render no arquivo src/index.js no aplicativo de amostra.

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

Implemente e teste seu aplicativo.

O Charts renderiza o gráfico se puder validar o token recebido com a solicitação para renderizar o gráfico. Se o token não for válido, o Charts não renderizará o gráfico e exibirá um código de erro.

Para obter mais informações sobre os códigos de erro de incorporação de Charts, consulte Códigos de erro incorporados.