Livecoding #23: Slackbots and OAuth
This is a Livecoding Recap â an almost-weekly post about interesting things discovered while livecoding ?. Always under 500 words and with pictures. You can follow my channel, here. New streams almost every Sunday at 2pm PDT. Thereâs live chat, come say hai ?
This is embarrassing. That Slack bot that opens doors from last week⌠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. ??
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:
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 https URL on this screen:
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 }));
app.use(grant);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:
If you go to Slackâs app management panel, you should see something like this:
/partyhard
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.
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.
Itâs an identity issue, I think. Based on last weekâs 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. ?
Filed under: JavaScriptLivecodingslackTechnical
