JS | 슬랙 봇 만들기 (Slack bot | 슬랙 연동 | React)

0. slack api에서 앱 생성

슬랙 봇을 테스트할 app을 생성해야 함

새 HQ에 오신 것을 환영합니다.

Start Building또는 YourApps를 클릭

(YourApps를 클릭했을 경우 초록색의 Create New App을 다시 눌러줘야 함)

 

 

✔️App Name은 말그대로 앱 이름인데 봇의 이름이라고 생각하면 됨

✔️Development Slack Workspace는 슬랙 봇을 사용할 슬랙의 워크스페이스를 선택

 

 

사용할 기능을 선택

(이미 만들어두었던 app이라 화면이 조금 다를 수 있음)

 

1. 앱 설치 및 토큰발급

OAuth & Permissions에서 토큰을 발급받을 수 있음

이미 발급받았기 때문에 Reinstall~이 뜨는데, 처음에는 초록색 버튼의 Install App to Workspace라는 버튼을 눌러 설치해주면 된다.

설치를 마치고 나서 해당 워크스페이스에서 봇을 사용할 채널에서 앱을 추가해주면 됨

이미 추가되어 있어서..

 

2. 코드작성

테스트할 프로젝트 생성..

2-0. 채널 ID확인

봇의 메시지를 전달받을 채널로 이동 후, 주소창에서 가져오면 되는데

파란색 박스 안의 값이 채널 ID입니다.. 빨간색으로 그어놓은 첫 번째 값은 아님!

2-1. rest api로 이용하기

axios를 이용해 전송해본다. cors에러가 발생하기 때문에 cors-anywhere를 붙여줬다.. 영찜찜쓰

  const requestMessage = async (message) => {
    try {
      await axios({
        method: "post",
        url:
          "https://cors-anywhere.herokuapp.com/" +
          "https://slack.com/api/chat.postMessage",
        data: {
          text: message,
          channel: "채널코드",
        },
        headers: {
          "Content-type": "application/json; charset=utf-8",
          Authorization: `Bearer ${TOKEN}`,
        },
      }).then((res) => {
        console.log(res);
      });
    } catch (e) {
      console.log(e);
    }
  };

 

메시지 입력 후 전송

잘 오긴 옴..

2-2. SDK이용하기

@slack/web-api 인스톨 (slack/events-api는 필요하지 않음)

$ npm i @slack/web-api

WebClient 객체에 토큰값을 넣고 생성

const { WebClient } = require("@slack/web-api");

const TOKEN = "xoxb-토큰값";

const client = new WebClient(TOKEN);

const CHANNEL_ID = "채널ID";

axios를 이용하는 것 보다 더 간단하다

  const requestMessage = async (message) => {
    try {
      await client.chat
        .postMessage({
          channel: CHANNEL_ID,
          text: message,
        })
        .then((res) => console.log(res));
    } catch (error) {
      console.log(error);
    }
  };

---

+) 참고

slackapi/node-slack-sdk