feat: CHARTS-7418 Add embedding examples for realm-web package (#70)

Author: khanguslee

README.md

@@ -34,7 +34,7 @@ yarn add @mongodb-js/charts-embed-dom
 
 - [Getting started with the MongoDB Charts SDK](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/unauthenticated)
 - [Getting started with custom JWT authentication](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/authenticated-custom-jwt)
-- [Getting started with Realm authentication](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/authenticated-realm)
+- [Getting started with App Services authentication via Realm Web SDK](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/authenticated-realm-web)
 - [Getting started with Google authentication](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/authenticated-google)
 - [Getting started with click events](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/click-events-basic)
 - [Interactive filtering using click events](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/click-events-filtering)
@@ -45,6 +45,6 @@ yarn add @mongodb-js/charts-embed-dom
 
 - [Embedding an unauthenticated dashboard](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/unauthenticated)
 - [Dashboard embedding with custom JWT authentication](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/authenticated-custom-jwt)
-- [Dashboard embedding with Realm authentication](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/authenticated-realm)
+- [Dashboard embedding with App Services authentication via Realm Web SDK](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/authenticated-realm-web)
 - [Dashboard embedding with Google authentication](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/authenticated-google)
 - [Accessing a Chart instance via Dashboard class](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/unauthenticated-get-chart)

examples/README.md

@@ -2,7 +2,7 @@
 
 MongoDB Charts allows you to create visualizations of your MongoDB data using a simple web interface. You can view the visualizations within the Charts UI, or you can use the Embedding feature to render the charts in an external web application.
 
-Charts can be embedded either using a simple IFRAME snippet, or by using the Charts Embedding SDK from your JavaScript code. When using the SDK, embedded charts can be either unauthenticated (meaning anyone who has the embed code can view the chart), or authenticated (whereby the user can only view the chart if they have an active authentication session linked to a Charts authentication provider).
+Charts can be embedded either using a simple IFRAME snippet, or by using the Charts Embedding SDK from your JavaScript code. When using the SDK, embedded charts can be either unauthenticated (meaning anyone who has access to the page where the chart is embedded can view the chart), or authenticated (whereby the user can only view the chart if they have an active authentication session linked to a Charts authentication provider).
 
 This directory contains example applications making use of both unauthenticated and authenticated utilizations of the SDK. They are provided as a reference to kick start your development process. To run these examples, simply clone the directory, and run the following commands:
 
@@ -18,7 +18,7 @@ The [Unauthenticated](https://github.com/mongodb-js/charts-embed-sdk/tree/master
 Our **authenticated** examples are great references if you need help getting started creating Authenticated Embedded Charts. We have three examples, each tailored for the three Authentication Providers now available in MongoDB Charts. The three examples are:
 
 - [Custom JWT](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/authenticated-custom-jwt)
-- [MongoDB Realm](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/authenticated-realm)
+- [Atlas App Services](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/authenticated-realm-web)
 - [Google](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/authenticated-google)
 
 If you'd like to build **interactive** charts, we have two examples showing this capability:
@@ -40,7 +40,7 @@ If your dashboard needs some privacy, you can look at our authenticated examples
 
 
 - [Custom JWT](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/authenticated-custom-jwt)
-- [MongoDB Realm](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/authenticated-realm)
+- [Atlas App Services](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/authenticated-realm-web)
 - [Google](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/authenticated-google)
 
 

examples/charts/authenticated-custom-jwt/README.md

@@ -6,7 +6,7 @@
 
 MongoDB Charts allows you to create visualizations of your MongoDB data using a simple web interface. You can view the visualizations within the Charts UI, or you can use the Embedding feature to render the charts in an external web application.
 
-Charts can be embedded either using a simple IFRAME snippet, or by using the Charts Embedding SDK from your JavaScript code. When using the SDK, embedded charts can be either unauthenticated (meaning anyone who has the embed code can view the chart), or authenticated (whereby the user can only view the chart if they have an active authentication session linked to a Charts authentication provider).
+Charts can be embedded either using a simple IFRAME snippet, or by using the Charts Embedding SDK from your JavaScript code. When using the SDK, embedded charts can be either unauthenticated (meaning anyone who has access to the page where the chart is embedded can view the chart), or authenticated (whereby the user can only view the chart if they have an active authentication session linked to a Charts authentication provider).
 
 This sample shows how to use the JavaScript Embedding SDK to render **authenticated** embedded charts, specifically via a custom jwt authentication. The sample app has its own authentication and token issuing logic. You may want to follow a similar approach if you are not integrating with an external authentication mechanism or your authentication is not based on JWTs. Alternatively, if you are using an existing authentication mechanism that issues JWTs, you can use those tokens to authenticate your chart rendering requests after configuring a Charts authentication provider that can validate the JWT.
 
@@ -33,24 +33,39 @@ _The following steps presume the use of npm, though yarn works as well._
 
 This sample is preconfigured to render a specific chart. You can run the sample as-is, or you can modify it to render your own chart by completing the following steps:
 
-1. Log onto MongoDB Charts
+### Create chart to embed
+
+1. Log onto MongoDB Charts.
 
 2. If you haven't done so already, create a chart on any dashboard that you would like to embed.
 
-3. Go to the Data Sources tab, find the data source that you are using on the chart, and choose External Sharing Options from the ... menu. Make sure that embedding is enabled for this data source and select '**Verified Signature Only**'
+### Enable data source for authenticated access
+
+3. Go to the Data Sources tab found on the side panel.
+
+4. Find the data source that you want to use on the chart by selecting the deployment, database and collection. Once found, click on the Manage button in the Data access section to access the Data source management page.
+
+5. Make sure the "External users can view data in this data source" option is toggled on and "Allow authenticated data access" has been selected.
+
+### Enable chart for embedded access
 
-4. Find the chart you want to embed, click the **...** menu and select **Embed Chart**
+6. Go to the Dashboards tab on the side panel, and select the dashboard that contains the chart you wish to embed.
 
-5. Ensure the Unauthenticated tab is selected and turn on '**Enable authenticated access**'
+7. Click the **...** menu and select **Embed chart**.
 
-6. Note the Chart ID and the Chart Base URL, as you will need them for running the demo.
+8. Ensure the Authenticated tab is selected and turn on '**Enable authenticated access**'.
 
-7. Close the menu and click on the Admin Settings button.
+9.  Note the Chart ID and the Base URL, as you will need them for running the demo.
 
-8. Under Embedding Authentication Providers, press the **Add New Provider** button
-9. Fill in the details like so:
+10. Close the menu.
 
-![](https://i.imgur.com/8cS1iSJ.png)
+### Create authentication provider
+
+11. Go to the Embedding tab on the side panel.
+
+12. Ensure the "Authentication Settings" tab is selected and press the "Add" button in the Authentication providers section.
+
+13. Fill in the details like so:
 
 - Name: `Custom JWT` _Note, this is only for your convenience and can be named anything_
 - Provider: `Custom JSON Web Token`
@@ -69,8 +84,9 @@ This sample is preconfigured to render a specific chart. You can run the sample
 This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:1234` in the url bar to see the sample. Along with this, a local jwt authentication server will be spun up on `http://localhost:8000`.
 
 The hard coded credentials used in this demo are:
-username : `admin`
-password: `password`
+
+- Username : `admin`
+- Password: `password`
 
 ## Next Steps
 

examples/charts/authenticated-custom-jwt/package-lock.json

@@ -8,13 +8,13 @@
     "build": "parcel build index.html"
   },
   "dependencies": {
-    "@mongodb-js/charts-embed-dom": "^2.1.0",
+    "@mongodb-js/charts-embed-dom": "^2.3.0",
     "cors": "^2.8.5",
     "express": "^4.16.3",
     "jsonwebtoken": "^8.3.0",
+    "parcel": "^1.12.4",
     "regenerator-runtime": "^0.13.3",
-    "request": "^2.88.2",
-    "parcel": "^1.12.4"
+    "request": "^2.88.2"
   },
   "devDependencies": {
     "@babel/core": "^7.8.6",

examples/charts/authenticated-custom-jwt/package.json

@@ -6,7 +6,7 @@
 
 MongoDB Charts allows you to create visualizations of your MongoDB data using a simple web interface. You can view the visualizations within the Charts UI, or you can use the Embedding feature to render the charts in an external web application.
 
-Charts can be embedded either using a simple IFRAME snippet, or by using the Charts Embedding SDK from your JavaScript code. When using the SDK, embedded charts can be either unauthenticated (meaning anyone who has the embed code can view the chart), or authenticated (whereby the user can only view the chart if they have an active authentication session linked to a Charts authentication provider).
+Charts can be embedded either using a simple IFRAME snippet, or by using the Charts Embedding SDK from your JavaScript code. When using the SDK, embedded charts can be either unauthenticated (meaning anyone who has access to the page where the chart is embedded can view the chart), or authenticated (whereby the user can only view the chart if they have an active authentication session linked to a Charts authentication provider).
 
 This sample shows how to use the JavaScript Embedding SDK to render **authenticated** embedded charts, specifically via configuring **Google** as an authentication provider. The sample app is already set up to authenticate with a Google Client ID hosted by the Charts Development team.
 
@@ -39,30 +39,48 @@ This sample is pre-configured with a MongoDB-owned test Client ID. To use Google
 
 Steps on how to configure a Project with Google and attain a Google Client ID can be found [here](https://developers.google.com/identity/sign-in/web/sign-in). You'll need to set the Origin and Redirect URIs to whatever you use in your application. In our sample, that is http://localhost:3000.
 
-### Preparing your Chart for Embedding
+## Preparing your Chart for Embedding
 
 This sample is preconfigured to render a specific chart. You can run the sample as-is, or you can modify it to render your own chart by completing the following steps:
 
+### Create chart to embed
+
 1. Log onto MongoDB Charts
 
 2. If you haven't done so already, create a chart you would like to embed on any dashboard.
 
-3. Go to the Data Sources tab on the left navigation column. Find the data source that you are using on the chart, and choose External Sharing Options from the ... menu. Make sure that embedding is enabled for this data source and select '**Authenticated Embedding Only**'
+### Enable data source for authenticated access
 
-4. Go to the Admin Settings tab on the left navigation column. Under 'Embedding Authentication Providers', click 'Add New Provider'.
+3. Go to the Data Sources tab found on the side panel.
 
-   - Name your Provider e.g `Google`
-   - Select the Google Provider.
-   - Enter your Google Client ID
-     - This should be the entire string `<encodedData>.apps.googleusercontent.com`
+4. Find the data source that you want to use on the chart by selecting the deployment, database and collection. Once found, click on the Manage button in the Data access section to access the Data source management page.
+
+5. Make sure the "External users can view data in this data source" option is toggled on and "Allow authenticated data access" has been selected.
+
+### Enable chart for embedded access
+
+6. Go to the Dashboards tab on the side panel, and select the dashboard that contains the chart you wish to embed.
+
+7. Find the chart you want to embed, click the **...** menu and select **Embed chart**
 
-5. Go to the Dashboards tab on the left navigation column, and select the dashboard that contains the chart you wish to embed.
+8. Ensure the **Authenticated** tab is selected and turn on '**Enable authenticated access**'
 
-6. Find the chart you want to embed, click the **...** menu and select **Embed Chart**
+9. Note the **Chart ID** and the **Base URL**, as you will need them for running the demo.
 
-7. Ensure the Unauthenticated tab is selected and turn on '**Enable Authenticated access**'
+### Create authentication provider
 
-8. Note the Chart ID and the Chart Base URL, as you will need them for running the demo.
+10. Go to the Embedding tab on the side panel.
+
+11. Ensure the "Authentication Settings" tab is selected and press the "Add" button in the Authentication providers section.
+
+12. Go to the Admin Settings tab on the left navigation column. Under 'Embedding Authentication Providers', click 'Add New Provider'.
+
+13. Fill in the details like so:
+
+   - Name: `Google` _Note, this is only for your convenience and can be named anything you want here_
+   - Provider: `Google`
+   - Google Client ID: _See above for 
+     - This should be the entire string `<encodedData>.apps.googleusercontent.com`
 
 ## Running this Sample with your data