👻들어가는 글
카카오톡 공유 요청 실패
약 한 달 전 토이 프로젝트:나만의 백신 인증 카드 만들기를 만들어 배포했습니다.
남들에게 프로젝트를 공유할 수 있도록 SNS 공유 기능을 구현했는데요.
그러나 이 사이트에는 치명적인 단점이 있었습니다. 바로 카카오톡 공유를 누르면 오류가 뜬다는 점이었죠ㅠㅠ
일정 때문에 오류 수정을 계속 미뤘는데 드디어 어제 카카오 데브톡 개발자분의 도움을 받아 오류를 해결할 수 있었습니다. (답변 주신 tim.I님 감사합니다😄)
오류의 원인은 바로 TemplateId에 템플릿 ID가 아닌 앱 ID를 써서 오류가 생긴 것이었습니다.😅
공식 문서를 읽어보니 메시지 템플릿 도구라는 것이 있고, 메세지의 제목, 내용, 이미지, 버튼까지 쉽게 설정할 수 있더라구요!
그 동안 자바스크립트로 제목, 메세지를 설정했었는데.. 좋은 정보인 것 같아서 블로그에 기록합니다.
👻Web 플랫폼 등록하기
먼저 Kakao developers에 로그인을 하고 내 애플리케이션 > 애플리케이션 추가하기를 해줍니다.
애플리케이션을 추가해서 앱 설정에 들어가서 사이트 도메인을 추가합니다.
👻카카오톡 공유 기능 구현하기
메세지 템플릿 도구로 메세지 설정하기
도구 > 메세지 템플릿으로 들어가줍니다.
들어가면 아까 만든 애플리케이션 목록이 뜨는데요. 애플리케이션을 클릭한 후 왼쪽 사이드바에서 템플릿 만들기를 눌러줍니다.
그러면 이렇게 메세지의 이미지, 제목, 설명, 버튼 등 여러가지 요소들을 설정할 수 있습니다.
빨간색으로 표시한 것은 템플릿ID입니다. 나중에 자바스크립트에서 요청을 할 때 꼭 필요한 ID이니 복사해주세요!
카카오 스크립트 추가 & 초기화(인증키 넣기)
HTML 문서의 <head> 영역에 아래의 스크립트를 추가합니다
<script src="https://developers.kakao.com/sdk/js/kakao.js" defer></script>내 애플리케이션 > 앱 설정 > 요약 정보에 들어가 javaScript 키를 복사한 후 아래 코드를 스크립트 파일에 작성합니다.
Kakao.init('javaScript 키');자바스크립트로 사용자 정의 템플릿으로 메세지 보내기
저는 직접 만든 버튼을 이용했기에 Kakao.Link.sendCustom();을 사용했습니다.
(카카오톡 공유하기 버튼을 추가하시려면 Kakao.Link.createCustomButton()을 쓰면 됩니다.)
Kakao.Link.sendCustom({
templateId: //템플릿ID
});템플릿 도구에서 메세지의 제목과 설명 이미지를 설정했기때문에 따로 templateArgs:{}를 쓰지 않았습니다.
결과물
공유하기 버튼을 누르고 이런 창이 뜨면 성공!
톡방에 공유하면 이런 모습입니다~
👻마치는 글
템플릿 도구도 있고 공식 문서도 쉽게 잘 쓰여져있어서 설명드릴게 없네요ㅎㅎ
이만 리액트 공부하러 갑니당
📎참고
공식 문서
https://developers.kakao.com/docs/latest/ko/message/js-link#custom-template-msg
카카오 데브톡
https://devtalk.kakao.com/t/errorcode-4002/120977
template id 미일치 오류... 덕분에 잘 해결되었습니다 감사합니다.