노드js를 활용하여 카카오톡링크 메세지 보내기, 카카오톡 선물하기 낚시[Node.js][카카오톡API]

가끔 플러스 친구나 아니면 친구들에게 일반 텍스트 문자가 아닌 다른 것이 날라올 때가 있다.

흔한 낚시 메세지다. 선물함으로 가면 낚시 사진이 보인다.

이는 카카오톡 API를 활용한 카카오톡 링크 메세지를 보낸 것인데 이 페이지에선 어떻게 문자를 보내는 지에 대해 글을 써보겠다.

먼저 카카오톡 Developers에 가입을 해야지만 API를 사용할 수 있다.

링크 : https://developers.kakao.com/

가입하고 난 뒤에 내 앱 만들기를 진행해야 합니다.
앱을 만들고 나면 네이티브 앱, REST API, JavaScript, Admin 총 4가지의 키가 발급 되는데 이 중 JavaScript 키만 사용할 것입니다.
JavaScript 키를 미리 복사, 저장해 둡시다.

그리고 내 애플리케이션 페이지로 가보면

위와 같이 나오는데 '앱 정보'의 설정을 눌러서 플랫폼을 설정해주어야 합니다.

웹으로 사용할 것이므로 '플랫폼 추가'에서 웹을 선택한 뒤 '사이트 도메인' 칸에 자신의 서버 도메인 혹은 ip를 적습니다. ex) http://127.0.0.1:포트넘버

※ 적어두지 않으면 나중에 카카오톡 링크 보낼 때 확인되지 않은 링크라고 뜨고 보내지지 않습니다. 꼭 적어두도록 합시다!!

그리고 난 뒤 html 문서를 만들어야합니다.

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
<title>KakaoLink v2 Demo(Default / Feed) - Kakao JavaScript SDK</title>
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

<a id="kakao-link-btn" href="javascript:;">
<img src="//developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png">
</a>
<script type="text/javascript">
  //<!--[CDATA[
    // // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('여기에 아까 복사해 둔 JavaScript API 키를 적으면 됩니다!!');
    // // 카카오링크 버튼을 생성합니다. 처음 한번만 호출하면 됩니다.
    Kakao.Link.createTalkLinkButton({
      container: '#kakao-link-btn',
      label:  '선물과 메세지를 보냈습니다.\n자세한 내용은 선물함에서 확인해주세요.',
      image: {
              src: 'https://t1.daumcdn.net/cfile/tistory/27659D375697546430',
         width: '320',
         height: '416'
      },
      webButton:{
         text: '선물함으로 가기',
         url: 'https://t1.daumcdn.net/cfile/tistory/23176A38569726460F'
      }
   });
  //
</script>
</body>
</html>

그렇다면 이제 기본은 완성이 되었습니다.
그리고 주의하 실 부분은 Kakao.init('')안에 아까 발급한!!! Javascript Key를 집어넣어야 한다는 것입니다!!!!!!
이제 웹서버를 구동하여 html 문서를 실행해야 합니다.

저는 node.js의 npm을 통해 express-generator를 이용하여 빠르게 웹 서버를 구축하였습니다.
express-generator는 Express 웹프레임워크를 이용하여 프로젝트를 쉽게 생성하기 위한 Express Application Generator Tool입니다. 이 툴을 이용하여 Express를 사용할 수 있도록 설정된 빈 프로젝트를 손쉽게 생성할 수 있습니다. 

express-generator가 설치되어 있지 않다면 먼저 Global 설치를 통해 express-generator를 설치합니다.
저는 git bash를 통해 설치하였습니다. 다음 링크에서 git bash 윈도우 버전을 다운 받을 수 있습니다.
https://www.git-scm.com/

npm install express-generator -g

그리고 서버를 만들고 싶은 폴더에서 git bash에서 다음과 같이 작성합니다.

express --view=pug '폴더이름'

그러면 폴더와 함께 안에 express를 사용할 수 있는 골격이 생성됩니다.
바로 git bash에서 만든 폴더로 이동한 후 package.json에 있는 모듈들을 다운 받습니다.

cd '폴더이름'
npm install

이렇게 한다면 밑의 사진과 같이 node를 활용해 바로 웹서버가 구축되었습니다!!

이제 routes 폴더에 있는 index.js에서 요청이 왔을 때의 서버의 처리를 설정합니다.
서버에 요청이 왔을 때 아까 작성한 html을 response 해야하므로 다음과 같이 작성합니다.

/* GET home page. */
router.get('/', function(req, res){
  res.sendFile(__dirname+'\\kakaolinkTest.html');
})

저는 html 파일 이름을 kakaolinkTest으로 했으므로 위와 같이 작성했습니다.
그리고 아까 작성한 html 파일을 routes 폴더에 옮겨 주어야 합니다.

그렇다면 모든 것이 끝났습니다!!

이제 작성한 express 프레임워크를 node로 구동시킨 뒤 서버에 접속하면 다음과 같은 화면이 뜹니다.
※ 모바일로 접속하여야합니다. 카카오톡이 깔려있는 모바일에서만 가능합니다.

이제 모바일에서 저 카카오톡 이미지를 클릭하고 보내고 싶은 카톡방을 클릭하면 카카오톡 링크가 가게됩니다~

여기까지 봐주신 여러분 감사합니다~!