Merge branch 'master' of github.com:metabase/embedding-reference-apps

metabase · Mar 13, 2017 · 964401d · 964401d
2 parents 0787759 + 79c0dc5
commit 964401d
Show file tree

Hide file tree

Showing 8 changed files with 156 additions and 13 deletions.
diff --git a/django/embedded_analytics/db.sqlite3 b/django/embedded_analytics/db.sqlite3
diff --git a/django/embedded_analytics/user_stats/templates/user_stats/index.html b/django/embedded_analytics/user_stats/templates/user_stats/index.html
@@ -2,7 +2,7 @@
 
 {% block content %}
     <article>
-        <p>By embedding Metabase, you can use Metabase charts and Dashboards that any user can look at. You have two choices depending on the degree of security you need in your application.</p>
+        <p>By embedding Metabase, you can use Metabase charts and Dashboards within your application. You have two choices depending on the degree of security you need in your application.</p>
 
         <nav>
             <a href="#public">Public embeds</a>
@@ -18,7 +18,7 @@ <h2>Public Embeds</h2>
             </p>
 
             <iframe
-                                                                                                                             src="http://localhost:3000/public/dashboard/be1e6baa-9b97-4534-8ac0-4a45b5bbf4e1"
+			   src="http://localhost:3000/public/dashboard/be1e6baa-9b97-4534-8ac0-4a45b5bbf4e1"
                frameborder="0"
                width="800"
                height="600"
@@ -54,8 +54,7 @@ <h2>Signed Embedding</h2>
             <p>
                 We can also embed signed dashboards that are not limited to a single user. The below is a dashboard that can only be displayed if the embedding application signs the url with our secret key and can only be used in that application. 
             </p>
-            <h2>All Orders</h2>
-            <iframe src="http://{{iframeUrl}}" width="1200" height="800" frameborder="0"></iframe>
+            <a href="/signed_public_dashboard">An example of a public signed dashboard</a>
         </section>
     </article>
 {% endblock %}
diff --git a/django/embedded_analytics/user_stats/templates/user_stats/signed_chart.html b/django/embedded_analytics/user_stats/templates/user_stats/signed_chart.html
@@ -1,5 +1,5 @@
 
-{% extends "base.html" %}
+{% extends "user_stats/base.html" %}
 
 
 {% block content %}
@@ -11,16 +11,54 @@ <h1>Embedding charts with signed parameters</h1>
 <p>
 	The parameter is "User ID". This parameter marked as "Locked". This means that the embedding application's server process must specify a value and sign the request. This prevents an end user of the application from changing the url and seeing other user's charts or dashboards. There is no reference to this ID in the embedded iframe, and it is kept a secret from the end user. 
 </p>
+
+<p>
+	To embed this graph 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
+
+</p>
+
+<pre>
+    payload = {
+        "resource": {"question": 6},
+        "params": {
+            "user_id": user_id
+        }
+    }
+
+    token = jwt.encode(payload, METABASE_SECRET_KEY, algorithm="HS256")
+
+    iframeUrl = METABASE_SITE_URL + "/embed/question/" + token + "#bordered=true"
+</pre>
+<p>
+	In the place you wish to embed the chart in your HTML, insert the below:	
+</p>
+
+<pre>
+<code>
+
+
+&lt;iframe
+    src="http://{% templatetag openvariable %}iframeUrl{% templatetag closevariable %}"
+    frameborder="0"
+    width="800"
+    height="600"
+    allowtransparency
+/&gt;&lt;/iframe&gt;
+</code>	
+</pre>
+
 <a href="/">Go back to a global view</a>
 <hr>
-
+<p>
+	This results in the below when put together
+</p>
 <h1>Orders for User: {{user_id}}</h1>
 <iframe
     src="http://{{iframeUrl}}"
     frameborder="0"
     width="800"
     height="600"
     allowtransparency
-/>
+/></iframe>
 {% endblock %}
 
diff --git a/django/embedded_analytics/user_stats/templates/user_stats/signed_dashboard.html b/django/embedded_analytics/user_stats/templates/user_stats/signed_dashboard.html
@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "user_stats/base.html" %}
 
 
 {% block content %}
@@ -13,11 +13,53 @@ <h1>Embedding dashboards with signed parameters</h1>
 <p>
 	The second parameter is "User ID". This parameter marked as "Locked". This means that the embedding application's server process must specify a value and sign the request. This prevents an end user of the application from changing the url and seeing other user's charts or dashboards. There is no reference to this ID in the embedded iframe, and it is kept a secret from the end user. 
 </p>
+
+<p>
+	To embed this graph 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
+
+</p>
+
+<pre>
+    payload = {
+        "resource": {"dashboard": 2},
+        "params": {
+            "id": user_id
+        }
+    }
+
+    token = jwt.encode(payload, METABASE_SECRET_KEY, algorithm="HS256")
+
+    iframeUrl = METABASE_SITE_URL + "/embed/dashboard/" + token + "#bordered=true"
+</pre>
+<p>
+	In the place you wish to embed the chart in your HTML, insert the below:	
+</p>
+
+<pre>
+<code>
+
+
+&lt;iframe
+    src="http://{% templatetag openvariable %}iframeUrl{% templatetag closevariable %}"
+    frameborder="0"
+    width="800"
+    height="600"
+    allowtransparency
+/&gt;&lt;/iframe&gt;
+</code>	
+</pre>
+
 <a href="/">Go back to a global view</a>
 <hr>
+<p>
+	This results in the below when put together
+</p>
 
 <h1>Stats for User: {{user_id}}</h1>
-<iframe src="http://{{iframeUrl}}" width="1200" height="800" frameborder="0" />
+<iframe src="http://{{iframeUrl}}" 
+		width="1200" 
+		height="800" 
+		frameborder="0" />
 
 {% endblock %}
 

diff --git a/django/embedded_analytics/user_stats/templates/user_stats/signed_public_dashboard.html b/django/embedded_analytics/user_stats/templates/user_stats/signed_public_dashboard.html
@@ -0,0 +1,55 @@
+{% extends "user_stats/base.html" %}
+
+
+{% block content %}
+<hr>
+<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>
+<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
+</p>
+<pre>
+    payload = {
+        "resource": {"dashboard": 1},
+        "params": {
+        }
+    }
+
+    token = jwt.encode(payload, METABASE_SECRET_KEY, algorithm="HS256")
+
+    iframeUrl = METABASE_SITE_URL + "/embed/dashboard/" + token + "#bordered=true"
+</pre>
+<p>
+	In the place you wish to embed the chart in your HTML, insert the below:	
+</p>
+
+<pre>
+<code>
+
+
+&lt;iframe
+    src="http://{% templatetag openvariable %}iframeUrl{% templatetag closevariable %}"
+    frameborder="0"
+    width="800"
+    height="600"
+    allowtransparency
+/&gt;&lt;/iframe&gt;
+</code>	
+</pre>
+
+<a href="/">Go back to a global view</a>
+<hr>
+<p>
+	This results in the below when put together
+</p>
+<h1>Global Order Stats</h1>
+            <iframe src="http://{{iframeUrl}}" 
+            		width="1200" 
+            		height="800" 
+            		frameborder="0">        			
+    		</iframe>
+{% endblock %}
+
+
diff --git a/django/embedded_analytics/user_stats/urls.py b/django/embedded_analytics/user_stats/urls.py
@@ -5,5 +5,6 @@
 urlpatterns = [
 	url(r'^signed_chart/(?P<user_id>[0-9]+)/$', views.signed_chart, name='signed_chart'),
 	url(r'^signed_dashboard/(?P<user_id>[0-9]+)/$', views.signed_dashboard, name='signed_dashboard'),
+	url(r'^signed_public_dashboard/$', views.signed_public_dashboard, name='signed_public_dashboard'),
     url(r'^$', views.index, name='index'),
 ]
diff --git a/django/embedded_analytics/user_stats/views.py b/django/embedded_analytics/user_stats/views.py
@@ -1,13 +1,20 @@
 from django.http import HttpResponse
 from django.shortcuts import render
 import jwt
+from django.contrib.auth.decorators import login_required
+
 
 METABASE_SITE_URL = "localhost:3000"
 METABASE_SECRET_KEY = "f8a86a48501150b3561e5cd3ff07865f6b400ecceca58882cdd4adfa07f2c488"
 
 
 
 def index(request):
+    return render(request,
+                  'user_stats/index.html',
+                  {})
+
+def signed_public_dashboard(request):
     payload = {
         "resource": {"dashboard": 1},
         "params": {
@@ -19,10 +26,9 @@ def index(request):
     iframeUrl = METABASE_SITE_URL + "/embed/dashboard/" + token + "#bordered=true"
 
     return render(request,
-                  'user_stats/index.html',
+                  'user_stats/signed_public_dashboard.html',
                   {'iframeUrl': iframeUrl})
-
-
+@login_required
 def signed_chart(request, user_id):
     payload = {
         "resource": {"question": 6},
@@ -47,7 +53,7 @@ def signed_chart(request, user_id):
     else:
         return HttpResponse("You're not allowed to look at user %s." % user_id)
 
-
+@login_required
 def signed_dashboard(request, user_id):
     payload = {
         "resource": {"dashboard": 2},
@@ -71,3 +77,5 @@ def signed_dashboard(request, user_id):
                       {'iframeUrl': iframeUrl})
     else:
         return HttpResponse("You're not allowed to look at user %s." % user_id)
+
+
diff --git a/metabase/metabase.db.mv.db b/metabase/metabase.db.mv.db