JavaScript

이 문서는 Kakao SDK for JavaScript(이하 JavaScript SDK)를 사용한 카카오톡 채널 기능 구현 방법을 안내합니다.

이 문서에 포함된 기능 일부는 [도구] > [JS 데모]를 통해 사용해 볼 수 있습니다.

JS SDK 데모outlink

시작하기 전에

카카오톡 채널 추가 구현 방식 선택

카카오톡 채널 추가 방식은 카카오톡 채널 간편 추가하기와 카카오톡 채널 추가하기 두 가지입니다. 서비스 페이지 내에서 바로 채널 추가를 요청할 수 있고, 별도의 확인 절차 없이 응답으로 결과를 확인할 수 있는 카카오톡 채널 간편 추가하기 사용을 권장합니다.

카카오톡 채널 추가를 참고해 어떤 방식을 사용할지 결정합니다.

카카오톡 채널 버튼 코드 생성

JavaScript SDK 사용 시, 카카오가 제공하는 카카오톡 채널 버튼과 코드를 서비스 페이지에 사용할 수 있습니다. [도구] > [소셜 플러그인]에서 카카오톡 채널 추가하기, 카카오톡 채널 채팅하기 버튼을 노출하는 코드를 자동 생성할 수 있습니다.

카카오톡 채널 간편 추가하기

기본 정보

사용자에게 지정된 카카오톡 채널의 친구 추가를 요청합니다. 서비스 내에서 요청 화면을 표시하고 응답으로 결과를 전달받을 수 있습니다.

카카오 로그인 사용 서비스에서 카카오톡 채널 간편 추가하기를 사용하려면, 카카오 API를 클라이언트에서 JavaScript SDK로 호출하기 위한 액세스 토큰(Access token) 값을 할당해야 합니다. 자세한 내용은 토큰 할당하기를 참고합니다.

요청

followChannel()로 요청합니다. 카카오톡 채널 프로필 ID를 전달해야 합니다. 서비스의 카카오 로그인 사용 여부에 따른 채널 추가 요청 처리 방법은 카카오 로그인 사용 서비스와 카카오 로그인 미사용 서비스를 참고합니다.

응답

요청 성공 시 응답은 카카오톡 채널 프로필 ID와 요청 결과를 포함합니다. 요청 실패 또는 문제 발생 시 문제 해결에서 원인을 확인합니다.

예제

Kakao.Channel.followChannel({
  channelPublicId: '${CHANNEL_PUBLIC_ID}',
})
  .then(function(response) {
    console.log(response)
    // 채널 간편 추가 성공 처리
  })
  .catch(function(error) {
    console.error(error)
    // 채널 간편 추가 실패 처리
  })

카카오톡 채널 추가하기

기본 정보

사용자가 카카오톡 채널을 친구 추가하러 이동합니다. 카카오톡 채널을 친구로 추가하려면 사용자가 로그인한 상태여야 합니다. 사용자가 로그인하지 않은 상태에서 카카오톡 채널 추가 버튼을 누른다면, 먼저 카카오 로그인 과정을 거칩니다.

요청

카카오가 제공하는 카카오톡 채널 추가 버튼의 사용 여부에 따라 createAddChannelButton()과 addChannel() 함수 중 하나를 선택해 연결 페이지(Bridge page)를 호출합니다.

• createAddChannelButton()
  • 카카오가 제공하는 카카오톡 채널 추가 버튼 사용
  • container 파라미터로 버튼을 추가할 위치의 Element ID 지정
• addChannel()
  • 직접 만든 버튼과 같은 서비스 웹 페이지 구성 요소의 클릭 이벤트 핸들러에서 해당 함수 호출

카카오톡 채널 프로필 ID는 channelPublicId 파라미터로 지정합니다. 카카오톡 채널 프로필 ID 확인 방법을 참고합니다.

응답

카카오톡 채널 추가 여부는 이 함수 호출 결과로 알 수 없습니다. 카카오톡 채널 관계 확인하기 API로 사용자와 카카오톡 채널의 관계를 조회해야 추가 또는 삭제 상태를 알 수 있습니다.

카카오톡 채널 간편 추가하기를 사용하면 서비스 페이지 내에서 바로 채널 추가를 요청하고 별도의 확인 절차 없이 응답으로 결과를 확인할 수 있습니다.

예제

Kakao.Channel.createAddChannelButton({
  container: '#kakao-add-channel-button',
  channelPublicId: '_ZeUTxl' // 카카오톡 채널 홈 URL에 명시된 id로 설정합니다.
});

Kakao.Channel.addChannel({
  channelPublicId: '_ZeUTxl'
});

카카오톡 채널 채팅하기

기본 정보

사용자가 서비스의 카카오톡 채널과 1:1 채팅을 시작합니다. 카카오톡 채널을 친구로 추가하려면 사용자가 로그인한 상태여야 합니다. 사용자가 로그인하지 않은 상태에서 카카오톡 채널 채팅 버튼을 누른다면, 먼저 카카오 로그인 과정을 거칩니다.

요청

카카오가 제공하는 1:1 채팅 버튼 사용 여부에 따라 createChatButton()과 chat() 함수 중 하나를 선택해 사용합니다.

• createChatButton()
  • 카카오가 제공하는 1:1 채팅 버튼 사용
  • container 파라미터로 버튼을 추가할 위치의 Element ID 지정
• chat()
  • 직접 만든 버튼과 같은 서비스 웹 페이지 구성 요소의 클릭 이벤트 핸들러에서 해당 함수 호출

카카오톡 채널 프로필 ID는 channelPublicId 파라미터로 지정합니다. 카카오톡 채널 프로필 ID 확인 방법을 참고합니다.

응답

이 함수의 호출 결과는 사용자가 성공적으로 채팅방에 진입했는지 여부를 알려주지 않습니다.

예제

Kakao.Channel.createChatButton({
  container: '#kakao-talk-channel-chat-button',
  channelPublicId: '_ZeUTxl' // 카카오톡 채널 홈 URL에 명시된 id로 설정합니다.
});

Kakao.Channel.chat({
  channelPublicId: '_ZeUTxl' // 카카오톡 채널 홈 URL에 명시된 id로 설정합니다.
});

카카오톡 채널 관계 확인하기

기본 정보

현재 로그인한 사용자와 앱에 연결된 카카오톡 채널의 친구 관계를 확인합니다.

요청

url 값을 /v1/api/talk/channels로 지정해 Kakao.API.request() 함수를 호출합니다. Kakao.API.request()는 Promise를 반환합니다. 요청 성공 시 반환 내용은 REST API를 참고합니다.

파라미터

응답

사용자가 [카카오톡 채널 추가 상태 및 내역] 동의항목에 동의하지 않아 에러 응답을 받았을 경우, 추가 항목 동의 받기 기능을 사용해 사용자에게 다시 동의를 요청할 수 있습니다.

예제

Kakao.API.request({
  url: '/v1/api/talk/channels',
})
  .then(function(response) {
    console.log(response);
  })
  .catch(function(error) {
    console.log(error);
  });

더 보기

Legacy JavaScript SDK 카카오톡 채널 개발 가이드