Vue.js에서 카카오톡 공유하기 기능 만들기
카카오톡 공유하기 기능은 웹 페이지나 모바일 앱에서 콘텐츠를 손쉽게 다른 사람들과 공유하는 기능입니다.
이번 글에서는 Vue.js를 사용하여 카카오톡 공유하기 기능을 구현하는 방법을 단계별로 설명하겠습니다.
1. 예시화면
개발한 모바일 청첩장을 지인들에게 공유하기 위해 카카오톡 공유하기 기능을 추가했습니다.
이 기능은 카카오 개발자센터에서 키를 발급받아 구현할 수 있으며, 아래와 같이 간단하게 설정할 수 있습니다.
2.구현방법
1) 먼저 카카오 개발자 센터에 접속합니다.
2) 해당링크에 접속하여 로그인을 한 후 [내 애플리케이션] 으로 이동합니다.
3) + 애플리케이션추가를 눌러줍니다.
4) 앱이름과 카테고리를 적절하게 선택한 후, 저장합니다.
5) 생성된 애플리케이션을 눌러서 왼쪽에 있는 앱 키로 이동합니다.
6) javascript 키를 메모장에 적어 놓습니다.
준비는 끝났다. 구현 방법은 아래 링크를 참조하면 됩니다.
링크 > 카카오개발자센터 참조문서
3.소스적용
1) index.html에 아래와 같이 스크립트를 추가합니다.
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
2) 2-6에서 메모장에 적어놓은 key값을 마운트합니다.
mounted(){
Kakao.init('Key 값');
}
3) 카카오톡공유하기 버튼을 눌렀을때 호출되는 메소드에 기능을 구현합니다.
위와 같이 구현 후 카카오톡 공유하기를 누르면 도메인을 찾지 못해서 에러가 발생되는데,
[내 애플리케이션]에서 플랫폼>Web에 위 도메인을 등록하면 카카오톡 공유하기 기능이 정상적으로 작동합니다.
카카오톡 공유하기 버튼을 클릭하면 다음과 같이 청첩장을 지인들에게 공유할 수 있습니다.
작업하시면서 궁금하신 점 있다면 댓글 남겨주세요.
읽어주셔서 감사합니다. 😊