Over a million developers have joined DZone.

Livecoding: Slackbots and OAuth

DZone's Guide to

Livecoding: Slackbots and OAuth

Picking up where we left off last time, in this post we'll try and use Express.js and OAuth to create our Slackbot door answering application.

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

This is embarrassing. That Slackbot that opens doors from last time… it still doesn’t work. I thought we almost had it. I thought I’d identified the hard part. I thought it was just a matter of sitting down and smashing it out.

I was blindsided by OAuth and the exploding complexity that always comes in tutorials and API docs! They show you how simple their API is. How absolutely beautiful to use!

One line of code, two clicks of set up, and you’re sending messages to Slack like a champ. Two clicks, a bit of code, and you’re a bot! You can listen to people’s conversations.

Champ! King of the world?

Image title

Oh, you want to actually receive the promised POST requests from those message buttons? Boy, do I have a trip for you!

First, you have to set up a Slack app. Not an ad-hoc custom integration like you’ve had until now. Oh no, you need a real app. It takes a few clicks on this screen:

Image title

Then it’s going to say that this app is part of your team, but it’s not. You have to set up OAuth, have a server that can do OAuth, and then authorize your team with this new app. You need to add an httpsURL on this screen:

Image title

On the server side, you’re in for a world of doubya-tee-eff, mate. If you’re on Express.js, then you can use Grant to set up Slack OAuth somewhat painlessly. In theory, this is all it takes:

// app.js
var session = require('express-session'),
    Grant = require('grant-express');

var grant = new Grant({
    server: {
        protocol: 'https',
        host: 'swizec.ngrok.io',
        callback: '/callback',
        transport: 'session',
        state: true
    slack: {
        key: '14110144963.81022664631',
        secret: '24df277cd8e3d24e32087885c6ee7c80',
        scope: ['chat:write:bot', 'chat:write:user', 'channels:read', 'commands', 'incoming-webhook'],
        //callback: '/connect/slack/callback'

// ...

app.use(session({secret: 'grant',
                 resave: false,
                 saveUninitialized: true}));


This uses Express’s in-memory session storage, which means that as soon as you restart the server, sessions will be forgotten. The good news is that you don’t have to hold on to them; you just need them long enough to do the OAuth dance.

Oh, and that callback parameter Grant asks for? That is not the same as the Redirect URL that Slack asks for. Set them to the same value, and you’re going for an endless redirect ride. Learned that the hard way.

Go to <server>/connect/slack and do the OAuth dance for your team. If all goes well, Slack rewards you with this message:

Image title

If you go to Slack’s app management panel, you should see something like this:

Image title


Your app is officially set up for your team. The slash command you created while debugging and trying to figure out what’s up works. You say /hai and it says pong.

Image title

But when you click a button on a message that you sent, you still get the error. No POST request hits your server. It’s an immediate error. It doesn’t even try to do the thing.

Image title

It’s an identity issue, I think. Based on my last livecoding, we’re sending Slack messages based on an ad-hoc integration API key. But we’re a real app, so we should send them as the app.

Slack’s documentation doesn’t say how to do that. It talks only about API keys, but apps don’t get API keys. Or I don’t understand the docs. Or I’m blind.

I should send them an email. 

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

web dev ,slackbot ,web application development

Published at DZone with permission of Swizec Teller, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.


Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.


{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}