카카오 링크 사용예

Admin 2020.05.29 14:21 조회 수 : 53

카카오 개발자 사이트 : https://developers.kakao.com/tool/demo/link/feed

피드 템플릿

<a id="kakao-link-btn" href="javascript:sendLink()">
  <img
    src="//developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png"
  />
</a>
<script type="text/javascript">
  // input your appkey
  Kakao.init('3e786f8df14fcfc89d159421a6a7c9b6')
  function sendLink() {
    Kakao.Link.sendDefault({
      objectType: 'feed',
      content: {
        title: '딸기 치즈 케익',
        description: '#케익 #딸기 #삼평동 #카페 #분위기 #소개팅',
        imageUrl:
          'http://k.kakaocdn.net/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png',
        link: {
          mobileWebUrl: 'https://developers.kakao.com',
          webUrl: 'https://developers.kakao.com',
        },
      },
      social: {
        likeCount: 286,
        commentCount: 45,
        sharedCount: 845,
      },
      buttons: [
        {
          title: '웹으로 보기',
          link: {
            mobileWebUrl: 'https://developers.kakao.com',
            webUrl: 'https://developers.kakao.com',
          },
        },
        {
          title: '앱으로 보기',
          link: {
            mobileWebUrl: 'https://developers.kakao.com',
            webUrl: 'https://developers.kakao.com',
          },
        },
      ],
    })
  }
</script>

 

리스트 템플릿

<a id="kakao-link-btn" href="javascript:sendLink()">
  <img
    src="//developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png"
  />
</a>
<script type="text/javascript">
  // input your appkey
  Kakao.init('3e786f8df14fcfc89d159421a6a7c9b6')
  function sendLink() {
    Kakao.Link.sendDefault({
      objectType: 'list',
      headerTitle: 'WEEKLY MAGAZINE',
      headerLink: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
      contents: [
        {
          title: '취미의 특징, 탁구',
          description: '스포츠',
          imageUrl:
            'http://k.kakaocdn.net/dn/bDPMIb/btqgeoTRQvd/49BuF1gNo6UXkdbKecx600/kakaolink40_original.png',
          link: {
            mobileWebUrl: 'https://developers.kakao.com',
            webUrl: 'https://developers.kakao.com',
          },
        },
        {
          title: '크림으로 이해하는 커피이야기',
          description: '음식',
          imageUrl:
            'http://k.kakaocdn.net/dn/QPeNt/btqgeSfSsCR/0QJIRuWTtkg4cYc57n8H80/kakaolink40_original.png',
          link: {
            mobileWebUrl: 'https://developers.kakao.com',
            webUrl: 'https://developers.kakao.com',
          },
        },
        {
          title: '감성이 가득한 분위기',
          description: '사진',
          imageUrl:
            'http://k.kakaocdn.net/dn/c7MBX4/btqgeRgWhBy/ZMLnndJFAqyUAnqu4sQHS0/kakaolink40_original.png',
          link: {
            mobileWebUrl: 'https://developers.kakao.com',
            webUrl: 'https://developers.kakao.com',
          },
        },
      ],
      buttons: [
        {
          title: '웹으로 보기',
          link: {
            mobileWebUrl: 'https://developers.kakao.com',
            webUrl: 'https://developers.kakao.com',
          },
        },
        {
          title: '앱으로 보기',
          link: {
            mobileWebUrl: 'https://developers.kakao.com',
            webUrl: 'https://developers.kakao.com',
          },
        },
      ],
    })
  }
</script>

 

텍스트 템플릿

<a id="kakao-link-btn" href="javascript:sendLink()">
  <img
    src="//developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png"
  />
</a>
<script type="text/javascript">
  // input your appkey
  Kakao.init('3e786f8df14fcfc89d159421a6a7c9b6')
  function sendLink() {
    Kakao.Link.sendDefault({
      objectType: 'text',
      text:
        '기본 템플릿으로 제공되는 텍스트 템플릿은 텍스트를 최대 200자까지 표시할 수 있습니다. 텍스트 템플릿은 텍스트 영역과 하나의 기본 버튼을 가집니다. 임의의 버튼을 설정할 수도 있습니다. 여러 장의 이미지, 프로필 정보 등 보다 확장된 형태의 카카오링크는 다른 템플릿을 이용해 보낼 수 있습니다.',
      link: {
        mobileWebUrl:
          'https://developers.kakao.com/docs/js/kakaotalklink#텍스트-템플릿-보내기',
        webUrl:
          'https://developers.kakao.com/docs/js/kakaotalklink#텍스트-템플릿-보내기',
      },
    })
  }
</script>

 

로케이션 템플릿

<a id="kakao-link-btn" href="javascript:sendLink()">
  <img
    src="//developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png"
  />
</a>
<script type="text/javascript">
  // input your appkey
  Kakao.init('3e786f8df14fcfc89d159421a6a7c9b6')
  function sendLink() {
    Kakao.Link.sendDefault({
      objectType: 'location',
      address: '경기 성남시 분당구 판교역로 235 에이치스퀘어 N동 8층',
      addressTitle: '카카오 판교오피스 카페톡',
      content: {
        title: '신메뉴 출시♥︎ 체리블라썸라떼',
        description: '이번 주는 체리블라썸라떼 1+1',
        imageUrl:
          'http://k.kakaocdn.net/dn/bSbH9w/btqgegaEDfW/vD9KKV0hEintg6bZT4v4WK/kakaolink40_original.png',
        link: {
          mobileWebUrl: 'https://developers.kakao.com',
          webUrl: 'https://developers.kakao.com',
        },
      },
      social: {
        likeCount: 286,
        commentCount: 45,
        sharedCount: 845,
      },
      buttons: [
        {
          title: '웹으로 보기',
          link: {
            mobileWebUrl: 'https://developers.kakao.com',
            webUrl: 'https://developers.kakao.com',
          },
        },
      ],
    })
  }
</script>

 

커머스 템플릿

<a id="kakao-link-btn" href="javascript:sendLink()">
  <img
    src="//developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png"
  />
</a>
<script type="text/javascript">
  // input your appkey
  Kakao.init('3e786f8df14fcfc89d159421a6a7c9b6')
  function sendLink() {
    Kakao.Link.sendDefault({
      objectType: 'commerce',
      content: {
        title: '언제 어디든, 더 쉽고 편하게 당신의 일상을 더 즐겁게, 헤이 라이언의 이야기를 들려드릴게요.',
        imageUrl:
          'http://k.kakaocdn.net/dn/dScJiJ/btqB3cwK1Hi/pv5qHVwetz5RZfPZR3C5K1/kakaolink40_original.png',
        link: {
          mobileWebUrl: 'https://developers.kakao.com',
          webUrl: 'https://developers.kakao.com',
        },
      },
      commerce: {
        productName: '카카오미니',
        regularPrice: 100000,
        discountRate: 10,
        discountPrice: 90000
      },
      buttons: [
        {
          title: '구매하기',
          link: {
            mobileWebUrl: 'https://developers.kakao.com',
            webUrl: 'https://developers.kakao.com',
          },
        },
        {
          title: '공유하기',
          link: {
            mobileWebUrl: 'https://developers.kakao.com',
            webUrl: 'https://developers.kakao.com',
          },
        },
      ],
    })
  }
</script>

 

스크랩 템플릿

<a id="kakao-link-btn" href="javascript:sendLink()">
  <img
    src="//developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png"
  />
</a>
<script type="text/javascript">
  // input your appkey
  Kakao.init('3e786f8df14fcfc89d159421a6a7c9b6')
  function sendLink() {
    Kakao.Link.sendScrap({
      requestUrl: 'https://developers.kakao.com',
    })
  }
</script>

 

커스텀 템플릿

<a id="kakao-link-btn" href="javascript:sendLink()">
  <img
    src="//developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png"
  />
</a>
<script type="text/javascript">
  // input your appkey
  Kakao.init('3e786f8df14fcfc89d159421a6a7c9b6')
  function sendLink() {
    Kakao.Link.sendCustom({
      templateId: 3135,
      templateArgs: {
        title:
          '판교 맛집에 들르다. 다양하고 풍부한 퓨전 한정식. 깔끔한 내부 인테리어 라이언',
        description:
          '부담없는 가격에 푸짐하게 즐기는 점심메뉴 런치한정식, 불고기정식, 돼지 김치찌개 등',
      },
    })
  }
</script>

 

나에게 보내기

<a id="send-to-btn" href="#" onclick="sendTo();">
  <img src="//k.kakaocdn.net/14/dn/btqc6xrxbuT/7VJk7YSWITkz9K9pbXEffk/o.jpg" />
</a>
<script type="text/javascript">
  // input your appkey
  Kakao.init('3e786f8df14fcfc89d159421a6a7c9b6')
  function sendTo() {
    Kakao.Auth.login({
      scope: 'PROFILE,TALK_MESSAGE',
      success: function() {
        Kakao.API.request({
          url: '/v2/api/talk/memo/send',
          data: {
            template_id: 3135,
            args:
              '{"title": "판교 맛집에 들르다. 다양하고 풍부한 퓨전 한정식. 깔끔한 내부 인테리어 라이언","description": "부담없는 가격에 푸짐하게 즐기는 점심메뉴 런치한정식, 불고기정식, 돼지 김치찌개 등"}',
          },
          success: function(res) {
            alert('success: ' + JSON.stringify(res))
          },
          fail: function(err) {
            alert('error: ' + JSON.stringify(err))
          },
        })
      },
      fail: function(err) {
        alert('failed to login: ' + JSON.stringify(err))
      },
    })
  }
</script>

 

카카오 스토리 공유하기

<a href="javascript:shareStoryWeb()">
  <img src="https://dev.kakao.com/sdk/js/resources/story/icon_small.png" />
</a>
<script type="text/javascript">
  // input your appkey
  Kakao.init('c089c8172def97eb00c07217cae17495')
  function shareStoryWeb() {
    Kakao.Story.share({
      url: 'https://developers.kakao.com',
      text: '카카오 개발자 사이트로 놀러오세요! #개발자 #카카오 :)',
    })
  }
</script>

 

카카오 스토리 소식 받기

<div id="kakaostory-follow-button"></div>
<script type="text/javascript">
  // input your appkey
  Kakao.init('c089c8172def97eb00c07217cae17495')
  Kakao.Story.createFollowButton({
    container: '#kakaostory-follow-button',
    id: 'kakao',
  })
</script>

 

카카오 스토리 포스팅하기

<a id="post-kakao-login-btn"></a>

<p id="post-result"></p>
<script type="text/javascript">
  // input your appkey
  Kakao.init('c089c8172def97eb00c07217cae17495')
  Kakao.Auth.createLoginButton({
    container: '#post-kakao-login-btn',
    success: function() {
      const result = document.getElementById('post-result')
      result.innerText = 'complete: login, start: get link-info'
      Kakao.API.request({
        url: '/v1/api/story/linkinfo',
        data: {
          url: 'https://developers.kakao.com',
        },
      })
        .then(function(res) {
          result.innerText += '\ncomplete: get link-info, start: post-link'
          return Kakao.API.request({
            url: '/v1/api/story/post/link',
            data: {
              link_info: res,
            },
          })
        })
        .then(function(res) {
          result.innerText += '\ncomplete: post-link, start: find posted story'
          return Kakao.API.request({
            url: '/v1/api/story/mystory',
            data: { id: res.id },
          })
        })
        .then(function(res) {
          result.innerText += '\nposted: ' + JSON.stringify(res)
        })
        .catch(function(err) {
          result.innerText += '\nerror: ' + JSON.stringify(err)
        })
    },
    fail: function(err) {
      alert('failed to login: ' + JSON.stringify(err))
    },
  })
</script>

 

카카오 내비 안내 시작하기

<a id="navi" href="#" onclick="navi();">
  <img
    src="//developers.kakao.com/assets/img/about/buttons/navi/kakaonavi_btn_medium.png"
  />
</a>
<script type="text/javascript">
  // input your appkey
  Kakao.init('c089c8172def97eb00c07217cae17495')
  function navi() {
    Kakao.Navi.start({
      name: '현대백화점 판교점',
      x: 127.11205203011632,
      y: 37.39279717586919,
      coordType: 'wgs84',
    })
  }
</script>

 

카카오 내비 목적지 공유하기

<a id="navi" href="#" onclick="navi();">
  <img
    src="//developers.kakao.com/assets/img/about/buttons/navi/kakaonavi_btn_medium.png"
  />
</a>
<script type="text/javascript">
  // input your appkey
  Kakao.init('c089c8172def97eb00c07217cae17495')
  function navi() {
    Kakao.Navi.share({
      name: '현대백화점 판교점',
      x: 127.11205203011632,
      y: 37.39279717586919,
      coordType: 'wgs84',
    })
  }
</script>

 

카카오 채널 추가하기

<a id="channel-add-button" href="#" onclick="void addChannel();">
  <img
    src="/tool/resource/static/img/button/channel/add/channel_add_small.png"
  />
</a>
<script type="text/javascript">
  // input your appkey
  Kakao.init('c089c8172def97eb00c07217cae17495')
  function addChannel() {
    Kakao.Channel.addChannel({
      channelPublicId: '_xcLqmC',
    })
  }
</script>

 

카카오 1:1 톡상담

<a id="channel-chat-button" href="#" onclick="void chatChannel();">
  <img
    src="/tool/resource/static/img/button/channel/consult/consult_small_yellow_pc.png"
  />
</a>
<script type="text/javascript">
  // input your appkey
  Kakao.init('c089c8172def97eb00c07217cae17495')
  function chatChannel() {
    Kakao.Channel.chat({
      channelPublicId: '_xcLqmC',
    })
  }
</script>

 

카카오 로그인

<a id="custom-login-btn" href="javascript:loginWithKakao()">
  <img
    src="//k.kakaocdn.net/14/dn/btqCn0WEmI3/nijroPfbpCa4at5EIsjyf0/o.jpg"
    width="222"
  />
</a>
<script type="text/javascript">
  // input your appkey
  Kakao.init('c089c8172def97eb00c07217cae17495')
  function loginWithKakao() {
    Kakao.Auth.login({
      success: function(authObj) {
        alert(JSON.stringify(authObj))
      },
      fail: function(err) {
        alert(JSON.stringify(err))
      },
    })
  }
</script>

 

카카오 로그인 버튼 생성

<a id="create-kakao-login-btn"></a>

<script type="text/javascript">
  // input your appkey
  Kakao.init('c089c8172def97eb00c07217cae17495')
  Kakao.Auth.createLoginButton({
    container: '#create-kakao-login-btn',
    success: function(authObj) {
      alert(JSON.stringify(authObj))
    },
    fail: function(err) {
      alert(JSON.stringify(err))
    },
  })
</script>

 

OAuth 2.0을 지원하는 일반적인 로그인입니다. 백엔드에서 코드를 받아 토큰을 발급하는 과정이 필요합니다.

<a id="custom-login-btn" href="javascript:loginWithKakao()">
  <img
    src="//k.kakaocdn.net/14/dn/btqCn0WEmI3/nijroPfbpCa4at5EIsjyf0/o.jpg"
    width="222"
  />
</a>
<p id="token-result"></p>
<script type="text/javascript">
  // input your appkey
  Kakao.init('c089c8172def97eb00c07217cae17495')
  function loginWithKakao() {
    Kakao.Auth.authorize({
      redirectUri: 'https://developers.kakao.com/tool/demo/oauth'
    })
  }
  // UI code below
  getToken()
  function getToken() {
    const token = getCookie('authorize-access-token')
    if(token) {
      Kakao.Auth.setAccessToken(token)
      document.getElementById('token-result').innerText = 'login success. token: ' + Kakao.Auth.getAccessToken()
    }
  }
  function getCookie(name) {
    const value = "; " + document.cookie;
    const parts = value.split("; " + name + "=");
    if (parts.length === 2) return parts.pop().split(";").shift();
  }
</script>

 

새로운 로그인창을 팝업으로 띄웁니다.

<a id="login-form-btn" href="javascript:loginFormWithKakao()">
  <img
    src="//k.kakaocdn.net/14/dn/btqCn0WEmI3/nijroPfbpCa4at5EIsjyf0/o.jpg"
    width="222"
  />
</a>
<script type="text/javascript">
  // input your appkey
  Kakao.init('c089c8172def97eb00c07217cae17495')
  function loginFormWithKakao() {
    Kakao.Auth.loginForm({
      success: function(authObj) {
        alert(JSON.stringify(authObj))
      },
      fail: function(err) {
        alert(JSON.stringify(err))
      },
    })
  }
</script>

 

사용자 정보 요청

<a id="kakao-login-btn"></a>

<script type="text/javascript">
  // input your appkey
  Kakao.init('c089c8172def97eb00c07217cae17495')
  Kakao.Auth.createLoginButton({
    container: '#kakao-login-btn',
    success: function(authObj) {
      Kakao.API.request({
        url: '/v2/user/me',
        success: function(res) {
          alert(JSON.stringify(res))
        },
        fail: function(error) {
          alert(
            'login success, but failed to request user information: ' +
              JSON.stringify(error)
          )
        },
      })
    },
    fail: function(err) {
      alert('failed to login: ' + JSON.stringify(err))
    },
  })
</script>

 

로그 아웃

<button class="api-btn" onclick="kakaoLogout()">로그아웃</button>

<script type="text/javascript">
  // input your appkey
  Kakao.init('c089c8172def97eb00c07217cae17495')
  function kakaoLogout() {
    if (!Kakao.Auth.getAccessToken()) {
      alert('Not logged in.')
      return
    }
    Kakao.Auth.logout(function() {
      alert('logout ok\naccess token -> ' + Kakao.Auth.getAccessToken())
    })
  }
</script>