![Building a Slack Chat Bot](https://static.frontendmasters.com/assets/courses/2023-08-25-chat-apis/thumb.webp)
Check out a free preview of the full Building a Slack Chat Bot course
The "API Credentials" Lesson is part of the full, Building a Slack Chat Bot course featured in this preview video. Here's what you'd learn in this lesson:
Jason saves the API credentials in the project and uses them to permit the application to send messages back through the API to the user. A utility method is created to eliminate duplicate boilerplate code for fetch requests.
Transcript from the "API Credentials" Lesson
[00:00:00]
>> So next, we are going to get the API credentials that we need to actually send messages as our bot. We're gonna need a signing secret for verifying that the messages are valid. And then we're also going to get a bot OAuth token. So let's make this window bigger again.
[00:00:21]
And we have, It's right here, so we'll grab this bot OAuth token. And I'm gonna let that be visible on screen I guess. Don't be naughty, chat. Now that we've got the setup here, we can go back into our code. You can open this up and there's a .env.example that I apparently didn't commit to this repo.
[00:00:52]
So create a new file called .env, and we're going to set SLACK_BOT_OATH_TOKEN and put in the value of the key there. And the other one that we're gonna need is SLACK_SIGNING_SECRET. And that one is going to be, In here somewhere, we're gonna find that one by looking at the app credentials.
[00:01:27]
Which is in basic information. And we have the signing secret. So I'm going to copy this and head back, paste it in there, and save it, and we can close that down for now. Next, we're gonna restart this app locally, and so we'll have to update the bot command, and so cuz we need to pick up those environment variables.
[00:02:00]
Now, Netlify is smart enough that it knows to check environment files. So it just grabs that .env value, and we'll put that in our environment force, so I can shrink this down. And then what I need to do is grab, The new live hash which is this little set here, oops.
[00:02:30]
Grab this new hash here. Why are you doing that, just copy it, there we go. Shrink this back down. And then we're gonna head into the slash commands, and just update that hash one more time. Okay, so now we've got a command that can actually send messages to the chat as our bot user.
[00:03:01]
So we're going to head into our terminal here. I'm actually gonna minimize this entirely for a bit because that way we can do side-by-side and that'll be easier to see what's going on. So if we wanna send one of these, we can just send a message to the chat.postmessage endpoint.
[00:03:21]
The Slack API is fairly full-featured, you can do quite a bit with it. We're only gonna get into the bits around sending messages and then using the blocks API. There's a lot more you can do. You can get pretty in-depth with what types of feedback or interactivity you wanna put into your ChatOps workflow.
[00:03:46]
What we are gonna do is we're going to open up this util.slack.ts, or util/slack.ts, and inside of it, we are going to create a function that lets us talk to the Slack API. So, export function slackApi(), and that is going to accept two arguments. The first one is going to be the endpoint, and that is a slackApiEndpoint.
[00:04:13]
This is out of the, Types folder that is predefined for us. And so that just gives us the ones that we're actually gonna use, chat.postmessage and views.open. Then we're going to have a body, and that body has a slackApiRequestBody. And those are gonna be the two inputs. And what this means is we're gonna be able to now send requests to the Slack API using kind of a unified flow instead of having to redeclare our fetch API call.
[00:04:44]
And set the token and all the things that we need in order to make these requests. We can just do it in this command and have a lot of the stuff set up for us ready to go. So, this will return a fetch command, and that is going to go to the Slack API, so slack.com/api.
[00:05:02]
And then we wanna set up the endpoint. And the arguments that we send to it. First of all, it's gonna be a POST method. We wanna use the POST method and then we need to send some headers. The headers that we need to send are first and foremost an Authorization header.
[00:05:20]
And that is going to be a bearer token that uses our slack bot token. SLACK_BOT_OAUTH_TOKEN, then we wanna let it know that we're sending JSON. So we'll do a content-type, and send application/json. And then I like to include the charset because otherwise if you use emoji or a character with a diacritic or something, it can cause issues.
[00:05:56]
So, that there, and then for the body, we're gonna send in whatever the body is that we wanna use as stringified JSON. So, we'll just send in a JavaScript object and that's gonna be what we send. Whatever comes back from that fetch, we're gonna grab out as the response, and then we will return JSON value.
[00:06:18]
And so this is gonna be what we use every time we wanna make a request to the Slack API. It's gonna allow us to very quickly send chat messages and other things without having to do this whole header setup every time. And keep track of where our environment variables are and all that good stuff.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops