카카오톡 공유하기 API 참고 링크
이제는 오픈한 그 프로젝트... 😒
계속 이커머스 프로젝트에서 허우적거리다가 처음으로 하드코딩 메인으로 들어간 플젝이였다.
하드코딩은 할 만하겠지? 하면서 잔뜩 기대했지만 이게 웬걸 API 지옥이었음
지금은 어찌저찌 잘 오픈했지만, 시간에 쪼들리면서 API 스크립트를 만들었던 순간은
너무나 아찔했던 기억... 그때 여기저기 검색하면서 내가 반드시 Java Script로 API 하는 방법
기깔나게 정리해서 누군가에게 도움이 되리라 다짐했던 게 생각나서 이제야 적어 보는 글....
누군가에게 이롭게 사용되기를 💁♀️
우선 카카오톡 공유하기 API를 사용하기 위한 전체적인 플로우는
애플리케이션 등록 > 앱 Key 확인 > 플랫폼 등록 > 스크립트 작성 > 동작 테스트
이다.
1단계 : 애플리케이션 등록 및 앱 key 확인
- 회원가입 후 내 애플리케이션 > 애플리케이션 등록 진행
진행하려는 프로젝트의 정보를 넣고 추가하면 된다.
회사 프로젝트라면 담당 PM님께 회원가입 및 애플리케이션 추가까지 요청 드리는 것을 추천한다.
내 계정으로 했다가 나중에 고객사에서 유지보수는 자체적으로 진행한다고 하면 내 계정을 주거나 키값을 다시 받아 수정 후 재전달 해야 되는 번거로움이 있기 때문..
- 앱 key 확인
표시된 부분 앱 키 확인 > 나중에 스크립트에 넣어서 사용하게 됩니다.
2단계 : 플랫폼 등록
- 플랫폼 탭에서 프로젝트에 맞는 위치에 플랫폼 등록
(진행하는 프로젝트가 반응형 웹 사이트여서 Web에만 등록)
이 단계에서 도메인 관련해 에러가 자주 나는데,
내가 겪었던 에러 부분들은 맨 하단에 정리해둘테니 참고!
3단계 : 스크립트 작성
작업을 할 때 고객사에서 어떤 식으로 공유 되기를 원한다는 관련 정보를 노티 받은 게 없어서
최대한 간단하게 정보만 노출되는 형식의 스크립트로 따로 작성하였다. (템플릿 사용 X)
개인 커스텀으로 스크립트를 작성하는 것 말고도
카카오 디벨로퍼에서 제공하는 템플릿을 사용하여 원하는 형식으로 커스텀도 가능하다.
아래는 작성한 코드 ~~
<!-- 헤더 또는 해당 api 사용 페이지에 추가 -->
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script> <!-- html -->
<div class="btn_box">
<a href="javascript:shareMessage()">
<button type="button" class="kakao_btn">
<img src="/img/front/icon/kakao_sh.png" alt="카카오톡 공유">
</button>
</a>
<span>카카오톡 공유</span>
</div>// 카카오톡 공유하기 openApi
Kakao.init('Key값');
// key 값을 가져오는지 확인 > console.log(Kakao.isInitialized());
function shareMessage() {
// 현재 링크 가져오기
var currentURL = window.location.href;
// 제품 타이틀을 가져오는 부분
var productTitleElement = document.querySelector('p.prod_top');
var productTitle = productTitleElement ? productTitleElement.innerText : '';
// 제품 설명을 가져오는 부분
var productSummaryElement = document.querySelector('pre');
var productSummary = productSummaryElement ? productSummaryElement.innerText : '';
// 제품 이미지를 가져오는 부분
var productImageElement = document.querySelector('.swiper-slide img');
var productImageUrl = productImageElement ? productImageElement.getAttribute('src') : '';
Kakao.Link.sendDefault({
objectType: 'feed',
content: {
title: productTitle,
description: productSummary,
imageUrl: productImageUrl,
link: {
mobileWebUrl: currentURL,
webUrl: currentURL,
},
},
buttons: [
{
title: '웹으로 보기',
link: {
mobileWebUrl: currentURL,
webUrl: currentURL,
},
},
],
// 카카오톡 미설치 시 카카오톡 설치 경로이동
installTalk: true,
});
}해당 정보가 있는 엘리먼트에 있는 텍스트를 가져오는 형식으로 작성했다.
제품 상세, 카탈로그 2페이지에서 공유하기 사용이 필요했는데,
키값을 따로 받을 필요 없이 불러오는 엘리먼트 요소만 맞춰서 스크립트를 작성했더니
무사히 가져올 수 있었다.
결과 화면
아줌마.. 단촐하지..?
카카오톡에서 아래와 같은 템플릿도 제공하니 걱정 ㄴㄴ
도구 > 메세지 템플릿
이게 바로 카카오식 너가 뭘 원할지 몰라서 다 만들어뒀어.. 커스텀도 가능해.... ദ്ദി -᷄ ᴗ -᷅ )
에러 : Error Code 4019, Error Code 4002 해결 방법
데브톡 : https://devtalk.kakao.com
에서 적극적으로 검색해보고 찾아보고, 정 안되면 문의글까지 남기는 것을 추천.
멋찐 데브톡 선생님들이 바로바로 친절하게 알려주신다. 증말 감삼다 🧙♀️
(과거의 나... 울지마... 너 해결했어...)
💢 Error Code 4019
인증 실패 오류로 인해 생기는 에러였는데,
검색해도 정보가 별로 없어 당황스러워 문의를 남겼더니
하하하하하 앱 키값을 샘플 키값을 넣어두고 있어서 생기는 오류였다
완전 웃김 하하하... 오케이 대음.
💢 Error Code 4002
4019 에러의 수치를 이겨내기 위해 열검색..
해당 오류는 "공유할 링크가 도메인 설정에 없어서 발생하는 것" 이라는 말에
템플릿 도메인을 로컬, 테섭만 남기고 다 지웠는데도 동일한 에러가 나타나고 있었다.
정말 답답하다... 하고 문의를 남겼더니 의외의 답변을 받았다.
엥... 하고 developers.kakao.com 를 넣었더니 바로 정상적으로 기능이 동작했다..!
그때는 와 해결해결~~~ 하고 넘겼는데, 지금 생각해보면 아마 내가 사용할 도메인 중에
하나였던 테스트 서버가 SSH도 안되어 있고, 보안이 안되어 있는 http 사이트라서
그랬던 거 같다고 생각 중이다.
자세히 알고 계신 분이 있다면 알려주시길... ❗❗
산넘고 물건너 카카오톡 공유하기 api 적용 완료 !
어렵다고 생각했지만 엄청 어려운 재질은 아니였던 거 같다...
지금은 여러 API 해보면서 느낀 건데 카카오톡 API는 정말 친절한 편인 거 같다.
데모 사이트로 알려줘,, 템플릿 설정하면 코드도 만들어줘,,
데브톡으로 앱 아이디 공유하면서 여쭤보면 빠르게 답변도 받을 수 있고,,, 긋잡
당시에는 팍팍한 스케줄 + 처음 해보는 API 조합으로 스트레스 박박 받아가면서 만들었지만
돌아보니 여러모로 배울 수 있는 시간이었다.
