[vue] vuejs 카카오 링크 연동

오늘은 공유하기...

오늘도 어제도 뻘짓 했다...

공유하기 자체는 간단함. kakao developer 사이트에서 로그인 하고 앱 등록 후 api key 받은 후에 api 붙이고 적용하면 되니까.

 

[index.html]

  <script src="//developers.kakao.com/sdk/js/kakao.min.js" language="javascript" type="text/javascript"></script>
  <script>Kakao.init('API KEY');</script>

일단은 index.html에 스크립트 등록해주고, key도 init 해줌. key같은 경우에는 최초 1회만 등록하면 돼서 그냥 저기에 추가했다. 공유 할 때마다 init 함수를 넣으면 이미 등록된 key라고 오류를 뱉어내더라.

 

[공유하기.vue]

<img @click="kakaoShare"
     src="//developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_small.png"
     width="40"/>

export defalut {
...
methods: {
  ...
  kakaoShare() {
    Kakao.Link.sendDefault({
      objectType: 'feed',
      content: {
        title: this.title,
        imageUrl: 'img url',
        link: {
          mobileWebUrl: this.url,
          webUrl: this.url
        }
      },
      // 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'
      //         }
      //     }
      // ]
    }); // Kakao.Link.sendDefault End
  } // kakaoShare() End
} // methods End
}

그리고 methods:{ } 안에 클릭 시 발생할 메소드를 넣어주면 짜잔-☆

당연하지만 vue라서 위에 html코드는 템플릿 태그 내에, 아래 코드는 스크립트 태그 내에 위치한다.

 

카카오 링크 파라미터? 별로 필수 key값이 달라서 어떤 형식의 링크를 공유 할 지, 어떤 파라미터를 사용 할 지를 선택하는 것도 중요한 것 같다.. 저거때문에 뻘짓좀 했음..

 

처음에는 카카오 api도 스크립트니까 그 전에 javascript 연동했던 것 처럼 mounted나 created 함수 안에 

let script = document.createElement('script');
    script.setAttribute('src',"script_name.js");
    document.head.appendChild(script);

로 스크립트 등록하고, 파일 내에서 key 도 init 하려고 했었는데 그러면 아예 파라미터를 찾지를 못하더라..

근데 스크립트를 여기저기 등록해놨어서 어디서 뭐가 문제인지 모르고 좀 헤맸다 ㅠ

 

추가로 아직 해결을 못 한 건,

다른데 보면 웹에서도 공유가 가능하던데 (공유하기 창이 뜸)

왜 나는 pc웹에서는 오류는 안 나는데 공유하기 창이 뜨지를 않고, 모바일 웹에서만 바로 앱으로 연결되는지 모르겠음..

 

데모 페이지를 보면 바로 앱으로 연결되는게 아니고 전달하기로 웹에서 뜨는데 음.. 좀 더 알아보고 적용해봐야 할 듯

 

+) 아! 모바일에서 전달하기로 뜨는 경우는 앱이 아니라 모바일 웹에서 실행했을 경우 그렇게 뜨고,

웹에서는 그냥 pc웹을 사용하면 공유하기 팝업창이 뜨는데, 가상 모바일 환경(나는 chrome의 Toggle device toolbar로 테스트) 그니까 크롬이나 웨일 브라우저 같은 경우에는 카카오톡을 통해 공유하려고 해서 팝업창이 안 뜬다고 함.

아래는 원인을 찾다가 발견한 질문 글의 카카오 답변

"user agent를 통해 모바일 여부를 판단하여 모바일인 경우 톡을 통해 공유하려고 합니다.
이로 인해, PC 브라우저의 가상 모바일 환경에서는 톡을 통해 공유를 시도하려고 하기에 공유가 실패합니다.
실제 모바일 기기를 통해 테스트 부탁드립니다."

햐.. 그랬다.. 해결..