Add signature authentication to Transloadit example on the webs… (#1705)

* make it work with signature auth

* website: fix signature calculation in TL example

* website: update year in Transloadit example watermark

website/src/examples/transloadit/app.es6

@@ -5,8 +5,15 @@ const Dashboard = require('@uppy/dashboard')
 const Webcam = require('@uppy/webcam')
 const Transloadit = require('@uppy/transloadit')
 const Instagram = require('@uppy/instagram')
+const { createHmac } = require('crypto')
 
-function initUppy () {
+function sha1 (key, text) {
+  return createHmac('sha1', key)
+    .update(text)
+    .digest('hex')
+}
+
+function initUppy (opts = {}) {
   if (window.uppy) {
     window.uppy.close()
   }
@@ -27,35 +34,56 @@ function initUppy () {
     }
   })
 
+  function getExpiration (future) {
+    return new Date(Date.now() + future)
+      .toISOString()
+      .replace('T', ' ')
+      .replace(/\.\d+Z$/, '+00:00')
+  }
+
+  function getAssemblyOptions () {
+    const hasSecret = opts.secret != null
+    let params = {
+      auth: {
+        key: window.TRANSLOADIT_API_KEY,
+        expires: hasSecret ? getExpiration(5 * 60 * 1000) : undefined
+      },
+      // It's more secure to use a template_id and enable
+      // Signature Authentication
+      steps: {
+        resize: {
+          robot: '/image/resize',
+          width: 250,
+          height: 250,
+          resize_strategy: 'fit',
+          text: [
+            {
+              text: `© ${(new Date).getFullYear()} Transloadit.com`,
+              size: 12,
+              font: 'Ubuntu',
+              color: '#eeeeee',
+              valign: 'bottom',
+              align: 'right',
+              x_offset: 16,
+              y_offset: -10
+            }
+          ]
+        }
+      }
+    }
+
+    let signature
+    if (opts.secret) {
+      params = JSON.stringify(params)
+      signature = sha1(opts.secret, params)
+    }
+
+    return { params, signature }
+  }
+
   uppy
     .use(Transloadit, {
-      params: {
-        auth: {
-          key: window.TRANSLOADIT_API_KEY
-        },
-        // It's more secure to use a template_id and enable
-        // Signature Authentication
-        steps: {
-          resize: {
-            robot: '/image/resize',
-            width: 250,
-            height: 250,
-            resize_strategy: 'fit',
-            text: [
-              {
-                text: '© 2018 Transloadit.com',
-                size: 12,
-                font: 'Ubuntu',
-                color: '#eeeeee',
-                valign: 'bottom',
-                align: 'right',
-                x_offset: 16,
-                y_offset: -10
-              }
-            ]
-          }
-        }
-      },
+      getAssemblyOptions,
       waitForEncoding: true
     })
     .use(Dashboard, {

website/src/examples/transloadit/index.ejs

@@ -27,6 +27,9 @@ This example demonstrates how to unlock Transloadit’s features within Uppy.
      Copy the API Key that you can find on
     <a href="https://transloadit.com/accounts/credentials" rel="noreferrer noopener" target="_blank">this page</a> and paste it below.
   </li>
+  <li>
+    Optionally, copy the secret key and paste it below. This will enable Signature Authentication. Make sure nobody's watching!
+  </li>
   <li>
     Happy encoding &amp; fetching from Instagram :)
   </li>
@@ -42,6 +45,16 @@ This example demonstrates how to unlock Transloadit’s features within Uppy.
          placeholder="Your Transloadit API Key">
 </p>
 
+<p>
+  <label for="transloadit-secret-key"
+         style="display: block; font-size: 13px; text-transform: uppercase; font-weight: bold;">
+    Transloadit secret Key:</label>
+  <input type="text"
+         style="font-size: 15px; width: 300px; max-width: 100%; border: 0; border-bottom: 1px solid black; padding: 6px 8px; margin-bottom: 20px;"
+         id="transloadit-secret-key"
+         placeholder="Your Transloadit secret Key (optional)">
+</p>
+
 <link rel="stylesheet" href="app.css">
 <% include app.html %>
 
@@ -54,22 +67,23 @@ This example demonstrates how to unlock Transloadit’s features within Uppy.
 <script src="app.js"></script>
 <script>
   var apiKeyEl = document.getElementById('transloadit-api-key')
+  var secretKeyEl = document.getElementById('transloadit-secret-key')
   var storedApiKey = localStorage.getItem('uppyTransloaditApiKey')
 
   if (storedApiKey) {
     apiKeyEl.value = storedApiKey
     window.TRANSLOADIT_API_KEY = storedApiKey
-    initUppy()
+    initUppy({ secret: secretKeyEl.value })
   }
 
   function handleInputChange (ev) {
-    var enteredApiKey = ev.target.value
-    window.TRANSLOADIT_API_KEY = enteredApiKey
-    localStorage.setItem('uppyTransloaditApiKey', enteredApiKey)
-    initUppy()
+    window.TRANSLOADIT_API_KEY = apiKeyEl.value
+    localStorage.setItem('uppyTransloaditApiKey', apiKeyEl.value)
+    initUppy({ secret: secretKeyEl.value })
   }
 
   apiKeyEl.addEventListener('input', handleInputChange)
+  secretKeyEl.addEventListener('input', handleInputChange)
 </script>
 
 <hr />