페이지 이동경로
  • 문서>
  • 카카오톡 소셜>
  • JavaScript

카카오톡 소셜

JavaScript

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

프로필 가져오기

기본 정보
레퍼런스 앱 설정
Kakao.API.request() 설치
초기화
권한 사전 설정 카카오 로그인 동의항목
- 플랫폼 등록
카카오 로그인 활성화
동의항목
필요 필요:
프로필 정보(닉네임/프로필 사진)
닉네임
프로필 사진

현재 로그인한 사용자의 카카오계정에 연결된 카카오톡 프로필 정보를 받습니다. 사용자 카카오계정에 연결된 카카오톡이 없다면 에러 응답을 받습니다.

요청

url 값을 /v1/api/talk/profile로 지정해 Kakao.API.request() 함수를 호출합니다.

파라미터
이름 타입 설명 필수
url String /v1/api/talk/profile로 고정 O

응답

Kakao.API.request()Promise를 반환합니다. 요청 성공 시 반환 내용은 REST API를 참고합니다.

예제

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

피커: 친구 선택하기

기본 정보
레퍼런스 앱 설정
Kakao.Picker.selectFriend()
Kakao.Picker.selectFriends()
SelectedUser
설치
초기화
하이브리드 앱 가이드(팝업 방식으로 사용 시)
권한 사전 설정 카카오 로그인 동의항목
필요:
사용 권한
플랫폼 등록
카카오 로그인 활성화
동의항목
필요 필요:
카카오 서비스 내 친구목록(프로필사진, 닉네임, 즐겨찾기 포함)

사용자가 카카오톡 친구를 선택할 수 있는 피커를 호출합니다.

요청

선택 유형에 따라 호출해야 할 함수가 다르므로, 서비스의 필요에 맞는 함수를 선택해 사용합니다.

선택 유형 함수
싱글 피커 selectFriend()
멀티 피커 selectFriends()

피커의 구성 요소는 파라미터를 사용해 선택적으로 지정할 수 있습니다.

응답

피커는 팝업 방식으로 열립니다. 팝업이 아닌 현재 창에서 피커로 이동하려면 리다이렉트 방식을 사용합니다.

응답은 Promise로 전달됩니다. 사용자가 피커 화면에서 친구 선택을 완료하면 선택한 사용자 수와 친구의 정보인 SelectedUser 배열이 반환됩니다. 요청에 실패했거나 문제가 발생한 경우 문제 해결에서 원인을 확인합니다.

예제

싱글 피커
멀티 피커
Kakao.Picker.selectFriend({
  title: '친구 선택',
})
  .then(function(response) {
    console.log(response);
  })
  .catch(function(error) {
    console.log(error);
  });
Kakao.Picker.selectFriends({
  title: '친구 선택',
  maxPickableCount: 5,
  minPickableCount: 1,
})
  .then(function(response) {
    console.log(response);
  })
  .catch(function(error) {
    console.log(error);
  });

추가 기능

리다이렉트 방식

리다이렉트 방식으로 피커를 호출합니다. 리다이렉트 방식 사용 시, 현재 창에서 피커로 이동합니다.

returnUrl 파라미터로 응답을 전달받을 서비스 서버의 URL을 지정해야 합니다. returnUrl는 [내 애플리케이션] > [플랫폼] > [Web]에 등록된 사이트 도메인만 허용됩니다. enableBackButton 파라미터로 뒤로가기 버튼 사용 여부를 설정할 수 있습니다.

사용자가 선택을 완료하면, 서비스 서버의 returnUrl로 리다이렉트(HTTP 302 Redirect) 되면서 응답이 URL 인코딩된 쿼리 스트링으로 전달됩니다.

// 리다이렉트 방식
// 성공: ${returnUrl}?selected=${SelectedUsers}
// 실패: ${returnUrl}?error=${Error}
Kakao.Picker.selectFriends({
  returnUrl: 'https://developers.kakao.com', // 필수
  title: '친구 선택',
  maxPickableCount: 5,
  minPickableCount: 1,
});

친구 목록 가져오기

기본 정보
레퍼런스 앱 설정
Kakao.API.request() 설치
초기화
권한 사전 설정 카카오 로그인 동의항목
필요:
사용 권한
플랫폼 등록
카카오 로그인 활성화
동의항목
필요 필요:
카카오 서비스 내 친구목록(프로필사진, 닉네임, 즐겨찾기 포함)

현재 로그인한 사용자의 카카오계정에 연결된 카카오톡의 친구 정보를 받아 옵니다.

요청

정렬 순서, 한 페이지에 가져올 친구 수 등 파라미터를 선택적으로 사용하여 요청할 수 있습니다. 사용자 카카오계정에 연결된 카카오톡이 없다면 에러 응답을 받습니다.

응답 중 각 친구의 uuid 값은 메시지 보내기 API 요청 시 사용하는 수신자 정보로, 메시지 보내기 전 친구 목록을 먼저 받아와야 해당 값을 구할 수 있습니다.

카카오톡 친구 수가 요청 시 limit보다 많다면 결과가 페이지로 나뉩니다. 응답에 포함된 after_url을 사용해 친구 목록 받기를 요청하면 파라미터를 다시 지정하지 않고도 다음 페이지의 친구 목록을 받아올 수 있습니다.

url 값을 /v1/api/talk/friends로 지정해 Kakao.API.request() 함수를 호출합니다.

파라미터
이름 타입 설명 필수
url String /v1/api/talk/friends로 고정 O
data Object API에 전달할 파라미터 X
data: 친구 목록 가져오기
이름 타입 설명 필수
offset Number 친구 목록 시작 지점(기본값: 0) X
limit Number 한 페이지에 가져올 친구 최대 수(기본값: 10, 최대: 100) X
order String 친구 목록 정렬 순서, 오름차순("asc") 또는 내림차순("desc")(기본값 "asc") X
friend_order String 친구 목록 정렬 시, 즐겨찾기 친구의 우선 정렬 또는 닉네임 순서 정렬로 기준 설정
즐겨찾기 친구(favorite) 또는 카카오톡 닉네임(nickname)
(기본값: favorite)
X

응답

Kakao.API.request()Promise를 반환합니다. 요청 성공 시 반환 내용은 REST API를 참고합니다.

예제

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

더 보기