If you're getting an error code instead of a chart, click here 27 | to find out what the code means.
28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /c-sharp/README.md: -------------------------------------------------------------------------------- 1 | MongoDB Charts Embedding Example - Verified Signature Auth in C# 2 | ================================================================ 3 | 4 | Background 5 | ---------- 6 | MongoDB Charts allows you to create visualizations of your MongoDB data using a simple web interface. 7 | You can view the visualizations within the Charts UI, or you can use the Embedding feature to render 8 | the charts in an external web application. When you embed a chart, you can choose whether you want 9 | it to be Unauthenticated (meaning anyone who has the embed code can view the chart), or to use 10 | "Verified Signature" authentication (which checks the integrity of a signature in the URL before the 11 | chart will render). 12 | 13 | For the "Unauthenticated" option, you can copy the provided snippet and include it in any web site; 14 | no extra steps are required. 15 | 16 | The Verified Signature option requires a few more steps to implement but it is 17 | more secure — your app will generate the signature on the server side after first authenticating 18 | and authorizing the user, and the URL will stop working after a specified time period. 19 | 20 | This project contains a simple sample app showing how to implement "Verified Signature" authentication 21 | using C# on .NET Core. Samples for other languages and platforms are provided elsewhere in this 22 | repository. 23 | 24 | Preparing your Chart for Embedding 25 | ---------------------------------- 26 | 27 | 1. Log onto MongoDB Charts 28 | 29 | 2. If you haven't done so already, create a chart on any dashboard that you would like to embed. 30 | 31 | 3. Go to the Data Sources tab, find the data source that you are using on the chart, and choose 32 | *Embedding Options* from the *...* menu. Make sure that embedding is enabled for this data source, 33 | using either authentication mode. 34 | 35 | 4. Find the chart you want to embed, click the *...* menu and select Embed Chart. 36 | 37 | 5. Select the *Verified Signature* tab and turn on embedding. 38 | 39 | 6. Copy the IFRAME embed code from this dialog and keep it handy 40 | 41 | 7. Get the Embedding Signing Key from the Admin Settings page. If you are not a Charts Admin you 42 | will need to request this info from someone with this role. 43 | 44 | Running this Sample 45 | ------------------- 46 | 1. Ensure you have .NET Core installed and an editor such as Visual Studio or Visual Studio Code 47 | 48 | 2. Clone the Git repository or download the code to your computer. 49 | 50 | 3. Open the *Controllers\EmbeddedChartController.cs* file (server-side code), and replace the 51 | `~REPLACE~` placeholders with the appropriate values: 52 | - `~REPLACE~CHARTS_EMBEDDING_BASE_URL` with the base URL of your charts instance, e.g. 53 | https://charts.mongodb.com/charts-foo-abcde 54 | - `~REPLACE~EMBEDDING_SIGNING_KEY` with the Embedding Signing key you obtained above 55 | 56 | 4. Optionally, set the following variables in the same file: 57 | - `expiryTime` to configure the period of validity for the token (if not set, the token lasts one day) 58 | - `FILTER_DOCUMENT` if you want to apply an additional filter to the chart (e.g. "`{ foo: { $gt: 10 }}`") 59 | - `autoRefreshTime` if you want the chart to automatically refresh at a predetermined interval. Note 60 | that the entire chart must be reloaded with a new token before the validity period expires. 61 | 62 | 5. Open the *wwwroot\index.html* file (client-side code), and replace: 63 | - `~REPLACE~CHART_ID` with the value of the *id* parameter from the IFRAME snippet you copied from Charts 64 | 65 | 6. Launch the application to access the page in your browser. You should see the chart embedded 66 | within the sample page. 67 | 68 | Next Steps 69 | ---------- 70 | Once you're ready to embed charts in your own applications, keep the following in mind: 71 | 72 | * Always keep the Embedding Signing Key secure, and never put it inside client code. Anyone who 73 | has this key will be able to embed charts in any application. 74 | 75 | * Always authenticate users and perform any required authorization checks before generating the 76 | signed embedding URLs. The value of this mechanism is that you can restrict who can view the 77 | embedded charts, but this won't work if you give the signed URLs out to anonymous users! 78 | 79 | * Consider what expiration period is appropriate. The signed URLs include a timestamp, which 80 | Charts will compare against the current time, within the tolerance of the specified expiry period. 81 | Depending on the architecture of your application, you may want a very short expiry period 82 | (e.g. if you generate a new signature on every request) or a longer one (if the URL needs to 83 | be cached). 84 | -------------------------------------------------------------------------------- /embedding-sdk/unauthenticated/assets/styles.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | font-family: "Heebo"; 5 | transition: background-color 0.5s ease; 6 | } 7 | 8 | .chart-title { 9 | text-align: center; 10 | color: #89989b; 11 | } 12 | 13 | .body-content { 14 | display: flex; 15 | } 16 | 17 | th { 18 | font-weight: bold; 19 | color: #89989b; 20 | text-align: right; 21 | } 22 | 23 | .chartInfo { 24 | font-size: 20px; 25 | width: 520px; 26 | } 27 | 28 | td { 29 | padding-left: 20px; 30 | } 31 | 32 | .chartsContainer { 33 | display: flex; 34 | } 35 | 36 | main { 37 | box-sizing: border-box; 38 | padding: 1rem; 39 | height: 100%; 40 | display: flex; 41 | flex-direction: column; 42 | } 43 | 44 | #nav { 45 | flex-shrink: 0; 46 | padding: 1rem; 47 | display: flex; 48 | justify-content: space-between; 49 | align-items: center; 50 | font-weight: bold; 51 | color: #89989b; 52 | } 53 | 54 | #nav button, 55 | #nav select { 56 | font-size: 1.1rem; 57 | border-radius: 3px; 58 | box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); 59 | } 60 | 61 | #chart { 62 | border-top: none; 63 | flex-grow: 1; 64 | height: 100%; 65 | width: 80%; 66 | } 67 | 68 | .theme-label { 69 | line-height: 35px; 70 | padding-left: 10px; 71 | } 72 | 73 | span { 74 | white-space: pre; 75 | } 76 | 77 | .dark-mode { 78 | background-color: #061621; 79 | color: #ffffff; 80 | } 81 | 82 | body span.theme-label::before { 83 | content: "☀️"; 84 | } 85 | 86 | body.dark-mode span.theme-label::before { 87 | content: "🌙"; 88 | } 89 | -------------------------------------------------------------------------------- /embedding-sdk/unauthenticated/assets/toggle.css: -------------------------------------------------------------------------------- 1 | /* The switch - the box around the slider */ 2 | .switch { 3 | position: relative; 4 | display: inline-block; 5 | width: 60px; 6 | height: 34px; 7 | } 8 | 9 | /* Hide default HTML checkbox */ 10 | .switch input { 11 | opacity: 0; 12 | width: 0; 13 | height: 0; 14 | } 15 | 16 | /* The slider */ 17 | .slider { 18 | position: absolute; 19 | cursor: pointer; 20 | top: 0; 21 | left: 0; 22 | right: 0; 23 | bottom: 0; 24 | background-color: #c5e4f2; 25 | -webkit-transition: 0.4s; 26 | transition: 0.4s; 27 | box-shadow: #bdc3c7 0px 0px 10px 1px; 28 | } 29 | 30 | .slider:before { 31 | position: absolute; 32 | content: ""; 33 | height: 26px; 34 | width: 26px; 35 | left: 4px; 36 | bottom: 4px; 37 | background-color: white; 38 | -webkit-transition: 0.4s; 39 | transition: 0.4s; 40 | } 41 | 42 | input:checked + .slider { 43 | background-color: #1a567e; 44 | box-shadow: #2c3e50 0px 0px 10px 1px; 45 | } 46 | 47 | input:focus + .slider { 48 | box-shadow: 0 0 1px #1a567e; 49 | box-shadow: #2c3e50 0px 0px 10px 1px; 50 | } 51 | 52 | input:checked + .slider:before { 53 | -webkit-transform: translateX(26px); 54 | -ms-transform: translateX(26px); 55 | transform: translateX(26px); 56 | } 57 | 58 | /* Rounded sliders */ 59 | .slider.round { 60 | border-radius: 34px; 61 | } 62 | 63 | .slider.round:before { 64 | border-radius: 50%; 65 | } 66 | -------------------------------------------------------------------------------- /embedding-sdk/unauthenticated/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 || Current Refresh Interval | 65 |None | 66 |
|---|---|
| Current Theme | 69 |light | 70 |
| Current Filter | 73 |None | 74 |
If you're getting an error code instead of a chart, click here 25 | to find out what the code means.
26 | 27 | 28 | -------------------------------------------------------------------------------- /node/README.md: -------------------------------------------------------------------------------- 1 | MongoDB Charts Embedding Example - Verified Signature Auth in Node 2 | ================================================================== 3 | 4 | Background 5 | ---------- 6 | MongoDB Charts allows you to create visualizations of your MongoDB data using a simple web interface. 7 | You can view the visualizations within the Charts UI, or you can use the Embedding feature to render 8 | the charts in an external web application. When you embed a chart, you can choose whether you want 9 | it to be Unauthenticated (meaning anyone who has the embed code can view the chart), or to use 10 | "Verified Signature" authentication (which checks the integrity of a signature in the URL before the 11 | chart will render). 12 | 13 | For the "Unauthenticated" option, you can copy the provided snippet and include it in any web site; 14 | no extra steps are required. 15 | 16 | The Verified Signature option requires a few more steps to implement but it is 17 | more secure — your app will generate the signature on the server side after first authenticating 18 | and authorizing the user, and the URL will stop working after a specified time period. 19 | 20 | This project contains a simple sample app showing how to implement "Verified Signature" authentication 21 | using Node js. Samples for other languages and platforms are provided elsewhere in this 22 | repository. 23 | 24 | Preparing your Chart for Embedding 25 | ---------------------------------- 26 | 27 | 1. Log onto MongoDB Charts 28 | 29 | 2. If you haven't done so already, create a chart on any dashboard that you would like to embed. 30 | 31 | 3. Go to the Data Sources tab, find the data source that you are using on the chart, and choose 32 | *Embedding Options* from the *...* menu. Make sure that embedding is enabled for this data source, 33 | using either authentication mode. 34 | 35 | 4. Find the chart you want to embed, click the *...* menu and select Embed Chart. 36 | 37 | 5. Select the *Verified Signature* tab and turn on embedding. 38 | 39 | 6. Copy the IFRAME embed code from this dialog and keep it handy 40 | 41 | 7. Get the Embedding Signing Key from the Admin Settings page. If you are not a Charts Admin you 42 | will need to request this info from someone with this role. 43 | 44 | Running this Sample 45 | ------------------- 46 | 1. Ensure you have Node installed. You can confirm with `node --version`. On some 47 | operating systems, Node available as the `nodejs` binary instead. 48 | 49 | 2. Clone the Git repository or download the code to your computer. 50 | 51 | 3. Open the *server.js* file (server-side code), and replace the 52 | `~REPLACE~` placeholders with the appropriate values: 53 | - `~REPLACE~CHARTS_EMBEDDING_BASE_URL` with the base URL of your charts instance, e.g. 54 | https://charts.mongodb.com/charts-foo-abcde 55 | - `~REPLACE~EMBEDDING_SIGNING_KEY` with the Embedding Signing key you obtained above 56 | 57 | 4. Optionally, set the following variables in the same file: 58 | - `EXPIRY_TIME_SECONDS` to configure the period of validity for the token (if not set, the token lasts one day) 59 | - `FILTER_DOCUMENT` if you want to apply an additional filter to the chart (e.g. `{ foo: { $gt: 10 }}`) 60 | - `AUTOREFRESH_TIME_SECONDS` if you want the chart to automatically refresh at a predetermined interval. Note 61 | that the entire chart must be reloaded with a new token before the validity period expires. 62 | 63 | 5. Open the *static/index.html* file (client-side code), and replace: 64 | - `~REPLACE~CHART_ID` with the value of the *id* parameter from the IFRAME snippet you copied from Charts 65 | 66 | 6. Run `npm install` to install the package dependencies 67 | 68 | 7. Run `npm start` to start the server 69 | 70 | 8. You should see the chart embedded within the sample page on [http://localhost:3000](http://localhost:3000). 71 | 72 | Next Steps 73 | ---------- 74 | Once you're ready to embed charts in your own applications, keep the following in mind: 75 | 76 | * Always keep the Embedding Signing Key secure, and never put it inside client code. Anyone who 77 | has this key will be able to embed charts in any application. 78 | 79 | * Always authenticate users and perform any required authorization checks before generating the 80 | signed embedding URLs. The value of this mechanism is that you can restrict who can view the 81 | embedded charts, but this won't work if you give the signed URLs out to anonymous users! 82 | 83 | * Consider what expiration period is appropriate. The signed URLs include a timestamp, which 84 | Charts will compare against the current time, within the tolerance of the specified expiry period. 85 | Depending on the architecture of your application, you may want a very short expiry period 86 | (e.g. if you generate a new signature on every request) or a longer one (if the URL needs to 87 | be cached). 88 | -------------------------------------------------------------------------------- /node/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mongodb-charts-embedding-example", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "server.js", 6 | "author": "", 7 | "license": "Apache-2.0", 8 | "dependencies": { 9 | "express": "^4.16.4" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /node/server.js: -------------------------------------------------------------------------------- 1 | // Remember, in a real application, you should ensure your user is authenticated and authorized to view the chart before you return the signed URL. 2 | 3 | // Replace these constants with the correct values for your Charts instance 4 | const CHARTS_EMBEDDING_BASE_URL = '~REPLACE~CHARTS_EMBEDDING_BASE_URL'; // Replace with the base URL to your Charts instance, e.g. https://charts.mongodb.com/charts-foo-abcde (no trailing slash) 5 | const EMBEDDING_SIGNING_KEY = '~REPLACE~EMBEDDING_SIGNING_KEY'; // Replace with the Embedding Signing Key generated by your Charts admin 6 | const EXPIRY_TIME_SECONDS = 300; // Set to your preferred expiry period 7 | const FILTER_DOCUMENT = null; // Set to a MongoDB Query document if you want to filter the chart, e.g. { foo: { $gt: 10 }} 8 | const AUTOREFRESH_TIME_SECONDS = null; // Set to a number >=10 if you want the chart to autorefresh 9 | 10 | const express = require('express'); 11 | const crypto = require('crypto'); 12 | const app = express(); 13 | const port = 3000; 14 | 15 | app.get('/api/embeddedchart/:id', (req, res) => { 16 | const timestamp = Math.floor(Date.now() / 1000); 17 | let payload = `id=${req.params.id}×tamp=${timestamp}&expires-in=${EXPIRY_TIME_SECONDS}`; 18 | if (FILTER_DOCUMENT) { 19 | payload += `&filter=${encodeURIComponent(JSON.stringify(FILTER_DOCUMENT))}`; 20 | } 21 | if (AUTOREFRESH_TIME_SECONDS) { 22 | payload += `&autorefresh=${AUTOREFRESH_TIME_SECONDS}`; 23 | } 24 | const hmac = crypto.createHmac('sha256', EMBEDDING_SIGNING_KEY); 25 | hmac.update(payload); 26 | const signature = hmac.digest('hex'); 27 | // generate url for iframe 28 | const url = `${CHARTS_EMBEDDING_BASE_URL}/embed/charts?${payload}&signature=${signature}`; 29 | res.send(url); 30 | }); 31 | 32 | app.use(express.static('static')); 33 | app.listen(port, () => console.log(`Example app listening on port ${port}`)); 34 | -------------------------------------------------------------------------------- /node/static/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |If you're getting an error code instead of a chart, click here 25 | to find out what the code means.
26 | 27 | 28 | -------------------------------------------------------------------------------- /php/README.md: -------------------------------------------------------------------------------- 1 | MongoDB Charts Embedding Example - Verified Signature Auth in PHP 2 | ================================================================= 3 | 4 | Background 5 | ---------- 6 | MongoDB Charts allows you to create visualizations of your MongoDB data using a simple web interface. 7 | You can view the visualizations within the Charts UI, or you can use the Embedding feature to render 8 | the charts in an external web application. When you embed a chart, you can choose whether you want 9 | it to be Unauthenticated (meaning anyone who has the embed code can view the chart), or to use 10 | "Verified Signature" authentication (which checks the integrity of a signature in the URL before the 11 | chart will render). 12 | 13 | For the "Unauthenticated" option, you can copy the provided snippet and include it in any web site; 14 | no extra steps are required. 15 | 16 | The Verified Signature option requires a few more steps to implement but it is 17 | more secure — your app will generate the signature on the server side after first authenticating 18 | and authorizing the user, and the URL will stop working after a specified time period. 19 | 20 | This project contains a simple sample app showing how to implement "Verified Signature" authentication 21 | using PHP. Samples for other languages and platforms are provided elsewhere in this 22 | repository. 23 | 24 | Preparing your Chart for Embedding 25 | ---------------------------------- 26 | 27 | 1. Log onto MongoDB Charts 28 | 29 | 2. If you haven't done so already, create a chart on any dashboard that you would like to embed. 30 | 31 | 3. Go to the Data Sources tab, find the data source that you are using on the chart, and choose 32 | *Embedding Options* from the *...* menu. Make sure that embedding is enabled for this data source, 33 | using either authentication mode. 34 | 35 | 4. Find the chart you want to embed, click the *...* menu and select Embed Chart. 36 | 37 | 5. Select the *Verified Signature* tab and turn on embedding. 38 | 39 | 6. Copy the IFRAME embed code from this dialog and keep it handy 40 | 41 | 7. Get the Embedding Signing Key from the Admin Settings page. If you are not a Charts Admin you 42 | will need to request this info from someone with this role. 43 | 44 | Running this Sample 45 | ------------------- 46 | 47 | 1. Tested in PHP 7.x 48 | 49 | 2. php-mod-hash module is required 50 | 51 | 3. Open the *index.php* file (server-side code), and replace the 52 | `~REPLACE~` placeholders with the appropriate values: 53 | - `~REPLACE~CHARTS_EMBEDDING_BASE_URL` with the base URL of your charts instance, e.g. 54 | https://charts.mongodb.com/charts-foo-abcde 55 | - `~REPLACE~EMBEDDING_SIGNING_KEY` with the Embedding Signing key you obtained above 56 | - `~REPLACE~CHART_ID` with the value of the *id* parameter from the IFRAME snippet you copied from Charts 57 | 58 | 4. Optionally, set the following variables in the same file: 59 | - `$filter` if you want to apply an additional filter to the chart (e.g. "`{ foo: { $gt: 10 }}`") 60 | - `$autoRefreshSeconds` if you want the chart to automatically refresh at a predetermined interval. Note 61 | that the entire chart must be reloaded with a new token before the validity period expires. 62 | 63 | 5. Optionally, set the following variables in *src/MongoDB/Charts.php*: 64 | - `$expiry` to configure the period of validity for the token (if not set, the token lasts one day) 65 | 66 | 6. Run index.php from a PHP web service, for example: `php -S localhost:8000 -t ./` ran from this php examples directory 67 | -------------------------------------------------------------------------------- /php/index.php: -------------------------------------------------------------------------------- 1 | =10 if you want the chart to autorefresh 12 | 13 | $charts = new Charts($baseUrl, $embeddingKey, $filter, $autoRefreshSeconds); 14 | 15 | ?> 16 | 17 | 18 | 19 | 20 | 21 |If you're getting an error code instead of a chart, click here 25 | to find out what the code means.
26 | 27 | 28 | -------------------------------------------------------------------------------- /php/src/MongoDB/Charts.php: -------------------------------------------------------------------------------- 1 | chartsBaseUrl = $baseUrl; 18 | $this->embeddingSigningKey = $signingKey; 19 | $this->filter = $filter; 20 | $this->autoRefreshSeconds = $autoRefreshSeconds; 21 | } 22 | 23 | private function _genSignature(){ 24 | $sig = hash_hmac('sha256', $this->payload, $this->embeddingSigningKey); 25 | $this->signature = $sig; 26 | } 27 | 28 | private function _buildPayload($chartId){ 29 | $fmt = 'id=%s&tenant=%s×tamp=%d&expires-in=%d'; 30 | $now = time(); 31 | $this->payload = sprintf($fmt,$chartId,$this->tenantId,$now,$this->expiry); 32 | if ($this->filter !== NULL) { 33 | $this->payload .= '&filter=' . rawurlencode($this->filter); 34 | } 35 | if ($this->autoRefreshSeconds !== NULL) { 36 | $this->payload .= '&autorefresh=' . $this->autoRefreshSeconds; 37 | } 38 | } 39 | 40 | public function getChartUri($chartId){ 41 | $this->_buildPayload($chartId); 42 | $this->_genSignature(); 43 | $uri = '%s/embed/charts?%s&signature=%s'; 44 | $this->chartUri = sprintf($uri,$this->chartsBaseUrl,$this->payload,$this->signature); 45 | return $this->chartUri; 46 | } 47 | 48 | public function setExpirey($expire){ 49 | $this->expirey = $expire; 50 | } 51 | 52 | } 53 | -------------------------------------------------------------------------------- /python/README.md: -------------------------------------------------------------------------------- 1 | MongoDB Charts Embedding Example - Verified Signature Auth in Python 2 | ================================================================ 3 | 4 | Background 5 | ---------- 6 | MongoDB Charts allows you to create visualizations of your MongoDB data using a simple web interface. 7 | You can view the visualizations within the Charts UI, or you can use the Embedding feature to render 8 | the charts in an external web application. When you embed a chart, you can choose whether you want 9 | it to be Unauthenticated (meaning anyone who has the embed code can view the chart), or to use 10 | "Verified Signature" authentication (which checks the integrity of a signature in the URL before the 11 | chart will render). 12 | 13 | For the "Unauthenticated" option, you can copy the provided snippet and include it in any web site; 14 | no extra steps are required. 15 | 16 | The Verified Signature option requires a few more steps to implement but it is 17 | more secure — your app will generate the signature on the server side after first authenticating 18 | and authorizing the user, and the URL will stop working after a specified time period. 19 | 20 | This project contains a simple sample app showing how to implement "Verified Signature" authentication 21 | using Python 3. Samples for other languages and platforms are provided elsewhere in this 22 | repository. 23 | 24 | Preparing your Chart for Embedding 25 | ---------------------------------- 26 | 27 | 1. Log onto MongoDB Charts 28 | 29 | 2. If you haven't done so already, create a chart on any dashboard that you would like to embed. 30 | 31 | 3. Go to the Data Sources tab, find the data source that you are using on the chart, and choose 32 | *Embedding Options* from the *...* menu. Make sure that embedding is enabled for this data source, 33 | using either authentication mode. 34 | 35 | 4. Find the chart you want to embed, click the *...* menu and select Embed Chart. 36 | 37 | 5. Select the *Verified Signature* tab and turn on embedding. 38 | 39 | 6. Copy the IFRAME embed code from this dialog and keep it handy 40 | 41 | 7. Get the Embedding Signing Key from the Admin Settings page. If you are not a Charts Admin you 42 | will need to request this info from someone with this role. 43 | 44 | Running this Sample 45 | ------------------- 46 | 1. Ensure you have a Python 3.x installed. You can confirm with `python --version`. On some 47 | operating systems, Python 3 is available as the `python3` binary instead. 48 | 49 | 2. Clone the Git repository or download the code to your computer. 50 | 51 | 3. Open the *server.py* file (server-side code), and replace the 52 | `~REPLACE~` placeholders with the appropriate values: 53 | - `~REPLACE~CHARTS_EMBEDDING_BASE_URL` with the base URL of your charts instance, e.g. 54 | https://charts.mongodb.com/charts-foo-abcde 55 | - `~REPLACE~EMBEDDING_SIGNING_KEY` with the Embedding Signing key you obtained above 56 | 57 | 4. Optionally, set the following variables in the same file: 58 | - `EXPIRY_TIME_SECONDS` to configure the period of validity for the token (if not set, the token lasts one day) 59 | - `FILTER_DOCUMENT` if you want to apply an additional filter to the chart (e.g. `'{ foo: { $gt: 10 }}'`) 60 | - `AUTOREFRESH_TIME_SECONDS` if you want the chart to automatically refresh at a predetermined interval. Note 61 | that the entire chart must be reloaded with a new token before the validity period expires. 62 | 63 | 5. Open the *index.html* file (client-side code), and replace: 64 | - `~REPLACE~CHART_ID` with the value of the *id* parameter from the IFRAME snippet you copied from Charts 65 | 66 | 6. Run `python server.py` to start the web server. 67 | 68 | 7. You should see the chart embedded within the sample page on [http://localhost:4567](http://localhost:4567). 69 | 70 | Next Steps 71 | ---------- 72 | Once you're ready to embed charts in your own applications, keep the following in mind: 73 | 74 | * Always keep the Embedding Signing Key secure, and never put it inside client code. Anyone who 75 | has this key will be able to embed charts in any application. 76 | 77 | * Always authenticate users and perform any required authorization checks before generating the 78 | signed embedding URLs. The value of this mechanism is that you can restrict who can view the 79 | embedded charts, but this won't work if you give the signed URLs out to anonymous users! 80 | 81 | * Consider what expiration period is appropriate. The signed URLs include a timestamp, which 82 | Charts will compare against the current time, within the tolerance of the specified expiry period. 83 | Depending on the architecture of your application, you may want a very short expiry period 84 | (e.g. if you generate a new signature on every request) or a longer one (if the URL needs to 85 | be cached). 86 | -------------------------------------------------------------------------------- /python/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |If you're getting an error code instead of a chart, click here 25 | to find out what the code means.
26 | 27 | 28 | -------------------------------------------------------------------------------- /python/server.py: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env python 2 | 3 | from http.server import BaseHTTPRequestHandler, HTTPServer 4 | from string import Template 5 | from math import floor 6 | import os 7 | import hmac 8 | import hashlib 9 | import time 10 | import urllib.parse 11 | 12 | # Create custom HTTPRequestHandler class 13 | class EmbeddedChartHTTPRequestHandler(BaseHTTPRequestHandler): 14 | 15 | def get_embedding_url(self, chartId): 16 | # remember, in a real application, you should ensure your user is authenticated and authorized to view the chart before you return the signed URL. 17 | 18 | # replace these constants with the correct values for your Charts instance 19 | CHARTS_EMBEDDING_BASE_URL = '~REPLACE~CHARTS_EMBEDDING_BASE_URL' # Replace with the base URL to your Charts instance, e.g. https://charts.mongodb.com/charts-foo-abcde (no trailing slash) 20 | EMBEDDING_SIGNING_KEY = '~REPLACE~EMBEDDING_SIGNING_KEY' # Replace with the Embedding Signing Key generated by your Charts admin 21 | EXPIRY_TIME_SECONDS = 300 # Set to your preferred expiry period 22 | FILTER_DOCUMENT = None; # Set to a MongoDB Query document if you want to filter the chart, e.g. '{ foo: { $gt: 10 }}' 23 | AUTOREFRESH_TIME_SECONDS = None; # Set to a number >=10 if you want the chart to autorefresh 24 | 25 | timestamp = int(floor(time.time())) 26 | payload = Template('id=$chartId×tamp=$timestamp&expires-in=$expiry').substitute(chartId=chartId, timestamp=timestamp, expiry=EXPIRY_TIME_SECONDS) 27 | if not FILTER_DOCUMENT is None: 28 | payload += '&filter=' + urllib.parse.quote(FILTER_DOCUMENT) 29 | if not AUTOREFRESH_TIME_SECONDS is None: 30 | payload += '&autorefresh=' + str(AUTOREFRESH_TIME_SECONDS) 31 | signature = hmac.new(EMBEDDING_SIGNING_KEY.encode('UTF-8'), msg=payload.encode('UTF-8'), digestmod=hashlib.sha256).hexdigest() 32 | url = Template('$baseUrl/embed/charts?$payload&signature=$signature').substitute(baseUrl=CHARTS_EMBEDDING_BASE_URL, payload=payload, signature=signature) 33 | 34 | return url 35 | 36 | # helper method to return 200 response header 37 | def send_headers(self): 38 | self.send_response(200) 39 | self.send_header('Content-type','text/html') 40 | self.end_headers() 41 | 42 | # handle GET command 43 | def do_GET(self): 44 | # serve embedding signature 45 | if self.path.startswith('/api/embeddedchart/'): 46 | self.send_headers() 47 | chartId = self.path.split('/')[-1] 48 | self.wfile.write(bytes(self.get_embedding_url(chartId), 'UTF-8')) 49 | return 50 | 51 | # serve index.html file 52 | elif self.path == '/': 53 | f = open('./index.html') 54 | self.send_headers() 55 | self.wfile.write(bytes(f.read(), 'UTF-8')) 56 | f.close() 57 | 58 | 59 | 60 | def run(): 61 | server_address = ('127.0.0.1', 4567) 62 | httpd = HTTPServer(server_address, EmbeddedChartHTTPRequestHandler) 63 | print('http server is running at http://127.0.0.1:4567/') 64 | httpd.serve_forever() 65 | 66 | if __name__ == '__main__': 67 | run() 68 | -------------------------------------------------------------------------------- /stitch/README.md: -------------------------------------------------------------------------------- 1 | MongoDB Charts Embedding Example - Verified Signature Auth in Stitch 2 | ==================================================================== 3 | 4 | Background 5 | ---------- 6 | MongoDB Charts allows you to create visualizations of your MongoDB data using a simple web interface. 7 | You can view the visualizations within the Charts UI, or you can use the Embedding feature to render 8 | the charts in an external web application. When you embed a chart, you can choose whether you want 9 | it to be Unauthenticated (meaning anyone who has the embed code can view the chart), or to use 10 | "Verified Signature" authentication (which checks the integrity of a signature in the URL before the 11 | chart will render). 12 | 13 | For the "Unauthenticated" option, you can copy the provided snippet and include it in any web site; 14 | no extra steps are required. 15 | 16 | The Verified Signature option requires a few more steps to implement but it is 17 | more secure — your app will generate the signature on the server side after first authenticating 18 | and authorizing the user, and the URL will stop working after a specified time period. 19 | 20 | This project contains a simple sample app showing how to implement "Verified Signature" authentication 21 | using a MongoDB Stitch app. Samples for other languages and platforms are provided elsewhere in this 22 | repository. 23 | 24 | Preparing your Chart for Embedding 25 | ---------------------------------- 26 | 27 | 1. Log onto MongoDB Charts 28 | 29 | 2. If you haven't done so already, create a chart on any dashboard that you would like to embed. 30 | 31 | 3. Go to the Data Sources tab, find the data source that you are using on the chart, and choose 32 | *Embedding Options* from the *...* menu. Make sure that embedding is enabled for this data source, 33 | using either authentication mode. 34 | 35 | 4. Find the chart you want to embed, click the *...* menu and select Embed Chart. 36 | 37 | 5. Select the *Verified Signature* tab and turn on embedding. 38 | 39 | 6. Copy the IFRAME embed code from this dialog and keep it handy 40 | 41 | 7. Get the Embedding Signing Key from the Admin Settings page. If you are not a Charts Admin you 42 | will need to request this info from someone with this role. 43 | 44 | Running this Sample 45 | ------------------- 46 | 1. Go to https://cloud.mongodb.com, sign in and create a new Stitch app. 47 | 48 | 2. Enable Anonymous Authentication on the Stitch App under *Getting Started*. 49 | 50 | 3. Click *Functions* and then *Create New Function* 51 | 52 | 4. Enter "getEmbeddingUrl" as the function name, leaving all other options as they are. 53 | 54 | 5. Click the *Function Editor" tab, and paste the contents of the `stitch-functions/getEmbeddingUrl.js` file 55 | into the editor. 56 | 57 | 6. Replace the `~REPLACE~` placeholders in the pasted code for the following variables: 58 | - `~REPLACE~CHARTS_EMBEDDING_BASE_URL` with the base URL of your charts instance, e.g. 59 | https://charts.mongodb.com/charts-foo-abcde 60 | - `~REPLACE~EMBEDDING_SIGNING_KEY` with the Embedding Signing key you obtained above 61 | 62 | 7. Optionally, set the following variables in the same file: 63 | - `EXPIRY_TIME_SECONDS` to configure the period of validity for the token (if not set, the token lasts one day) 64 | - `FILTER_DOCUMENT` if you want to apply an additional filter to the chart (e.g. `{ foo: { $gt: 10 }}`) 65 | - `AUTOREFRESH_TIME_SECONDS` if you want the chart to automatically refresh at a predetermined interval. Note 66 | that the entire chart must be reloaded with a new token before the validity period expires. 67 | 68 | 8. Save the Stitch function. 69 | 70 | 9. Open the *index.html* file (client-side code), and replace the `~REPLACE~` placeholders: 71 | - `~REPLACE~STITCH_APP_ID` with the Stitch App ID, shown in the top left of the Stitch console 72 | - `~REPLACE~CHART_ID` with the value of the *id* parameter from the IFRAME snippet you copied from Charts 73 | 74 | 10. Open *index.html* from your local computer in a web browser. (Alternatively you can use the Stitch Hosting 75 | feature to host this file once you have made the above modifications). 76 | 77 | Next Steps 78 | ---------- 79 | Once you're ready to embed charts in your own applications, keep the following in mind: 80 | 81 | * Always keep the Embedding Signing Key secure, and never put it inside client code. Anyone who 82 | has this key will be able to embed charts in any application. 83 | 84 | * Always authenticate users and perform any required authorization checks before generating the 85 | signed embedding URLs. The value of this mechanism is that you can restrict who can view the 86 | embedded charts, but this won't work if you give the signed URLs out to anonymous users! 87 | 88 | * Consider what expiration period is appropriate. The signed URLs include a timestamp, which 89 | Charts will compare against the current time, within the tolerance of the specified expiry period. 90 | Depending on the architecture of your application, you may want a very short expiry period 91 | (e.g. if you generate a new signature on every request) or a longer one (if the URL needs to 92 | be cached). 93 | -------------------------------------------------------------------------------- /stitch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |