Merge pull request #60 from metabase/update-dependencies

Update dependencies and change the documentation

Author: dragonsahead

README.md

@@ -16,27 +16,19 @@ If you'd like to remove the "Powered by Metabase" attribution, check out our [En
 
 ## Prerequisites
 
-- Java version 8.x or 11.x. [Install OpenJDK](https://openjdk.java.net/install/).
+- Java version 11 + [Install OpenJDK](https://openjdk.java.net/install/).
 
 ## Set up Metabase
 
 We'll first need to set up a running instance of Metabase to serve the embedded dashboards.
 
-1. If you already have an instance of Metabase running on your machine, shut it down. 
+1. If you already have an instance of Metabase running on your machine, shut it down. Then download and run Metabase according to the guides in our [install section](https://www.metabase.com/docs/latest/operations-guide/installing-metabase.html).
 
 2. Open up a terminal and clone this repo to your machine.
 
 3. `cd` into embedding-reference-apps.
 
-3. Run the the prepare script.
-
-```shell
-./prepare.sh
-```
-
-The prepare.sh script downloads the latest version of Metabase to this repository's [metabase](/metabase) directory, changes into that directory, and runs the jar:`java -jar metabase.jar`.
-
-Metabase will log its progress in the terminal as the jar runs. Once you see the line, "Metabase Inititalization COMPLETE", open your browser to [localhost:3000](http://localhost:3000) to see that Metabase is up and running. 
+3. Run any example depending on the programming language you choose.
 
 ## Running the apps
 

laravel/embedded_analytics/package.json

@@ -10,12 +10,12 @@
     "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
   },
   "devDependencies": {
-    "axios": "^0.19",
+    "axios": "^0.21.1",
     "bootstrap-sass": "^3.4.1",
-    "cross-env": "^7.0",
-    "jquery": "^3.5.0",
-    "laravel-mix": "^5.0.1",
-    "lodash": "^4.17.13",
-    "vue": "^2.1.10"
+    "cross-env": "^7.0.3",
+    "jquery": "^3.6.0",
+    "laravel-mix": "^6.0.18",
+    "lodash": "^4.17.21",
+    "vue": "^2.6.12"
   }
 }

laravel/embedded_analytics/yarn.lock

@@ -4,7 +4,7 @@ This Node application demonstrates a simple, barebones Metabase dashboard embedd
 
 ## Prerequisites
 
-- **Metabase**. You should have already completed the setup detailed in the [README](../README.md) for this repository, which shows you how to get an instance of Metabase up and running in the [metabase](../metabase) directory of this repository.
+- **Metabase**. You should have already completed the setup detailed in the [README](../README.md) for this repository, which shows you how to get an instance of Metabase up and running in the [metabase](../metabase) directory of this repository. You have to also configure Metabase for [public sharing](https://www.metabase.com/docs/latest/administration-guide/12-public-links.html) or [embedding](https://www.metabase.com/docs/latest/administration-guide/13-embedding.html).
 
 - **Node**. You'll need [Node](https://nodejs.org/en/) installed on your machine to run the application.
 
@@ -16,13 +16,13 @@ This Node application demonstrates a simple, barebones Metabase dashboard embedd
 
 2. Run `yarn install` to install the application's dependencies.
 
-3. Once the application dependencies are installed, run:
+3. Once the application dependencies are installed, run `yarn start` or:
 
 ```shell
 node index.js
 ```
 
-4. Open your browser to [localhost:3001](http://localhost:3001).
+4. Open your browser to [localhost:3001](http://localhost:3001) (or the port where this application is running).
 
 Explore the app to learn more about embedding Metabase charts and dashboards in applications. You can also check out the links to more documentation in the parent repository's main [README](../README.md).
 

metabase/metabase.db.mv.db

@@ -1,13 +1,12 @@
 const express = require("express");
 const session = require("express-session");
-const bodyParser = require("body-parser");
 const jwt = require("jsonwebtoken");
 
 const PORT = process.env["PORT"] ? parseInt(process.env["PORT"]) : 3001;
 
 // these should match the settings in your Metabase instance
 let MB_SITE_URL = "http://localhost:3000";
-let MB_EMBEDDING_SECRET_KEY = "a1c0952f3ff361f1e7dd8433a0a50689a004317a198ecb0a67ba90c73c27a958";
+let MB_EMBEDDING_SECRET_KEY = "c39fcfd02abd76b0ad200d1eada354f136c383638dcfc189253b9b8e0dd13e46";
 
 function checkAuth(req, res, next) {
     const userId = req.session.userId;
@@ -32,7 +31,7 @@ const app = express();
 
 app.set("view engine", "pug");
 app.use(session({ secret: "FIXME", resave: false, saveUninitialized: true }));
-app.use(bodyParser.urlencoded({ extended: false }));
+app.use(express.urlencoded({ extended: false }));
 
 app.get("/", (req, res) => res.render("index"));
 
@@ -89,6 +88,20 @@ app.get("/signed_dashboard/:id", checkAuth, (req, res) => {
     res.render("dashboard", { userId: req.params.id, iframeUrl: iframeUrl });
 })
 
+app.get("/signed_public_dashboard/", (req, res) => {
+  const userId = req.session.userId;
+  const unsignedToken = {
+      resource: { dashboard: 1 },
+      params: { },
+      exp: Math.round(Date.now() / 1000) + (10 * 60) // 10 minute expiration
+  };
+  // sign the JWT token with our secret key
+  const signedToken = jwt.sign(unsignedToken, MB_EMBEDDING_SECRET_KEY);
+  // construct the URL of the iframe to be displayed
+  const iframeUrl = `${MB_SITE_URL}/embed/dashboard/${signedToken}`;
+  res.render("public_dashboard", { iframeUrl: iframeUrl });
+})
+
 app.listen(PORT, () => {
   console.log("Example app listening on port " + PORT + "!");
 });

metabase/metabase.db.trace.db

@@ -3,11 +3,10 @@
   "version": "1.0.0",
   "main": "index.js",
   "dependencies": {
-    "body-parser": "^1.19.0",
     "express": "^4.17.1",
     "express-session": "^1.17.1",
     "jsonwebtoken": "^8.5.1",
-    "pug": "^2.0.4"
+    "pug": "^3.0.2"
   },
   "scripts": {
     "start": "node index.js"

node/README.md

@@ -0,0 +1,45 @@
+extends layout.pug
+
+block content
+    h1 Signed dashboards without parameters</h1>
+
+    p
+        This is an example of a signed embedded dashboard. We haven't signed any parameters, but we have signed the resource id (in this case dashboard 1). This is means that only application with the signing key are allowed to embed a Metabase resource (vs the public link which can be copy/pasted and shared). Signed embeds can also be set to have an expiration time, which further improves security.
+
+    p
+        To embed this dasbhoard in a webpage (as below), you'll need to generate a url on the server by signing a dictionary specifying the resource and it's signed parameters as below
+
+
+    pre.
+        payload = {
+            "resource": {"dashboard": 1},
+            "params": { }
+        }
+
+        token = jwt.encode(payload, METABASE_SECRET_KEY, algorithm="HS256").decode('utf8')
+
+        iframeUrl = METABASE_SITE_URL + "/embed/dashboard/" + token + "#bordered=true"
+        
+    p In the place you wish to embed the chart in your HTML, insert the below:	
+
+    pre.
+        &lt;iframe
+            src="http://{% templatetag openvariable %}iframeUrl{% templatetag closevariable %}"
+            frameborder="0"
+            width="800"
+            height="600"
+            allowtransparency
+        &gt;&lt;/iframe&gt;
+
+    a(href="/") Go back to a global view
+
+    p This results in the below when put together
+
+    h2 Global Order Stats
+
+    iframe(src=iframeUrl
+            width="1200" 
+            height="800" 
+            frameborder="0")
+
+