웹앱에 슬랙 연동하기

안녕하세요, 개발자 Sean입니다. 

 

오늘은 개발 중인 웹 어플에다가 슬랙을 연동하는 작업을 했는데요, 

 

슬랙을 연동하게 된 이유는 신규 유저가 들어올 때마다 알림이 필요했는데 메일은 너무 식상하고(아재 냄새나요)...

모든 팀원들이 슬랙을 사용하니 슬랙으로 공유받으면 좋겠다는 이유에서 였습니다. 

 

사실 slack이 굉장히 관련 블로그가 많은 편이라 따로 설명을 하지 않더라도 쉽게 연동방법을 찾을 수 있습니다. 

따라서 대략적인 순서만 알려드리자면 아래와 같습니다. 그리고 기억을 더듬으며 작성해서 대략적인 느낌(?)에 의존해서 알려드립니다.

 

1. slack 어플 만들기

우선은 슬랙안에 어플을 생성해야 합니다. 뭐 거창 한 건 아니구 아래 링크로 가셔서 그냥 어플 만들기 버튼만 누르고 이름 설정하면 끝입니다. 

https://api.slack.com/apps

Slack API: Applications | Slack

2. Oauth & Permission 설정하기

이부분이 헷갈리실 수 있는데요, 쉽게 설명하자면 아무나 슬랙을 통해 메시지를 보내고 쓰고 읽고 하면 보안상 문제가 생길 수도 있겠죠? 그래서 일종의 방충망 같은 것을 설정하는 곳입니다. 여기서 api 요청을 통해 무엇을 할 수 있는지 그 범위를 설정해야 하는데요, 

 

저는 메세지를 읽고 보내는 역할이 필요하니 아래와 같이 설정했습니다. 

근데 토큰이 두 개나 있죠?

 

여기서 토큰이란 간단히 말해 주민번호 같은 겁니다. 

Bot token은 생성한 애플리케이션(봇)의 주민번호이고

User token은 이런 어플리케이션을 생성한 유저의 주민번호와 같습니다. 

 

따라서 추후에 bot의 토큰을 사용해 api 요청을 하면 봇이 어떠한 행위의 주체자가 되는 것이죠.

(만약 user token을 사용하면 봇이 아닌 제가 채팅창에 메세지를 올리게 됩니다.)

 

3. Workspace에 설치하기

그리고 어플을 슬랙에 설치해 줍니다. 설치버튼은 지금 있는 페이지의 상단에 있습니다. 

설치가 되면 슬랙에 앱이 추가된 것을 확인할 수 있습니다.

4. Channel에 추가하기

저는 팀원들이 모두 있는 채널에 메세지를 띄울 것이라 해당 채널에 어플을 추가했습니다. 

채널에 어플을 추가하지 않고 메세지를 전송하려고 하면 채널에 있지 않다는 에러 메시지를 받게 됩니다. 

 

채널에 추가하는 방법은 어플을 클릭해 설정에 들어가면 아래와 같이 채널에 입장시키는 버튼이 있습니다. 

5. 채널 ID 구하기

우선 추가한 채널의 ID를 얻어야 합니다. 

채널의 ID가 필요한 이유는 이후에 메세지를메시지를 보낼 때 파라미터로 아이디를 보내주어야 해당 채널에 올바르게 메시지를 보낼 수 있기 때문입니다. 

 

저는 무식하게 채널 ID를 요청하는 api를 만들어 포스트맨으로 아이디를 얻었는데, 나중에 확인해보니 채널에서 상세보기/환경설정 메뉴를 들어가니까 떡하니 나와있더라고요 ㅠ

 

 

6. 코딩하기

이제 필요한 것들은 모두 얻었으니 코딩만 하면 끝입니다. 

하지만 아마 많은 분들이 여기서 조금 헤메실 것이라 생각됩니다. 

 

만약 로컬에서 작업중이라면,

CORS 에러가 나실 수도 있습니다. 

 

*슬랙에서는 클라이언트의 접근을 보안상 막아놓았습니다.*

 

따라서 관련 기능이 필요하신 분들은 클라이언트가 아닌 서버에 슬랙 api를 연동하시길 바랍니다. 

 

만약 그래도 테스트를 하고싶다면 아래와 같이 프록시 서버를 이용해 우회하는 방식으로 요청을 해보시길 바랍니다.

https://cors-anywhere.herokuapp.com/

 

const sendMessageToSlack = async () => {
    const message = {
      "channel": "channel id",
      "text": `text`,
    }

    const config = {
      "Content-Type": "application/json ",
      "Authorization": `Bearer ${process.env.REACT_APP_SLACK_AUTH}`,
    }
      
    try {
      const result = await axios.post(`https://cors-anywhere.herokuapp.com/${`https://slack.com/api/chat.postMessage`}`,JSON.stringify(message),{headers: config})

    }
    catch (error) {
      console.error(error);
    }
  }

 

이러면 아래와 같이 알림이 작동하게 됩니다.