JavaScript 카카오 링크 메시지 공유하기 (+ typescript, react)

 

1.  카카오 개발자 페이지에 가서 로그인 후 내 애플리케이션에서 애플리케이션을 추가한다.

2. Javascript 앱 키를 env 파일에 저장해둔다.

3. 웹 플랫폼을 등록한다. www. 으로 시작하는 사이트를 가장 첫줄에 둔다. 나의 경우 개발서버, 상용서버, localhost를 등록해두었다.

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

4. 해당 스크립트를 index.html에 추가한다.

5. 코드를 작성한다. 가이드는 카카오 개발자 페이지에 나와있으니 따라하면 된다.

  const shareKakao = () => {
    // kakao init
    try {
      if (window.Kakao) {
        window.Kakao.init(KAKAO_KEY);
      }
    } catch (e) {
      console.log(e);
    }

    window.Kakao.Link.sendDefault({
      objectType: 'feed',
      content: {
        title: '어쩌구',
        description: desc,
        imageUrl: image,
        link: {
          webUrl: window.location.href,
          mobileWebUrl: window.location.href,
        },
      },
      buttons: [
        {
          title: '보러가기',
          link: {
            webUrl: window.location.href,
            mobileWebUrl: window.location.href,
          },
        },
      ],
    });
  };

init은 한번만 호출되어야 에러가 발생하지 않으므로 shareKakao 함수에 넣어주었다. init에서 사용된 KAKAO_KEY는 전에 env에 담은 Javascript 앱 키이다.

6. react-app-env.d.ts 파일에 타입 추가해주어야 Kakao 객체를 사용할 수 있다. (안그러면 에러남)

interface Window {
  Kakao: any;
}

 

 

참고

• 카카오링크 API로 메시지 보내기
• [카카오 API] 리액트 - 사이트 공유 기능 만들기
• [JavaScript] 웹으로 SNS 공유하기(트위터, 페이스북, 카카오톡)