[API] 카카오톡 공유하기 API 사용하기

1. Kakao Developers 로그인 후 내 애플리케이션에서 '애플리케이션 추가하기' 버튼을 눌러주세요.

Kakao Developers 내 애플리케이션

2. 아이콘, 이름, 사업자명, 카테고리를 작성해주세요 

3. 플랫폼 - 플랫폼 설정하기를 눌러주세요

4. Web - Web 플랫폼 등록을 눌러주세요

web 외의 다른 플랫폼 사용시 자신이 개발하고 있는 플랫폼에 맞게 선택해주시면 됩니다.

5. 사이트 도메인을 작성해주세요

배포링크와 함께 로컬호스트도 추가해주셔야 개발 환경에서도 카카오톡 공유하기 API가 정상 작동하는지 확인할 수 있습니다! 저장을 눌러주세요. 

6. 메시지 템플릿 작성

메시지 템플릿 | Kakao Developers 도구

위 링크에서 자신의 애플리케이션을 선택하고 템플릿 만들기를 눌러주세요! 

저는 기본 FEED로 만들어보겠습니다.
밑의 확인 버튼을 눌러주세요.

원하는 대로 템플릿을 커스텀 하시면 됩니다.
컴포넌트 링크 관리도 자동으로 다 되어 있어서 굳이 안 건드셔도 괜찮습니다. User Argument를 사용하고 싶으시면 사용하고자 하는 필드에 ${변수명} 과 같은 형식으로 써놓으시면 저장 후 자동으로 User Argument에 등록이 됩니다.
저는 제목에 ${title} 이라고 적어 놓겠습니다.

아 그리고 위의 ID를 나중에 코드 작성할 때 사용할 예정이니 기억해주세요! 

템플릿 저장을 눌러주시면 다음과 같이 User Argument에 저장이 된 것을 확인 할 수 있습니다.

7. API Key 복사하기

다시 내 애플리케이션으로 가서 JavaScript 키를 복사해주세요. API 키는 절대로 타인에게 공개해서는 안 됩니다! 그렇기 때문에 프로젝트에 사용하실 때에도 환경변수로 관리해주세요!

8. index.html에 script 추가

react, vue 모두 동일하게 진행해주시면 됩니다. 

<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>

이렇게 추가해 놓으시면 컴포넌트에서 window.Kakao로 접근할 수 있습니다.

9. 공유 버튼 만들기 

<img
        src="../assets/images/kakaotalk_sharing_btn_medium_ov.png"
        alt="카카오톡으로 공유하기"
        @click="sendKakao"
      />

이미지는 카카오톡 공식 이미지 사용했습니다.
@click은 vue 문법인데 그냥 click 이벤트로 카카오톡 공유하기 함수 만들어서 넣어주시면 됩니다.

const title = "제목입니당";

if (!window.Kakao.isInitialized()) {
  window.Kakao.init(process.env.VUE_APP_LOCAL_API_KEY);
}
const sendKakao = () => {
  window.Kakao.Link.sendScrap({
    requestUrl: "http://localhost:8080/",
    templateId: "여러분의 템플릿 아이디",
    templateArgs: {
      title: title,
    },
  });
};

위의 형식으로 작성하면 되는데 템플릿 아이디 작성해주시고 process.env.VUE_APP_LOCAL_API_KEY 부분에 여러분의 JavaScript API Key를 입력해주시면 됩니다. 저는 .env.local 파일을 생성해서 

VUE_APP_LOCAL_API_KEY = "여러분의 API 키"

와 같이 만들어놔서 process.env. 으로 접근할 수 있습니다! 이와 같이 .env.local 파일을 만들어서 환경변수로 사용하시면 git ignore 돼서 github에 안 올라가고 VUE_APP_LOCAL_로 시작하는 변수는 클라이언트에서 확인할 수 없어 소중한 키를 지킬 수 있습니다! React도 같은 방식으로 작동합니다.

그리고 templateArgs에는 여러분이 설정하신 User Argument를 작성해주시면 됩니다.

카카오톡 공유: JavaScript | Kakao Developers 문서

Kakao Developers

제가 작성한 내용 이외에 다루고 싶은 것이 있는 경우, 위의 Kakao Developers 공식 문서를 참고하시면 좋을 것 같습니다!!