Menu Docs
Página inicial do Docs
/
Atlas Charts
/
Incorporação
/
Incorporando SDK
/
Tutorials

Incorpore um gráfico autenticado com o Atlas App Services

Nesta página

  • Pré-requisitos
  • Procedimentos
  • Habilitar incorporação autenticada para um gráfico
  • Configure o Charts para usar seu provedor de Atlas App Services personalizado
  • Crie um aplicativo da Web para exibir seu gráfico
  • Personalizar o aplicativo Node.js

O Atlas App Services é uma plataforma sem servidor que permite aos desenvolvedores criar aplicativos rapidamente sem ter que configurar a infraestrutura do servidor . O App Services oferece várias opções de autenticação, incluindo Google OAuth, Facebook Login e e-mail/senha. Você pode usar o mecanismo de autenticação de um serviço de aplicativo para controlar o acesso a dados de um gráfico incorporado.

Este tutorial mostra como:

  • Habilitar a incorporação autenticada para um gráfico.

  • Use o SDK de incorporação para incorporar um gráfico autenticado por um provedor personalizado do Atlas App Services.

  • Use seu serviço de aplicativo para controlar os dados em seu gráfico incorporado.

Observação

Este tutorial não aborda a criação de um serviço de aplicativo com autenticação. Consulte a documentação do Atlas App Services para obter tutoriais de criação de aplicativos.

Pré-requisitos

  • É necessário ser Proprietário do projeto no Atlas para configurar provedores de autenticação incorporados para sua instância vinculada no Charts.

  • Você deve ter um gráfico que utilize o banco de banco de dados de suporte do seu aplicativo como suafonte de dados do . Para mais informações sobre como criar um gráfico, consulte Construir Charts.

Procedimentos

Habilitar incorporação autenticada para um gráfico

Ative a incorporação autenticada para gerar um URL de base de gráficos e uma ID de gráfico. Você precisará da sua Charts Base URL e ID do gráfico para exibir seu gráfico em uma página da web.

1

Selecione um painel.

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

2

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.

Observação

Se um gráfico estiver em um dashboard que tenha a incorporação habilitada, a opção Embed Chart será habilitada automaticamente. Portanto, não é permitido selecionar a opção Embed chart para gráficos dentro de dashboards que tenham a incorporação habilitada.

3

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 .

4

Selecione a aba na janela de diálogo.Authenticated

Incorporar gráfico autenticado
clique para ampliar
5

Alterne Enable authenticated access para On.

6

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

Exemplo

A função de filtro a seguir só renderiza dados em que o campo ownerId de um documento corresponda ao valor do campo sub do token do provedor de autenticação de incorporação:

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

Dica

Veja também:

Para saber mais sobre como injetar filtros por usuário, consulte Injetar filtros específicos do usuário.

7

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

Dica

Veja também:

Para saber mais sobre campos filtráveis, consulte Especificar campos filtráveis.

8

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.

Configure o Charts para usar seu provedor de Atlas App Services personalizado

1

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.

2

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.

3

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

Observação

Você deve ser um proprietário do projeto para acessar a página Authentication Settings . Como usuário não administrador, você ainda pode usar gráficos incorporados, mas deve obter uma chave de um proprietário do projeto.

Clique na aba Authentication Settings.

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

4

Adicione o fornecedor de autenticação.

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

  2. No campo Name , insira um nome descritivo para o fornecedor.

  3. Na lista Provider , selecione Atlas App Services.

  4. Na lista Atlas Project, selecione o projeto do cloud que contém seu serviço de aplicativo.

  5. Na lista App ID , selecione o serviço de aplicativo a ser usado para autenticação.

5

Configure o botão de alternância para usar as regras do Atlas App Services para acesso a dados.

Nas regras de serviço de aplicativo, é possível autenticar usuários para acesso a gráficos incorporados, bem como realizar um controle refinado de acesso a dados. Defina a chave seletora para On se quiser ativar a aplicação de regras.

Quando essa opção estiver habilitada, todas as regras do App Services definidas em coleções serão observadas pelos Charts ao recuperar dados do gráfico. Você pode usar esse recurso para restringir o acesso aos dados mostrados no gráfico, incluindo a exibição de diferentes subconjuntos de dados para diferentes usuários, dependendo da funçãodeles.

Observação

  • Essa opção pressupõe que o conjunto de dados desse gráfico use o mesmo MongoDB database e collection que seu serviço de aplicativo.

  • O uso dessa opção pode ter um impacto no desempenho, portanto, você deve deixá-la desativada se não precisar restringir o acesso a dados com base nas regras do App Services.

6

Insira o nome do serviço.

Insira o nome do serviço que obtém dados do MongoDB. Para encontrar o nome do seu serviço de dados:

  1. Navegue até o serviço de aplicativo.

  2. Clique em Clusters na navegação da barra lateral.

  3. O nome do serviço está listado em App Service Name.

7

Clique no Save botão.

Crie um aplicativo da Web para exibir seu gráfico

Se você já tiver um aplicativo no qual exibir seu gráfico, estará pronto para adicionar um gráfico incorporado. Caso contrário, siga as etapas restantes para criar um novo aplicativo.

O MongoDB oferece um aplicativo de exemplo pré-criado que mostra como usar o SDK de incorporação para exibir um gráfico incorporado usando a autenticação do App Services.

Clone o repositório do GitHub e siga as instruções no arquivo Readme para começar a usar o aplicativo. Você pode executar o aplicativo como está ou pode personalizá-lo para usar o gráfico que criou anteriormente.

Observação

O aplicativo de exemplo pressupõe que seu serviço de aplicativo usa autenticação por e-mail/senha. Se o serviço do seu aplicativo usar outro mecanismo de autenticação, o aplicativo de exemplo exigirá personalização adicional.

Personalizar o aplicativo Node.js

Todas as linhas que você precisa editar são marcadas com um comentário contendo ~REPLACE~.

1

Abra o arquivo index.js em um editor de texto.

O arquivo index.js está localizado no diretório src .

2

Insira seu ID do aplicativo

Substitua o ID do aplicativo existente pelo seu ID do aplicativo, que você pode encontrar no lado esquerdo da interface do usuário do serviço de aplicativo.

const client = Stitch.initializeAppClient(
  'authentication-sample-eibkj', // Optional: ~REPLACE~ with your  App ID
{
3

Insira sua URL da base do Charts

Substitua a URL Base de Charts existente pela URL Base do gráfico que você deseja exibir. A URL da sua base de Charts fica visível na janela modal de opções de incorporação. Consulte Incorporação de SDK para obter instruções detalhadas sobre como habilitar a incorporação de um gráfico.

const sdk = new ChartsEmbedSDK({
  baseUrl: "https://charts-dev.mongodb.com/charts-test2-pebbp", // Optional: ~REPLACE~ with your Charts URL
  getUserToken: () => getRealmUserToken(client),
});

Observe a função getRealmUserToken() no trecho de código acima, que retorna o JWT da sessão de autenticação existente do Atlas App Services. getRealmUserToken() deve ser importado do SDK de incorporação, como você pode ver na declaração import na linha 2 do aplicativo de exemplo:

import ChartsEmbedSDK, { getRealmUserToken } from "@mongodb-js/charts-embed-dom";

Você também pode incluir o SDK de incorporação com JavaScript in-line em uma página HTML, como mostrado no seguinte trecho de código:

<script src="https://s3.amazonaws.com/stitch-sdks/js/bundles/4.6.0/stitch.js"></script>
<script src="https://unpkg.com/@mongodb-js/charts-embed-dom"></script>

Para usar a função getRealmUserToken() nesse cenário, importe-a do SDK:

ChartsEmbedSDK.getRealmUserToken()
4

Insira sua ID do gráfico

Substitua a ID do gráfico existente pela ID do gráfico que você deseja exibir. Sua ID de gráfico é visível na janela modal de opções de incorporação. Consulte Incorporação de SDK para obter instruções detalhadas sobre como habilitar a incorporação de um gráfico.

const chart = sdk.createChart({
  chartId: "a2e775e6-f267-4c2c-a65d-fbf3fad4a4f2", // Optional: ~REPLACE~ with your Chart ID
});

Quando terminar de personalizar o aplicativo, ele estará pronto para ser executado.

Voltar

Incorporar um gráfico autenticado com o Google Sign-In

Próximo

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