카카오톡 공유하기 (Javascript) 를 이용해 원하는 정보 전달하기

 

서론

사이드 프로젝트에서 카카오톡 공유하기 기능을 구현해야 하는 경우가 생겼는데, 경험을 기록해둡니다.
어떤 UI (버튼, 이미지) 를 클릭하면, 카카오톡 API를 통해 카카오톡 앱이 열리고 친구에게 메시지를 공유할 수 있는데요.

 

 

API를 호출할 때, 특정 정보를 전달하고 이 정보를 메시지 링크에 붙여줍니다.

메시지 링크가 열리면 저희 서비스로 이동해서, 서비스에서 이 정보로 특정 액션을 할 수 있습니다.

 

 

 

카카오톡 공유하기 플로우

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

 

 

 

 

 

 

카카오톡 공유하기 API

카카오에 대한 타입정의가 없기 때문에, kakao.d.ts 파일을 만들어 다음과 같은 타입정의를 하였습니다.
kakao.d.ts는 tsconfig.json에서 넣어줘서 컴파일러가 타입을 정의할 수 있도록 했습니다.

 

 

// kakao.d.ts

/**
 * 카카오 API 타입정의
 */
interface Kakao {
  init: (clientSecret: string) => void;
  Share: {
    /**
     * 사용자 정의 템플릿으로 메시지 보내기
     *
     * API Schema
     * https://developers.kakao.com/sdk/reference/js/release/Kakao.Share.html#.sendCustom
     */
    sendCustom: (params: {
      templateId: number;
      templateArgs?: Record<string, string>;
      installTalk?: boolean;
      serverCallbackArgs?: Record<string, string> | string;
    }) => void;
  };
}

declare global {
  interface Window {
    Kakao: Kakao;
  }
}

export {};

 

 

// tsconfig.json

...

"include": [
    "./types/*.d.ts", // d.ts 파일들을 컴파일러가 인식할 수 있게 함
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
  ],

...

 

카카오에서 다양한 공유하기 API를 제공하는데요.
저는 커스텀한 형태의 메시지를 전달하는 것이 필요해서 Kakao.Share.sendCustom API를 사용했습니다.

 

이 함수는 함수 호출 시, 데이터를 인자(args)로 전달할 수 있습니다.

templateArgs에 객체를 전달할 수 있는데 이 객체에 key-value 쌍들을 전달할 수 있어요.

 

 

 

// hooks.ts

export const handleShareToKakao = () => {
    ...

     Kakao.Share.sendCustom({
        templateId,
        templateArgs: {
          key: value,
          key2: value2
        },
      });
    };
}

 

 

 

 

 

카카오톡 개발자 페이지에서 메시지 템플릿 수정하기

 

공통 설정

 

메시지 템플릿을 하나 만드시고, 수정하는 화면에 들어가시면 되는데요.
상단에 공통 설정 영역이 있습니다.

 

사용자 인자를 클릭하시고, 인풋창에 입력을 할 수 있는데요.

위의 Kakao.Share.sendCustom 에서 전달한 templateArgs의 key를 입력하시면 됩니다.
templateArgs에 { name: "이름", age: "나이" }를 넘기셨으면,
인풋창에 ${name} ${age} 이런 식으로 넣으실 수 있는데요.

 

 

링크를 삽입할 때, 이 정보들을 넣어줄 수 있습니다.
pathname에 정보들을 넣어줄 수도 있고, Query String 형태로도 전달할 수 있겠네요.

 

 

 

 

 

사용자 인자

인풋창에 입력하시고 저장을 하셨다면, 하단에 사용자 인자 영역에

${변수명1}
${변수명2}

와 같은 텍스트들이 입력됩니다.

 

 

 

 

 

 

 

컴포넌트 링크 관리

컴포넌트 링크 관리 영역으로 가시면, 공통 링크를 수정하실 수 있습니다.
공통 링크는 메시지의 UI에 공통적으로 링크를 달 수 있게 하는 건데요.
UI마다 하나하나 링크를 달지 않고, 일괄적인 링크를 달 수 있게 해줍니다. (편리!)

 

 

 

 

 

공통 링크에서 수정을 누르시면 창이 하나 나옵니다.
DOMAIN은 지정해둔 도메인을 설정할 수 있는 영역이고요.
PATH에 앞에서 설정한 사용자 인자를 넣어 줄 수 있습니다.

 

 

Pathname이나 Query String을 이용해 사용자 인자를 전달할 수 있는 것입니다.
PATH에 ?code=${code} 와 같이 전달하면, code 키를 가진 사용자 인자 값을 전달하므로 서비스에서 이용할 수 있습니다.
카카오톡 공유로 메시지를 전달받은 유저가 링크를 클릭하면, 서비스가 열리고 code 값을 가지고 서비스에서 특정 동작을 할 수 있는 것입니다.