카카오 API

JavaScript SDK를 이용하여, 카카오 플랫폼 서비스에서 제공하는 REST API를 간단하게 호출할 수 있습니다. (oauth와 push 관련 API 제외)

예제: 사용자 정보 요청

  • 사용자 정보를 불러오는 예제입니다.
  • 앱 등록 과정을 통해 도메인을 등록해야 합니다.
  • 사용자 정보 요청을 위해서는 앱 설정이 필요합니다.
  • 'YOUR APP KEY'를 등록한 앱의 JavaScript 키로 변경해 주세요.

사용자 정보를 요청합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width"/>
<title>API Demo - Kakao JavaScript SDK</title>
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

</head>
<body>
<a id="kakao-login-btn"></a>
<script type='text/javascript'>
  //<![CDATA[
    // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('YOUR APP KEY');
    // 카카오 로그인 버튼을 생성합니다.
    Kakao.Auth.createLoginButton({
      container: '#kakao-login-btn',
      success: function(authObj) {
        // 로그인 성공시, API를 호출합니다.
        Kakao.API.request({
          url: '/v1/user/me',
          success: function(res) {
            alert(JSON.stringify(res));
          },
          fail: function(error) {
            alert(JSON.stringify(error));
          }
        });
      },
      fail: function(err) {
        alert(JSON.stringify(err));
      }
    });
  //]]>
</script>

</body>
</html>

위 예제의 데모를 바로 확인해 보세요! 데모 보러가기

  • 사용자 정보를 요청하기 위해서는 카카오톡과 연결된 카카오계정으로 테스트해야 합니다.

Kakao.API와 관련된 자세한 내용이 궁금하다면? Kakao.API 레퍼런스
각 API에 대한 요청 파라미터와 응답은 REST API와 동일합니다. REST API 간편한 참조

예제: 카카오스토리에 사진 업로드하기

  • 카카오스토리에 사진을 업로드합니다.
  • 카카오스토리 버튼 이미지는 여기에서 다운로드 할 수 있습니다.
  • 앱 등록 과정을 통해 도메인을 등록해야 합니다.
  • 'YOUR APP KEY'를 등록한 앱의 JavaScript 키로 변경해 주세요.

카카오스토리에 사진을 업로드합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width"/>
<title>API Demo: Post photo to KakaoStory  - Kakao JavaScript SDK</title>
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

</head>
<body>
<style type='text/css'>
  /* <![CDATA[ */
    #file-input-wrapper {
        display: none;
        margin-top: 50px;
    }
  /* ]]> */
</style>
<a id="kakao-login-btn"></a>
<div id="file-input-wrapper">
<p>Post image to KakaoStory:</p>
<input id="file-input" type="file" multiple=""/>
</div>
<div>
<p id="post-result"></p>
<img id="post-image" src=""/>
</div>
<script type='text/javascript'>
  //<![CDATA[
    // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('YOUR APP KEY');
    Kakao.Auth.createLoginButton({
      container: '#kakao-login-btn',
      success: function() {
        document.getElementById('file-input-wrapper').style.display = "block";
      },
      fail: function(err) {
        alert(JSON.stringify(err))
      }
    });
    document.getElementById('file-input').onchange = function (event) {
      Kakao.Auth.getStatus(function(statusObj) {
        if (statusObj.status == "not_connected") {
          alert('You should log in first.');
        } else {
          // API를 호출합니다.
          Kakao.API.request({
            url: '/v1/api/story/upload/multi',
            files: event.target.files
          }).then(function (res) {
            // 이전 API 호출이 성공한 경우 다음 API를 호출합니다.
            return Kakao.API.request({
              url: '/v1/api/story/post/photo',
              data: {
                image_url_list: res
              }
            });
          }).then(function (res) {
            return Kakao.API.request({
              url: '/v1/api/story/mystory',
              data: { id: res.id }
            });
          }).then(function (res) {
            document.getElementById('post-result').innerHTML = JSON.stringify(res);
            document.getElementById('post-image').src = res.media[0].original;
          }, function(err) {
            alert(JSON.stringify(err));
          });
        }
      });
    };
  //]]>
</script>

</body>
</html>

위 예제의 데모를 바로 확인해 보세요! 데모 보러가기

  • 사진 업로드는 File API를 지원하는 브라우저에서만 이용 가능합니다.
  • 카카오스토리에 사진을 업로드하기 위해서는 카카오스토리와 연결된 카카오계정으로 테스트해야 합니다.

Kakao.API와 관련된 자세한 내용이 궁금하다면? Kakao.API 레퍼런스
각 API에 대한 요청 파라미터와 응답은 REST API와 동일합니다. REST API 간편한 참조

예제: 카카오스토리에 글 작성하기

  • 지정한 URL의 웹사이트를 스크랩한 후 카카오스토리에 글을 올립니다.
  • 사용자가 카카오스토리에 글을 직접 공유할 수 있도록 버튼을 제공하려면, 카카오스토리 공유를 참조해 주세요.
  • 카카오스토리 버튼 이미지는 여기에서 다운로드 할 수 있습니다.
  • 앱 등록 과정을 통해 도메인을 등록해야 합니다.
  • 'YOUR APP KEY'를 등록한 앱의 JavaScript 키로 변경해 주세요.

카카오스토리에 글을 작성합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width"/>
<title>API Demo: Post link to KakaoStory  - Kakao JavaScript SDK</title>
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

</head>
<body>
<a id="kakao-login-btn"></a>
<div>
<p id="post-result"></p>
</div>
<script type='text/javascript'>
  //<![CDATA[
    // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('YOUR APP KEY');
    Kakao.Auth.createLoginButton({
      container: '#kakao-login-btn',
      success: function() {
        // 로그인 성공시, API를 호출합니다.
        Kakao.API.request({
          url : '/v1/api/story/linkinfo',
          data : {
            url : 'http://www.kakao.com'
          }
         }).then(function(res) {
          // 이전 API 호출이 성공한 경우 다음 API를 호출합니다.
          return Kakao.API.request( {
            url : '/v1/api/story/post/link',
            data : {
              link_info : res
            }
          });
        }).then(function(res) {
          return Kakao.API.request( {
            url : '/v1/api/story/mystory',
            data : { id : res.id }
          });
        }).then(function(res) {
            document.getElementById('post-result').innerHTML = JSON.stringify(res);
          }, function (err) {
            alert(JSON.stringify(err));
        });
      },
      fail: function(err) {
        alert(JSON.stringify(err))
      }
    });
  //]]>
</script>

</body>
</html>

위 예제의 데모를 바로 확인해 보세요! 데모 보러가기

  • 카카오스토리에 글을 작성하기 위해서는 카카오스토리와 연결된 카카오계정으로 테스트해야 합니다.

Kakao.API와 관련된 자세한 내용이 궁금하다면? Kakao.API 레퍼런스
각 API에 대한 요청 파라미터와 응답은 REST API와 동일합니다. REST API 간편한 참조

Promise 지원

Kakao.API.request함수는 Promise를 반환합니다. 순차적으로 API를 호출하는 경우, Promise를 이용하여 간결한 코드를 작성할 수 있습니다.
Promise에 대한 전반적인 설명은 여기를 참조하세요.

지원하는 API

JavaScript SDK의 요청 파라미터와 응답은 REST API와 동일합니다. REST API 간편한 참조

  • 푸시알림 및 앱로그분석 기능은 지원되지 않습니다.

Last Modified : 2017-07-28