Docs Menu
Docs Home
/
Atlas Charts
/
Embedding
/
Embedding SDK
/
Tutorials

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.

Prerequisites

  • You must be an Atlas Project Owner to configure embedding authentication providers for your linked Charts instance.

  • Create a New Dashboard

  • Create a Chart

Procedures

Enable Authenticated Embedding for your Chart

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

Select a dashboard.

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

2

Select a chart.

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

Note

If a chart is on a dashboard that has embedding enabled, the Embed Chart option is automatically enabled. Therefore, you can't select the Embed chart option for charts within dashboards that have embedding enabled.

3

Enable external sharing on the data source

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

Select the Authenticated tab in the dialog window.

Embed authenticated chart
click to enlarge
5

Toggle Enable authenticated access to On.

6

(Optional) Specify a filter function to inject per user.

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

(Optional) Specify filterable fields for your chart.

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

Copy the Chart Base URL and Chart ID

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

Create a Google Client ID

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.

Configure Charts to use Google Sign-In

1

Go to Charts.

If Atlas Charts is not already displayed, click the Charts tab in the Atlas UI.

Atlas launches an instance of Charts linked to your project.

2

Go to the Embedding page.

Click Embedding under the Development heading in the sidebar.

The Embedding page displays.

3

Go to the Authentication Settings view.

Note

You must be a Project Owner to access the Authentication Settings page. As a non-admin user, you can still use embedded charts, but you must get a key from a Project Owner.

Click the Authentication Settings tab.

The Authentication Settings tab displays.

4

Add the authentication provider.

  1. From the Authentication providers section, click Add.

  2. In the Name field, enter a descriptive name for the provider.

  3. From the Provider list, select Google.

  4. In the Google Client Id field, enter the Google Client ID you created.

  5. Click Save.

Create a Web App to Display Your Chart

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

Customize the Node.js App

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

1

Open the file index.html in a text editor.

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

2

Enter your Google Client ID

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

Enter your Charts Base URL

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 Embedding SDK for detailed instructions on enabling embedding for a chart.

4

Enter your chart ID

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 Embedding SDK for detailed instructions on enabling embedding for a chart.

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

Back

Tutorials

Next

Embed a Chart Authenticated with Atlas App Services