Skip to content

Commit f5edf83

Browse files
andym03kristinamongo
andym03
and
kristinamongo
authored
feat:CHARTS-3580 google sample (#8)
* first draft * fix/CHARTS-3580 Completed sample * Made google example compatible with cloud sandbox, removed server * removed node server * removed empty lines * fix:/CHARTS-3580 toms suggestions * Update examples/authenticated-google/index.html Removed unnecessary return Co-Authored-By: kristinamongo <[email protected]> * fix:CHARTS-3580: Kristinas suggestions, typo and extra suggestion in readme, used const instead of var, cleaned up package.json, removed unnecesary async, added replace comment Co-authored-by: kristinamongo <[email protected]>
1 parent a294a91 commit f5edf83

File tree

5 files changed

+316
-0
lines changed

5 files changed

+316
-0
lines changed

‎examples/authenticated-google/assets/styles.css‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
#chart {
2+
border-top: none;
3+
background-color: #f9fbfa;
4+
flex-grow: 1;
5+
height: 100%;
6+
box-shadow: grey 0px 0px 10px 1px;
7+
visibility: hidden;
8+
}
9+
10+
.chart-container {
11+
height: 50vh;
12+
width: 80vw;
13+
margin: auto;
14+
text-align: center;
15+
}
16+
17+
body.logged-in #login-page {
18+
visibility: hidden;
19+
height: 0;
20+
width: 0;
21+
}
22+
23+
body.logged-in #lock::before {
24+
content: "🔐";
25+
}
26+
27+
body #lock::before {
28+
content: "🔒";
29+
}
30+
31+
body.logged-in #chart {
32+
visibility: visible;
33+
}
34+
35+
.hideLogin {
36+
visibility: hidden;
37+
height: 0;
38+
width: 0;
39+
}
40+
41+
.main {
42+
box-sizing: border-box;
43+
padding: 1rem;
44+
height: 100%;
45+
display: flex;
46+
flex-direction: column;
47+
}
48+
49+
.login-page {
50+
width: 360px;
51+
margin: auto;
52+
}
53+
54+
.form-title {
55+
margin-top:0;
56+
padding-top:0;
57+
margin-bottom: 50px;
58+
}
59+
60+
.form {
61+
position: relative;
62+
z-index: 1;
63+
background: #ffffff;
64+
max-width: 360px;
65+
margin: 0 auto 100px;
66+
padding: 45px;
67+
text-align: center;
68+
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
69+
}
70+
.form input {
71+
font-family: "Helvetica", sans-serif;
72+
outline: 0;
73+
background: #f2f2f2;
74+
width: 100%;
75+
border: 0;
76+
margin: 0 0 15px;
77+
padding: 15px;
78+
box-sizing: border-box;
79+
font-size: 14px;
80+
}
81+
82+
#logoutButton {
83+
margin-top: 50px;
84+
width: 200px;
85+
}
86+
87+
button {
88+
font-family: "Helvetica", sans-serif;
89+
text-transform: uppercase;
90+
outline: 0;
91+
background: #13aa52;
92+
width: 100%;
93+
border: 0;
94+
padding: 15px;
95+
color: #ffffff;
96+
font-size: 14px;
97+
-webkit-transition: all 0.3 ease;
98+
transition: all 0.3 ease;
99+
cursor: pointer;
100+
}
101+
.form button:hover,
102+
.form button:active,
103+
.form button:focus {
104+
background: #109246;
105+
}
106+
.form .message {
107+
margin: 15px 0 0;
108+
color: #b3b3b3;
109+
font-size: 12px;
110+
}
111+
.form .message a {
112+
color: #13aa52;
113+
text-decoration: none;
114+
}
115+
116+
.input-title {
117+
font-size: 14px;
118+
text-align: left;
119+
margin-bottom: 5px;
120+
margin-top:10px;
121+
}
122+
123+
body {
124+
background: #e7eeec;
125+
font-family: "Helvetica", sans-serif;
126+
-webkit-font-smoothing: antialiased;
127+
-moz-osx-font-smoothing: grayscale;
128+
text-align: center;
129+
}
130+
131+
h1 {
132+
padding: 8% 0 0;
133+
}
134+
135+
.googleButton {
136+
margin-left: auto;
137+
margin-right: auto;
138+
display: inline-block;
139+
}

‎examples/authenticated-google/index.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Charts Embedded SDK - Authenticated Embedded Chart Demo</title>
5+
<meta charset="UTF-8" />
6+
<link rel="stylesheet" type="text/css" href="assets/styles.css" />
7+
<link
8+
rel="stylesheet"
9+
type="text/css"
10+
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
11+
/>
12+
<script src="https://apis.google.com/js/platform.js" async defer></script>
13+
<script src="https://unpkg.com/@mongodb-js/charts-embed-dom@beta"></script>
14+
15+
<!-- Optional: ~REPLACE~ content with your Google Client ID -->
16+
<meta
17+
name="google-signin-client_id"
18+
content="569596223089-pf55ivsj1mg4ncks7p8abg0ejpmu5qr0.apps.googleusercontent.com"
19+
/>
20+
</head>
21+
22+
<body>
23+
<script>
24+
function onSignIn(googleUser) {
25+
const id_token = googleUser.getAuthResponse().id_token;
26+
const ChartsEmbedSDK = window.ChartsEmbedSDK;
27+
28+
console.log("ID TOKEN == " + id_token);
29+
const sdk = new ChartsEmbedSDK({
30+
baseUrl: "https://charts-dev.mongodb.com/charts-test2-pebbp", // Optional: ~REPLACE~ with your Charts URL
31+
getUserToken: () => id_token
32+
});
33+
34+
const chart = sdk.createChart({
35+
chartId: "0d984f0c-5f1b-4711-9e5d-f78aa1ea8fcb", // Optional: ~REPLACE~ with your Chart ID
36+
});
37+
38+
document.body.classList.toggle("logged-in", true)
39+
chart.render(document.getElementById("chart"));
40+
41+
}
42+
</script>
43+
<script type="text/javascript" src="src/index.js"></script>
44+
<main>
45+
<h1 id="lock"></h1>
46+
<div id="login-page" class="login-page">
47+
<div class="form">
48+
<div class="login-form">
49+
<h1 class="form-title">Secure Chart Viewer</h1>
50+
<div class="g-signin2 googleButton" data-onsuccess="onSignIn"></div>
51+
</div>
52+
</div>
53+
</div>
54+
<div class="chart-container">
55+
<div id="chart"></div>
56+
</div>
57+
</main>
58+
</body>
59+
</html>

‎examples/authenticated-google/package.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "mongodb-charts-embedded-sdk-authenticated-demo",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.html",
6+
"scripts": {
7+
"start": "parcel index.html --port 3000 --open",
8+
"build": "parcel build index.html"
9+
},
10+
"dependencies": {
11+
"parcel": "^1.12.4",
12+
"regenerator-runtime": "^0.13.5"
13+
},
14+
"devDependencies": {
15+
"@babel/core": "^7.8.6",
16+
"@babel/preset-env": "^7.8.6",
17+
"parcel-bundler": "^1.6.1"
18+
}
19+
}

‎examples/authenticated-google/readme.md‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
# MongoDB Charts Embedding Example - Google Authentication
2+
3+
## Background
4+
5+
📄 _[See the MongoDB Charts Embedding Docs for more details](https://docs.mongodb.com/charts/saas/embedding-charts/)_
6+
7+
🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/authenticated-google)_
8+
9+
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.
10+
11+
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).
12+
13+
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.
14+
15+
#### The features included in this demo are as follows:
16+
17+
- 📈 Render an embedded chart on a web page
18+
- 🔒 Only render charts to valid users
19+
- 𝗚 Google authentication
20+
21+
## Quickstart
22+
_The following steps presume the use of npm, though yarn works as well._
23+
24+
1. Ensure you have Node installed. You can confirm with `node --version`. On some operating systems, Node is available as the `nodejs` binary instead.
25+
26+
2. Clone the Git repository or download the code to your computer.
27+
28+
3. Run `npm install` to install the package dependencies.
29+
30+
4. Run `npm start` to start the application. This will utilise parcel.js
31+
- Optional Parcel.js documentation https://parceljs.org/ for more information on what this is
32+
33+
This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:3000` in the url bar to see the sample. Use Incognito mode to see the full Google login flow rather then signing in with your Chrome Google account.
34+
35+
Logging in with any valid Google account will allow you to render the chart.
36+
37+
## Getting a Google Client ID
38+
39+
This sample is pre-configured with a MongoDB-owned test Client ID. To use Google Sign-In in your own apps, you must create your own Client ID.
40+
41+
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.
42+
43+
### Preparing your Chart for Embedding
44+
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:
45+
1. Log onto MongoDB Charts
46+
47+
2. If you haven't done so already, create a chart you would like to embed on any dashboard.
48+
49+
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**'
50+
51+
4. Go to the Admin Settings tab on the left navigation column. Under 'Embedding Authentication Providers', click 'Add New Provider'.
52+
53+
- Name your Provider e.g `Google`
54+
- Select the Google Provider.
55+
- Enter your Google Client ID
56+
- This should be the entire string `<encodedData>.apps.googleusercontent.com`
57+
58+
59+
5. Go to the Dashboards tab on the left navigation column, and select the dashboard that contains the chart you wish to embed.
60+
61+
6. Find the chart you want to embed, click the **...** menu and select **Embed Chart**
62+
63+
7. Ensure the Unauthenticated tab is selected and turn on '**Enable Authenticated access**'
64+
65+
8. Note the Chart ID and the Chart Base URL, as you will need them for running the demo.
66+
67+
68+
## Running this Sample with your data
69+
70+
If you do not wish to use our sample data and have completed the above steps to prepare your own chart for embedding,
71+
- Open the `index.html` file
72+
- Replace the Charts `baseUrl` string with the base URL you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments)
73+
- Replace the `chartId` string with the chart ID you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments)
74+
- **Optional**
75+
- Replace the `<meta content="YourClientIDHere">` with your own Google Client ID. (look for "\~REPLACE\~" in the comments)
76+
77+
## Next Steps
78+
79+
Once you gain an understanding of the API, consider the following
80+
81+
- Take on the optional steps to prepare and manipulate your own data source rather than the sample.
82+
- Use Incognito Mode to see a pure login experience
83+
- Consider how you want to secure your data with the Google Embedding Provider. Anybody can create a Google account. Consider using Charts Injected Filters to make your application more secure.
84+
- For example, consider the following injected filter
85+
-
86+
```javascript
87+
// Reject tokens that aren't from example.com domain
88+
if (context.token.hd != 'yourCompany.com') {
89+
return false;
90+
}
91+
return true
92+
```
93+
- ![Screen Shot 2020-04-21 at 1 47 54 pm](https://user-images.githubusercontent.com/19422770/79823279-b9b35880-83d6-11ea-8370-774bcde80252.png)
94+
- This will only allow users from your company domain to view the chart data 🔒
95+
96+
- Think whether an authenticated chart is the feature you're after. If you're simply looking for a way to show off your data, unauthenticated embedding simplifies the workflow even further.
97+
98+
Happy Charting! 🚀📈

‎examples/authenticated-google/src/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import "regenerator-runtime/runtime";

0 commit comments

Comments
 (0)