Wix에서 카카오 API 사용하기 (도메인 에러 해결)

어젯밤에 질문을 하나 받았습니다.

 

Wix로 웹사이트를 만들고 있는데, 카카오 공유하기 버튼에서 에러가 난다는 질문이었습니다.

 

문제 상황

 

확인해보니 kakao deveopers 사이트에서 제공하는 데모에서는 공유 기능이 잘 되는데,

Wix로 만든 웹사이트에 심으면 도메인이 등록되어 있지 않다는 에러 ErrorCode(4019)가 나는 상황이었습니다.

 

https://developers.kakao.com/tool/demo/message/kakaolink?method=send&message_type=scrap 

Kakao Developers

 

 

카카오 디벨로퍼스 사이트에 앱 등록이나 api 키 발급 같은 설정은 모두 잘 되어 있는 상황이었습니다.

 

코드에도 문제가 없었습니다. (아래는 카카오 디벨로퍼스 사이트에서 제공하는 예시 코드입니다.)

<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.1.0/kakao.min.js"
  integrity="sha384-dpu02ieKC6NUeKFoGMOKz6102CLEWi9+5RQjWSV0ikYSFFd8M3Wp2reIcquJOemx" crossorigin="anonymous"></script>
<script>
  Kakao.init('c089c8172def97eb00c07217cae17495'); // 사용하려는 앱의 JavaScript 키 입력
</script>

<a id="kakaotalk-sharing-btn" href="javascript:shareMessage()">
  <img src="https://developers.kakao.com/assets/img/about/logos/kakaotalksharing/kakaotalk_sharing_btn_medium.png"
    alt="카카오톡 공유 보내기 버튼" />
</a>

<script>
  function shareMessage() {
    Kakao.Share.sendScrap({
      requestUrl: 'https://developers.kakao.com',
    });
  }
</script>

 

해결 방법

이것저것 뜯어보다 보니 Wix에서 카카오 공유하기 버튼을 넣을 때 iframe으로 넣고 있는 걸 확인했습니다.

 

iframe은 웹사이트 안에 또 하나의 웹사이트를 넣는 방식으로, iframe으로 삽입된 부분은 사용자가 사용하는 브라우저에 보이는 도메인과 아예 다른 도메인을 가집니다.

iframe 태그를 찾아 어떤 도메인의 사이트를 띄우고 있는지 확인해보니 https://(사용자고유id).usrfiles.com/... 이라는 걸 알 수 있었습니다.

 

질문 주신 분은 카카오 디벨로퍼스의 비즈니스 계정을 가지고 계셨기 때문에

도메인 등록 창에 https://*.usrfiles.com 처럼 서브도메인 자리에 와일드카드(*)를 써서 모든 usrfiles.com 도메인을 핸들링 하실 수 있게 도와드렸습니다. (비즈니스 계정만 서브도메인 와일드카드를 사용할 수 있습니다)

 

비즈니스 계정이 아니신 분들은 도메인 등록에 https://(사용자고유id).usrfiles.com을 모두 입력해주시면 됩니다.