Initial commit for the workspace app update

Author: girliemac

.env.sample

@@ -1,3 +1,2 @@
-SLACK_ACCESS_TOKEN=''
-PORT=3000
-SLACK_VERIFICATION_TOKEN=''
+SLACK_ACCESS_TOKEN=
+SIGNING_SECRET=

.gitignore

@@ -0,0 +1,19 @@
+node_modules
+npm-debug.log
+package-lock.json
+test
+temp*
+
+.env
+
+### https://raw.github.com/github/gitignore/b304edf487ce607174e188712225b5269d43f279/Global/OSX.gitignore
+
+.DS_Store
+.AppleDouble
+.LSOverride
+
+### IDE Settings (EditorConfig/Sublime)
+.editorconfig
+
+### IDE Settings (VSCode)
+.vscode

DIFF.md

@@ -0,0 +1,39 @@
+#Updates from the previous version
+
+Now all the Blueprints examples have updated using workspace token model from the previous user-centric model. So what are the diffs in this version?
+
+## Creating the app
+
+Instead of using the previous App creation page, the new app is creates one at [https://api.slack.com/apps?new_app_token=1](https://api.slack.com/apps?new_app_token=1).
+
+## Scopes
+
+Some scopes are no longer valid with the new workspace apps.
+
+In previous version, the app required:
+* `commands`
+* `users:read`
+* `users:read.email`
+* `chat:write:bot`
+
+In the new version:
+* `commands`
+* `users:read`
+* `users:read.email`
+* `chat:write`
+
+You can learn more about scopes at [https://api.slack.com/scopes](https://api.slack.com/scopes)
+
+## Installation
+
+When you install the app, you will be ask to choose which channel(s) to install it. Once you install, on your Slack client, you see a message that tells you the app was adding to certain channel(s). Also the app name appears under "Apps". This is your `app_home`.
+
+## OAuth
+
+Your OAuth access token should begins with `-xoxa`, instead of `-xoxp`.
+
+## Sigining secret
+
+You used to verify if a request was coming from a reliable source (well, from us Slack!) by checking with the legacy *verificatin token*. Now you have more secure [sigining secret](https://api.slack.com/docs/verifying-requests-from-slack).
+
+Basically, you need to compare the value of the `X-Slack-Signature`, the HMAC-SHA256 keyed hash of the raw request payload, with a hashed string containing your Slack signin secret code, combined with the version and `X-Slack-Request-Timestamp`. 

README.md

@@ -1,5 +1,9 @@
 # Slash Command and Dialogs blueprint
 
+*Updated August 2018: As we have introduced the workspace app (currently in beta), this tutorial and the code samples have been updated using the new token model! All the changes from the previous version of this example, read the [DIFF.md](diff.md)*
+
+*Learn more about the workspace app at the [Slack API doc(https://api.slack.com/workspace-apps-preview).]*
+
 ## Creating a helpdesk ticket using a Slash Command and a Dialog
 
 Use a slash command and a dialog to create a helpdesk ticket in a 3rd-party system. Once it has been created, send a message to the user with information about their ticket.
@@ -10,25 +14,15 @@ Use a slash command and a dialog to create a helpdesk ticket in a 3rd-party syst
 
 #### Create a Slack app
 
-1. Create an app at api.slack.com/apps
-1. Navigate to the OAuth & Permissions page and add the following scopes:
+1. Create a *workspace app* at [https://api.slack.com/apps?new_app_token=1](https://api.slack.com/apps?new_app_token=1)
+2. Add a Slash command (See *Add a Slash Command* section below)
+3. Enable Interactive components (See *Enable Interactive Components* below)
+4. Navigate to the **OAuth & Permissions** page and add the following scopes:
     * `commands`
     * `users:read`
     * `users:read.email`
-    * `chat:write:bot`
-1. Click 'Save Changes' and install the app
-
-#### Run locally or [![Remix on Glitch](https://cdn.glitch.com/2703baf2-b643-4da7-ab91-7ee2a2d00b5b%2Fremix-button.svg)](https://glitch.com/edit/#!/remix/slack-slash-command-and-dialogs-blueprint)
-1. Get the code
-    * Either clone this repo and run `npm install`
-    * Or visit https://glitch.com/edit/#!/remix/slack-slash-command-and-dialogs-blueprint
-1. Set the following environment variables to `.env` (see `.env.sample`):
-    * `SLACK_ACCESS_TOKEN`: Your app's `xoxp-` token (available on the Install App page)
-    * `PORT`: The port that you want to run the web server on
-    * `SLACK_VERIFICATION_TOKEN`: Your app's Verification Token (available on the Basic Information page)
-1. If you're running the app locally:
-    1. Start the app (`npm start`)
-    1. In another window, start ngrok on the same port as your webserver (`ngrok http $PORT`)
+    * `chat:write`
+5. Click 'Save Changes' and install the app (You should get an OAuth access token after the installation)
 
 #### Add a Slash Command
 1. Go back to the app settings and click on Slash Commands.
@@ -41,4 +35,13 @@ Use a slash command and a dialog to create a helpdesk ticket in a 3rd-party syst
 
 #### Enable Interactive Components
 1. Go back to the app settings and click on Interactive Components.
-1. Set the Request URL to your ngrok or Glitch URL + /interactive-component
+1. Set the Request URL to your server or Glitch URL + /interactive-component
+
+#### Run the app locally or [![Remix on Glitch](https://cdn.glitch.com/2703baf2-b643-4da7-ab91-7ee2a2d00b5b%2Fremix-button.svg)](https://glitch.com/edit/#!/remix/slack-slash-command-and-dialogs-blueprint)
+1. Get the code
+    * Either clone this repo and run `npm install`
+    * Or visit https://glitch.com/edit/#!/remix/slack-slash-command-and-dialogs-blueprint
+2. Set the following environment variables to `.env` (see `.env.sample`):
+    * `SLACK_ACCESS_TOKEN`: Your app's `xoxa-` token (available on the Install App page)
+    * `SLACK_SIGNING_SECRET`: Your app's Signing Secret (available on the **Basic Information** page)
+3. If you're running the app locally, run the app (`npm start`)

package-lock.json

@@ -7,7 +7,7 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "start": "DEBUG=slash-command-template node src/index.js"
   },
-  "author": "Sachin Ranchod <sranchod@slack-corp.com>",
+  "author": "Sachin Ranchod <sranchod@slack-corp.com> and Tomomi Imura <timura@slack-corp.com>",
   "engines": {
     "node": ">=4.2.0",
     "npm": ">=2.14.7"

package.json

@@ -5,15 +5,27 @@ const express = require('express');
 const bodyParser = require('body-parser');
 const qs = require('querystring');
 const ticket = require('./ticket');
+const signature = require('./verifySignature');
 const debug = require('debug')('slash-command-template:index');
 
+const apiUrl = 'https://slack.com/api';
+
 const app = express();
 
 /*
  * Parse application/x-www-form-urlencoded && application/json
+ * Use body-parser's `verify` callback to export a parsed raw body
+ * that you need to use to verify the signature
  */
-app.use(bodyParser.urlencoded({ extended: true }));
-app.use(bodyParser.json());
+
+const rawBodyBuffer = (req, res, buf, encoding) => {
+  if (buf && buf.length) {
+    req.rawBody = buf.toString(encoding || 'utf8');
+  }
+};
+
+app.use(bodyParser.urlencoded({verify: rawBodyBuffer, extended: true }));
+app.use(bodyParser.json({ verify: rawBodyBuffer }));
 
 app.get('/', (req, res) => {
   res.send('<h2>The Slash Command and Dialog app is running</h2> <p>Follow the' +
@@ -27,10 +39,10 @@ app.get('/', (req, res) => {
 app.post('/commands', (req, res) => {
   // extract the verification token, slash command text,
   // and trigger ID from payload
-  const { token, text, trigger_id } = req.body;
+  const { text, trigger_id } = req.body;
 
   // check that the verification token matches expected value
-  if (token === process.env.SLACK_VERIFICATION_TOKEN) {
+  if (signature.isVerified(req)) {
     // create the dialog payload - includes the dialog structure, Slack API token,
     // and trigger ID
     const dialog = {
@@ -69,17 +81,18 @@ app.post('/commands', (req, res) => {
     };
 
     // open the dialog by calling dialogs.open method and sending the payload
-    axios.post('https://slack.com/api/dialog.open', qs.stringify(dialog))
+    axios.post(`${apiUrl}/dialog.open`, qs.stringify(dialog))
       .then((result) => {
         debug('dialog.open: %o', result.data);
+        console.log(result.data)
         res.send('');
       }).catch((err) => {
         debug('dialog.open call failed: %o', err);
         res.sendStatus(500);
       });
   } else {
     debug('Verification token mismatch');
-    res.sendStatus(500);
+    res.sendStatus(403);
   }
 });
 
@@ -91,7 +104,7 @@ app.post('/interactive-component', (req, res) => {
   const body = JSON.parse(req.body.payload);
 
   // check that the verification token matches expected value
-  if (body.token === process.env.SLACK_VERIFICATION_TOKEN) {
+  if (signature.isVerified(req)) {
     debug(`Form submission received: ${body.submission.trigger_id}`);
 
     // immediately respond with a empty 200 response to let
@@ -102,10 +115,10 @@ app.post('/interactive-component', (req, res) => {
     ticket.create(body.user.id, body.submission);
   } else {
     debug('Token mismatch');
-    res.sendStatus(500);
+    res.sendStatus(403);
   }
 });
 
-app.listen(process.env.PORT, () => {
-  console.log(`App listening on port ${process.env.PORT}!`);
+const server = app.listen(process.env.PORT || 5000, () => {
+  console.log('Express server listening on port %d in %s mode', server.address().port, app.settings.env);
 });

src/index.js

@@ -0,0 +1,20 @@
+const crypto = require('crypto');
+
+const isVerified = (req) => {
+  const signature = req.headers['x-slack-signature'];
+  const timestamp = req.headers['x-slack-request-timestamp'];
+  const hmac = crypto.createHmac('sha256', process.env.SLACK_SIGNING_SECRET);
+  const [version, hash] = signature.split('=');
+
+  // Check if the timestamp is too old
+  const fiveMinutesAgo = ~~(Date.now() / 1000) - (60 * 5);
+  if (timestamp < fiveMinutesAgo) return false;
+
+  hmac.update(`${version}:${timestamp}:${req.rawBody}`);
+
+  // check that the request signature matches expected value
+  return hmac.digest('hex') === hash;
+}; 
+  
+module.exports = { isVerified };
+