Primeiros passos com o SDK de incorporação
Nesta página
Você pode incorporar um gráfico ou painel em um aplicação da web com oSDK de incorporação , permitindo ajustes mais flexíveis de configurações e renderização.
Pré-requisitos
Você deve ser um autor de painel para habilitar a incorporação de um gráfico.
Procedimentos
Habilitar incorporação
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.
Habilite 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 .
(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.
Alternativamente, você pode especificar todos os campos em seu gráfico selecionando Allow all fields in the data source used in this chart.
Para saber mais sobre campos filtráveis, consulte Especificar campos filtráveis.
Selecione o Javascript SDK painel.
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.
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 .
(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.
Configurar provedores de autenticação incorporados
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 Incorporando do é exibida.
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.
Adicione o fornecedor de autenticação.
Na seção Authentication providers , clique em Add.
No campo Name , insira um nome descritivo para o fornecedor.
Na lista Provider , selecione o tipo de fornecedor que deseja adicionar.
Configure o Charts para verificar tokens do provedor.
Os valores que você deve inserir diferem com base no provedor selecionado:
FornecedorCamposJWT personalizadoForneça os seguintes valores:
CampoValorAlgoritmo de assinaturaChave de assinaturaSegredo ou chave usada para validar a assinatura JWT . Se os tokens não forem assinados, o Charts os considerará inválidos. Se você fornecer uma chave incorreta, Charts não poderá verificar as assinaturas de token e as considerarão inválidas.
O valor que você deve fornecer depende do Signing Algorithm:
HS256: insira a chave secreta usada para assinar o JSON web token.RS256: Selecione JWK or JWKS URL ou PEM Public Key .Se você selecionar JWK or JWKS URL, o Charts recuperará a chave do JWK ou arquivo JWKS na URL especificada. Em seguida, o Charts usa a chave para validar o JSON web token. Se houver várias chaves no arquivo, o Charts tentará cada chave até encontrar uma correspondência. Insira a URL que contém o arquivo JWK ou JWKS.
Se você escolher PEM Public Key, o Charts usará a chave pública especificada para verificar o JSON web token. Insira a chave pública do par de chaves utilizado para assinar o JSON web token. A chave pública deve estar no formato PEM, como mostrado no exemplo a seguir:
-----BEGIN CERTIFICATE----- MIIDfjCCAmagAwIBAgIBBzANBgkqhkiG9w0BAQUFADB0MRcwFQYDVQQDEw5LZXJu ZWwgVGVzdCBDQTEPMA0GA1UECxMGS2VybmVsMRAwDgYDVQQKEwdNb25nb0RCMRYw FAYDVQQHEw1OZXcgWW9yayBDaXR5MREwDwYDVQQIEwhOZXcgWW9yazELMAkGA1UE BhMCVVMwHhcNMTQwNzE3MTYwMDAwWhcNMjAwNzE3MTYwMDAwWjBsMQ8wDQYDVQQD EwZzZXJ2ZXIxDzANBgNVBAsTBktlcm5lbDEQMA4GA1UEChMHTW9uZ29EQjEWMBQG A1UEBxMNTmV3IFlvcmsgQ2l0eTERMA8GA1UECBMITmV3IFlvcmsxCzAJBgNVBAYT AlVTMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAp76KJeDczBqjSPJj 5f8DHdtrWpQDK9AWNDlslWpi6+pL8hMqwbX0D7hC2r3kAgccMyFoNIudPqIXfXVd 1LOh6vyY+jveRvqjKW/UZVzZeiL4Gy4bhke6R8JRC3O5aMKIAbaiQUAI1Nd8LxIt LGvH+ia/DFza1whgB8ym/uzVQB6igOifJ1qHWJbTtIhDKaW8gvjOhv5R3jzjfLEb R9r5Q0ZyE0lrO27kTkqgBnHKPmu54GSzU/r0HM3B+Sc/6UN+xNhNbuR+LZ+EvJHm r4de8jhW8wivmjTIvte33jlLibQ5nYIHrlpDLEwlzvDGaIio+OfWcgs2WuPk98MU tht0IQIDAQABoyMwITAfBgNVHREEGDAWgglsb2NhbGhvc3SCCTEyNy4wLjAuMTAN BgkqhkiG9w0BAQUFAAOCAQEANoYxvVFsIol09BQA0fwryAye/Z4dYItvKhmwB9VS t99DsmJcyx0P5meB3Ed8SnwkD0NGCm5TkUY/YLacPP9uJ4SkbPkNZ1fRISyShCCn SGgQUJWHbCbcIEj+vssFb91c5RFJbvnenDkQokRvD2VJWspwioeLzuwtARUoMH3Y qg0k0Mn7Bx1bW1Y6xQJHeVlnZtzxfeueoFO55ZRkZ0ceAD/q7q1ohTXi0vMydYgu 1CB6VkDuibGlv56NdjbttPJm2iQoPaez8tZGpBo76N/Z1ydan0ow2pVjDXVOR84Y 2HSZgbHOGBiycNw2W3vfw7uK0OmiPRTFpJCmewDjYwZ/6w== -----END CERTIFICATE-----
Público (opcional)Reclamação do público que deve estar presente no JSON web token para Charts que o considere válido.GoogleNo campo Client ID , insira o ID do Google Client do seu aplicativo, no seguinte formato:
<prefix>.apps.googleusercontent.com Serviços Atlas AppForneça os seguintes valores:
CampoValorProjetoprojeto que contém seu serviço de aplicativo.App ServiceServiço de aplicativo que está emitindo o token do usuário.Buscar dados usando o Atlas App Services (opcional)Alterne para permitir que Charts busquem dados e regras do usuário de um serviço de aplicativo.
Se habilitado, o Charts recupera dados do serviço que você especifica no campo App Service Name .
Habilitar essa opção permite que você defina regras no Atlas App Services para controlar os dados que o Charts exibe para collection ou usuários específicos.
Para obter mais informações, consulte Filtrar queries de entrada na documentação do App Services.
Nome do App ServiceO nome do serviço em seu serviço de aplicativo que Charts usa para recuperar os dados para seu gráfico. Por exemplo,mongodb-atlas.Clique em Save.
Selecione.<a class=\" \" href=\" \" title=\" \"><svg xmlns=\" \" width=\" \" height=\" \" fill=\" \" viewbox=\" \" class=\" \" role=\" \" aria-label=\" \"><path fill=\" \" d=\" \"> <path fill=\" \" d=\" \"> Embed
No painel, clique em no canto superior direito do painel para acessar as informações de incorporação. Selecione Embed no menu suspenso.
(Opcional) Especifique campos filtráveis para seu dashboard.
Especifique os campos nos quais os visualizadores do painel podem filtrar dados. Por padrão, nenhum campo é especificado, o que significa que o dashboard não pode ser filtrado até que você permita explicitamente pelo menos um campo.
Como alternativa, você pode especificar todos os campos em seu dashboard selecionando Allow all fields in the data source used in this dashboard.
Para saber mais sobre campos filtráveis, consulte Especificar campos filtráveis.
Selecione o Javascript SDK painel.
Selecione.<a class=\" \" href=\" \" title=\" \"><svg xmlns=\" \" width=\" \" height=\" \" fill=\" \" viewbox=\" \" class=\" \" role=\" \" aria-label=\" \"><path fill=\" \" d=\" \"> <path fill=\" \" d=\" \"> Embed
No painel, clique em no canto superior direito do painel para acessar as informações de incorporação. Selecione Embed no menu suspenso.
Adicione fornecedores de autenticação.
Se você já configurou os fornecedores de autenticação, pule esta etapa. Se você ainda não configurou os fornecedores de autenticação, pode fazê-lo agora.
Para saber mais, consulte Configurar provedores de autenticação incorporados.
Clique em Add.
Especifique um nome para a integração de autenticação.
Selecione um fornecedor e especifique as configurações do fornecedor.
Clique em Save.
Clique em Back to Embed Dashboard.
(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 painel. Isso é útil para renderizar painéis 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.
(Opcional) Especifique campos filtráveis para seu dashboard.
Especifique os campos nos quais os visualizadores do painel podem filtrar dados. Por padrão, nenhum campo é especificado, o que significa que o dashboard não pode ser filtrado até que você permita explicitamente pelo menos um campo.
Como alternativa, você pode especificar todos os campos em seu dashboard selecionando Allow all fields in the data source used in this dashboard.
Para saber mais sobre campos filtráveis, consulte Especificar campos filtráveis.
Criar um aplicativo web
Continue com as etapas restantes para criar um novo aplicativo no qual exibir seu gráfico.
Observação
MongoDB oferece uma aplicação de exemplo pré-criada no Github repositório do que mostra como usar o SDK de incorporação para exibir um gráfico incorporado não autenticado.
Continue com as etapas restantes para criar um novo aplicativo no qual exibir seu gráfico.
Observação
MongoDB O oferece um exemplo pré-criado no Github repositório do que mostra como usar o SDK de incorporação para autenticar um gráfico incorporado usando seu provedor de autenticação.
Continue com as etapas restantes para criar um novo aplicativo para exibir seu dashboard.
Observação
MongoDB O oferece um exemplo pré-criado de um painel incorporado não autenticado no Github repositório do . Este exemplo mostra como usar o SDK de incorporação para exibir um painel incorporado não autenticado.
Continue com as etapas restantes para criar um novo aplicativo no qual exibir seu dasbhoard.
Observação
MongoDB oferece exemplos de painéis incorporados autenticados no Github repositório do . Esses exemplos mostram como usar o SDK de incorporação para autenticar um painel incorporado usando provedores de autenticação de token da Web Atlas App Services, Google ou JSON web token .
Adicionar código de incorporação ao seu aplicativo
Para saber como instalar o SDK de incorporação em seu aplicativo, consulte Instalar o SDK de incorporação.
Adicione o seguinte código ao seu aplicativo da web para executar onde você deseja que seu gráfico seja renderizado:
Observação
Substitua a URL da Base de Charts existentes e o ID do gráfico pelos valores do gráfico que você deseja exibir. A URL da base de Charts e a ID do chart ficam visíveis na janela modal de opções de incorporação.
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"));
Adicione o seguinte código ao seu aplicativo da web para executar onde você deseja que seu gráfico seja renderizado. O exemplo seguinte autentica com Atlas App Services.
Observação
Replace the existing App ID with your App ID, which you can find in the Atlas App Services UI. Substitua o URL base dos Charts existentes e o ID do gráfico pelos valores do gráfico que você deseja exibir. O URL da base do Charts e o ID do gráfico são visíveis na janela modal de opções de incorporação.
import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom"; // Needed only if you are using the Atlas App Services authentication provider const client = Stitch.initializeAppClient( 'authentication-sample-eibkj', // ~REPLACE~ with your App ID }); const sdk = new ChartsEmbedSDK({ baseUrl: "https://charts.mongodb.com/charts-embedding-examples-wgffp", // ~REPLACE~ with the Base URL from your Embed Chart dialog. getUserToken: () => getRealmUserToken(client), // getUserToken is a callback to provide the auth token to the SDK. // Use the getRealmUserToken helper when using the Atlas App Services auth provider. // If using Custom JWT or Google providers, provide your own code to retrieve the JWT }); 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"));
Adicione o seguinte código ao seu aplicativo da web para ser executado onde você deseja que seu painel seja renderizado.
Observação
Substitua o Dashboards Base URL existente e o ID do painel pelos valores do painel que você deseja exibir. Seu Dashboards Base URL e o ID do painel estão visíveis na janela modal de opções de incorporação.
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"));
Adicione o seguinte código ao seu aplicativo da web para executá-lo onde você deseja que seu painel seja renderizado. O exemplo seguinte autentica com Atlas App Services.
Observação
Substitua o ID do aplicativo existente pelo seu ID do aplicativo. Você pode encontrar sua ID do aplicativo na UI do Atlas App Services . Substitua o Dashboards Base URL existente e o ID do painel pelos valores do painel que você deseja exibir. Seu Dashboards Base URL e o ID do painel estão visíveis na janela modal de opções de incorporação.
import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom"; // Needed only if you are using the Atlas App Services authentication provider const client = Stitch.initializeAppClient( 'authentication-sample-eibkj', // ~REPLACE~ with your App ID }); const sdk = new ChartsEmbedSDK({ baseUrl: "https://charts.mongodb.com/charts-embedding-examples-wgffp", // ~REPLACE~ with the Base URL from your Embed Dashboard dialog. getUserToken: () => getRealmUserToken(client), // getUserToken is a callback to provide the auth token to the SDK. // Use the getRealmUserToken helper when using the Atlas App Services auth provider. // If using Custom JWT or Google providers, provide your own code to retrieve the JWT }); 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"));