Navigation

Embed a Chart Authenticated with Google Sign-In

On this page

  • Prerequisites
  • Procedures
  • Enable Authenticated Embedding for your Chart
  • Create a Google Client ID
  • Configure Charts to use Google Sign-In
  • Create a Web App to Display Your Chart
  • Customize the Node.js App

This tutorial shows you how to configure a sample application to render an embedded, Google-authenticated chart on a web page.

Users must sign in with their Google account to view the chart. If a user doesn't sign in with Google, Charts doesn't render the authenticated chart view.

Enable authenticated embedding to generate a Charts Base URL and a chart ID. You will need your Charts Base URL and chart ID to display your chart on a web page.

1

From your dashboard page, select the dashboard containing the chart you wish to embed.

2

From the dashboard, click at the top-right of the chart to access its embedding information. Select Embed Chart from the dropdown menu.

3

If you have already enabled external sharing on the data source this chart uses, skip this step. If you haven't yet enabled embedding on the data source, you can do so now. Click the Configure external sharing link.

4
Embed authenticated chart
5
6

You can specify a function to inject a MongoDB filter document for each user who views the chart. This is useful for rendering user-specific charts.

Example

The following filter function only renders data where the ownerId field of a document matches the value of the Embedding Authentication Provider's token's sub field:

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

To learn more about injecting filters per user, see Inject User-Specific Filters.

7

Specify the fields on which chart viewers can filter data. By default, no fields are specified, meaning the chart cannot be filtered until you explicitly allow at least one field.

Tip
See also:

To learn more about filterable fields, see Specify Filterable Fields.

8

Use these values in your application code together with your Embedded Authentication Provider attributes to embed your chart.

Create a Google API Console project to generate a Google Client ID. You will need your Google Client ID to configure Charts to use Google Sign-In.

To create a Google API Console project, see Integrating Google Sign-In into your web app.

1
  1. If Charts is not already displayed, click Charts in the navigation bar.
  2. Click Charts Settings in the sidebar.
2
3
4
5
6

MongoDB offers a pre-built example app that shows how to use the Embedding SDK to display an embedded chart using Google authentication.

To run the example app, clone the MongoDB Charts Embedding Example - Google Authentication repository from GitHub and follow the instructions in the Readme file to begin using the app. You can run the app as-is with a sample chart, or you can customize it to use an existing chart.

All the lines you need to edit are marked with a comment containing ~REPLACE~.

1

The file index.html is located in the root directory of the authenticated-google project.

2

Replace the existing Google Client ID with your Google Client ID.

<!-- Optional: ~REPLACE~ content with your Google Client ID -->
<meta
name="google-signin-client_id"
content="012345678910-ifpoccch8js9srh9obfdn683h1iss2ag.apps.googleusercontent.com"
/>

Your Google Client ID is visible after creating a Google API Console project. See Create a Google Client ID for instructions on creating a Google Client ID.

3

Replace the existing baseUrl with the Base URL of the chart you want to display.

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

Your Charts Base URL is visible in the embedding options modal window. See Embed Charts with the Embedding SDK for detailed instructions on enabling embedding for a chart.

4

Replace the existing chartId with the ID of the chart you want to display.

const chart = sdk.createChart({
chartId: "example-acaf-4af0-8320-5099bfebd1bd", // Optional: ~REPLACE~ with your Chart ID
});

Your chart ID is visible in the embedding options modal window. See Embed Charts with the Embedding SDK for detailed instructions on enabling embedding for a chart.

After you finish customizing the app, it's ready to run.

Give Feedback

On this page

  • Prerequisites
  • Procedures
  • Enable Authenticated Embedding for your Chart
  • Create a Google Client ID
  • Configure Charts to use Google Sign-In
  • Create a Web App to Display Your Chart
  • Customize the Node.js App