슬랙(Slack) API 사용 가이드 (2) - 메세지 보내기

반응형

슬랙(Slack) API 사용 가이드 (1) - SlackApp 만들기에 이어서 이번에는 직접 리액트 프로젝트를 만들어서 메세지를 작성해서 Slack Workspace에 보내는 실습을 진행해보도록 하겠습니다. 

 

documentation 메뉴로 가준 후에 좌측의 APIs를 클릭하고 methods를 눌러줍니다. 

그 중에서도 PostMessage 를 사용해서 메세지를 보내보도록 하겠습니다. 

 

Method URL : 요청을 보낼 기본 주소라고 생각하시면 됩니다.
Preferred HTTP method : HTTP method 방식을 알려줍니다. post 방식을 사용하면 됩니다.
Accepted content types : 적용될 content types라고 하는데 문서의 아래에 어떻게 적용해야 하는지 나와 있기 때문에 넘어가도록 하겟습니다.
Token type : 여기선 bot token을 사용합니다.

 

인자로 넘겨줘야하는 정보들은 아래와 같습니다. 

token : 토큰은 api에 요청을 보낼 때 인증을 위한 키라고 생각하시면 됩니다. 위에서 말했듯이 저희는 bot token을 사용할 것입니다. 설명을 보아하니 Authentication token의 bearer 에 붙혀줄 것 같습니다.
channel : slack의 어느 채널에 메세지를 보낼 것인지 알려줘야 하기 때문에 필수로 넘겨주어야하는 인자입니다.
text : 지금 저희가 하는 것이 메세지를 보내는 것이기 때문에 어떤 text를 메세지로 보낼 것인지 알려주는 것도 필수입니다.

 

그리고 헤더 정보도 함께 보내주어야 합니다. 

headers: {
      "Content-type": "application/json",
      Authorization: "Bearer xoxb-xxxxxx-xxxxxxxx"
    }

 

   

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import axios from "axios";

const BOT_TOKEN = "Bot Token 입력";
function App() {
    const getChannelList = async () => {
        const result = await axios({
            method: "get",
            url: "https://slack.com/api/conversations.list",
            params: {
                token: BOT_TOKEN
            },
            headers: {
                "Content-type": "	application/x-www-form-urlencoded"
            }
        });
        console.log(result);
    };
    const sendMessage = async () => {
        const result = await axios({
            method: "post",
            url: "https://cors-anywhere.herokuapp.com/" + "https://slack.com/api/chat.postMessage",
            data: {
                text: window.location.href,
                channel: "CN1GMB1TJ"
            },
            headers: {
                "Content-type": "application/json",
                Authorization: `Bearer ${BOT_TOKEN}`
            }
        });
        console.log(result);
    };

    return (
        <div className="App">
            <button onClick={getChannelList}>채널리스트 불러오기</button>
            <button onClick={sendMessage}>메세지 보내기</button>
        </div>
    );
}

export default App;

 

리액트 프로젝트를 만들어서 App.js를 위와 같이 만들어줍니다 채널리스트를 불러오는 이유는 슬랙의 구조가 채널 별로 나눠져 있기 때문에 특정 채널로 메세지를 보내기 위해서는 채널 ID를 알아야합니다.

 

리액트 프로젝트를 실행시켜보면 아래와 같은 화면이 나옵니다.

채널리스트 불러오기 버튼을 클릭해주면 콘솔에서 아래처럼 채널 ID를 확인할 수 있습니다. 

원하는 채널ID를 sendMessage의 data의 channel에 넣어줍니다. 

sendMessage에서 "https://cors-anywhere.herokuapp.com/" 를 사용하는 이유는 CORS 이슈를 해결하기 위해 프록시 서버 주소를 추가해준 것입니다.

 

그리고 메세지 보내기 버튼을 클릭하면 아래처럼 메세지가 오는 것을 확인하실 수 있습니다. 

slack  API를 활용해 메세지를 보내는 기능을 추가한다면 문의사항을 받을 수도 있고, 리포트를 받아서 볼 수 있다는 장점이 있는 것 같습니다.