KakaoLink API(카카오로 링크 공유하기) in React

Kakao에서 제공하는 메시지 API는, 

사용자가 카카오톡 친구에게 카카오톡 메시지를 보내는 기능을 제공한다.

https://developers.kakao.com/docs/latest/ko/message/common

Kakao Developers

 

위 기능을 통해 서비스의 접근성을 높이고, 공유를 통해 쉽게 전파되는 효과를 예상했다.

 

메시지를 보내는 방법은 크게 2가지인데,

1. 카카오링크 API를 사용하는 방법

2. 카카오톡 메시지 API를 사용하는 방법

 

이렇게 2가지이다.

 

필자는 첫 번째 방법을 택했다.

 

그 이유는

위 표에서 확인할 수 있듯이,

카카오톡 메시지 API를 사용하려면 친구 목록을 API로 가져와 우리 서비스 내에서 처리해야 하는데,

 

해당 API는

데브톡에서 신청을 통해 API 사용 권한을 얻어야 해서

 

쉽고 빠르게 구현해보고 싶었던 나의 목표와 어긋나 사용을 미루게 됐다.

 

---

설정

 

 

우선 사이트 도메인을 잘 설정해주었다.

 

후에 템플릿을 사용할 건데, 사이트 도메인에 등록된 URL만을 도메인 링크로 사용할 수 있기 때문이다.

 

kakao javascript SDK를 사용할 예정이기 때문에

init() 메서드를 통해 사용할 준비를 우선 해두었다.

기본 템플릿, 사용자 정의 템플릿 중

사용자 정의 템플릿을 사용할 것이기 때문에

템플릿 설정을 통해 입맛에 맞게 잘 설정을 마쳤다.

 

In React

https://developers.kakao.com/docs/latest/ko/message/js-link#custom-template-msg

Kakao Developers

위에서 언급했듯이 사용자 정의 템플릿을 통해 구현할 것이며,

 

정말 매우 간단하다.

공식 문서에서 알려준 내용이다.

 

그렇다면 createCustomButton이 인자로 받는 setting 값들은 무엇일까?

 

Parameters :

Name	Type	Description
settings	Object	카카오링크와 관련된 설정을 key/value로 전달합니다. Properties

우선 하나의 settings라는 Object를 매개변수(Parameter)를 가진다.

 

Name	Type	Description
container	String | HTMLElement	DOM Element 또는 Element의 ID Selector를 넘기면, 해당 Element를 클릭할 때 카카오링크가 전송됩니다.
templateId	Number	메시지 템플릿 아이디, [내 애플리케이션 > 카카오링크 > 메시지 템플릿]에서 확인
templateArgs	Object	메시지 템플릿에서 활용할 arguments, ex) {'name':'kakao', 'url':'https://developers.kakao.com'}
installTalk	Boolean	카카오톡이 설치되어 있지 않은 경우 마켓의 카카오톡 설치 페이지로 이동
callback	function	데스크톱 환경에서 카카오링크 공유 완료했을 때 호출되는 콜백 함수 (IE 미지원)
serverCallbackArgs	Object | String	카카오링크 공유 시 전송되는 링크 콜백에 포함되는 파라미터

그리고 그 Object는 위와 같은 구조로 이뤄져 있다.

 

결국 예시 코드는 kakao-link-btn를 id로 같은 요소를 클릭하면,

templateId에 해당하는 템플릿을

templateArgs에 담긴 인수를 활용하여 구성해 카카오링크를 전송한다는 것이다.

 

방금 말한 템플릿은 아까 설정한 그 템플릿을 말한다.

 

Code

const shareKakaoLink = (userId) => {
  // @ts-ignore
  window.Kakao.Link.createCustomButton({
    container: "#kakao-link-btn",
    templateId: 73967,
    templateArgs: {
      userId: `${userId}`,
    },
  });
};

const onShareKakaoClick = () => {
  shareKakaoLink(userId);
};

<button
  id="kakao-link-btn"
  className="bg-lightBlue-500 active:bg-lightBlue-600 uppercase text-white font-bold hover:shadow-md shadow text-xs px-4 py-2 rounded outline-none focus:outline-none sm:mr-2 mb-1 ease-linear transition-all duration-150"
  type="button"
  onClick={onShareKakaoClick}
>
  share
</button>

React에서 카카오링크 관련하여 작성한 코드 전체는 위와 같다.

 

실행 결과

정말 간단하다.

 

성공!!