카카오톡 공유하기 오류

JavaScript
1

문의 시, 사용하시는 SDK 버전 정보와 디벨로퍼스 앱ID를 알려주세요.

워드프레스 웹사이트 주소 : https://mugitan.com
앱ID : 1074874

안녕하세요? 워드프레스 웹사이트에서 카카오톡 공유하기 버튼을 만들려고 합니다.

버튼 생성도 되었고, head 와 footer에 디벨로퍼 자바앱 키까지 입력하였는데,

버튼을 누르면

카카오톡 공유

요청 실패 카카오계정과 카카오톡이 연결되어 있지 않습니다
카카오톡의 [더보기] > [설정] > [카카오계정]에서 로그인 후 다시 시도해 주세요

이런 오류가 뜹니다. 디벨로퍼 ID가 제대로 읽히는걸로보아 css 입력은 잘 된것으로 보입니다.

플랫폼에 사이트 도메인도 생성하였는데 안됩니다.

도와주시면 감사하겠습니다.

2

안녕하세요.
공유하기 시도한 계정이 카카오톡 연동 안된 계정이라 공유 할 수 없다는 의미입니다.

카카오톡 연동된 카카오 계정으로 시도해주세요.

3

안녕하세요? 먼저 달아주신 답변 감사드립니다.

PC환경에서는 위 오류 메시지가 뜨면서 안되고, PC카카오톡으로 로그인해도 마찬가지입니다.

그리고 모바일 환경에서는 버튼을 누르면 아예 반응하지 않습니다. 사파리, 크롬 등 제가 아이폰에서 사용하는 여러 브라우저로 시도해보았는데 버튼 클릭 후 무반응입니다.

다른 소셜공유는 정상작동하는데 카톡 API 설정에 잘못될 것이 있을지요?
(하나 의심되는 것은, 제가 클라우드플레어를 사용 중인데, 혹시 클라우드플레어에서 카톡공유 응답을 막거나 하는 경우가 있을까요?)

제가 지금 현재 작성한 자바스크립트는 아래와 같습니다.

일단은 각 포스팅마다 카카오톡 공유 버튼 부분이 활성화되도록하여 아래 스크립트를 넣었고


    <!-- 카카오톡 공유 버튼 --> 
    <li style="margin-right: 0.5; display: inline-block;">
      <a href="#" onclick="shareKakaotalk();">
        <img src="~~~~~~~~~~~이미지 주소.png" alt="카카오톡 공유하기" rel="nofollow" style="border-radius: 25%; width: 50px;">
      </a>
    </li>

그리고 제 홈페이지 전체 footer 훅으로 아래 스크립트를 넣었습니다.

> <!-- 카카오톡 공유 버튼 -->
> 
> <script src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.1/kakao.min.js"
>   integrity="sha384-kDljxUXHaJ9xAb2AzRd59KxjrFjzHa5TAoFQ6GbYTCAG0bjM55XohjjDT7tDDC01" crossorigin="anonymous"></script>
> <script> Kakao.init('~~~~~~~~~~~~~~~자바앱키 받은 것을 입력');
> 	    console.log(Kakao.isInitialized());
> 	function shareKakaotalk() {
> 		Kakao.Share.sendScrap({
> 		requestUrl: location.href
> 		});
> 	};
> </script>

도와주시면 감사하겠습니다.

4

기재하신 사이트 게시물 상세 페이지에서 공유하기 해보니

(1) PC 일때 말씀하신 증상과 달리 아래와 같이 카카오 SDK를 참조하지 못하고 있습니다.

image
image934×176 29 KB

footer가 아닌 html head에 스크립트 추가해보시면 좋을 것 같습니다.

5

답변 달아주셔서 감사합니다.

홈페이지 전체에 적용되는 header css에 아래 스크립트를 추가하였습니다.

<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.1/kakao.min.js" integrity="sha384-kDljxUXHaJ9xAb2AzRd59KxjrFjzHa5TAoFQ6GbYTCAG0bjM55XohjjDT7tDDC01" crossorigin="anonymous"></script>
<script> Kakao.init('b294fc04d56e97c4d42918c21ac4fb89');
	    console.log(Kakao.isInitialized());
	function shareKakaotalk() {
		Kakao.Share.sendScrap({
		requestUrl: location.href
		});
	};
</script>

포스팅 글 화면에서 페이지 소스 보기를 누르면 상단 헤드 부분에 코드가 입력된 것이 잘 뜹니다.

그런데 증상은 여전히 똑같습니다.

스크립트에서 '자바앱키’말고 제가 개별적으로 따로 맞춤 수정해서 입력해야하는 부분이 있는지요?

제가 전문 개발자가 아니라 카카오 디벨로퍼스 매뉴얼과 인터넷에 다른 블로그 사이트 정보를 참고하여 짜깁기를 하였는데, 혹시 스크립트에 잘못 구성된게 있을지요?

도와주시면 대단히 감사하겠습니다.

6

워드프레스에서 스크립트 캐시 플러그인을 사용하시는 것 같습니다.

image
image1438×268 50.2 KB

카카오 JS SDK v2 는 BGP(Border Gateway Protocol)하이재킹이나 DNS하이재킹을 방어하기 위해 스크립트 삽입 시, integrity 속성을 사용합니다. integrity 는 해시(Hash)값이 일치하는 스크립트(Script) 파일만 브라우저에서 실행을 허용하는 Subresource Integrity (SRI)를 위한 속성으로, 보안 강화를 위해 사용을 권장합니다.

워드프레스에서 스크립트 캐시 플러그인에서 카카오 JS SDK integrity 속성을 제거한 것으로 보이는데요.
플러그인에서 캐시 예외처리 해보시겠어요?

그리고 관련 스크립트에 워드프레스에서 사용되는 비표준 rocketlazyloadscript 스크립트 지연 로딩 설정이 되어있는 것으로 보입니다. 해당 속성도 예외 처리 하시면 좋을 것 같습니다.
image

7

친절한 답변 감사합니다.

현재 워드프레스 웹페이지 사용자경험(속도 등) 향상을 위해서 플러그인 wp rocket을 사용 중인데,

관련해서 캐시 및 자바스크립트 축소 지연 등 기능들(minify css, optimize css, delay JavaScript, load JavaScript deffered) 등에서, 알려주신대로 예외처리를 시도하였습니다.

식별 가능한 url 또는 키워드(Specify URLs or keywords)를 넣으면 예외처리(excluded)가 되게끔 되어있어서,

/Kakao/ 를 모두 적어넣었습니다.

캐시 삭제 등을 하고 다시 확인해보았는데, 여전히 증상은 똑같습니다.

예외처리하는 url 키워드로 /Kakao/만 적으면 되는지요? 아니면 잘못 적어넣은것인지요? 다른 것으로 적어야 하면 어떻게 적어야 할지요?

도와주시면 감사하겠습니다.

8

안녕하세요.
여전히 카카오측 JS SDK 를 참조하지 않고 사이트내 캐시된 스크립트를 참조하고 있습니다.
아쉽지만, 사용하신 워드프레스 플러그인은 제가 내용을 알지 못합니다.
해당 플러그인 제공자에게 예외처리 방법 문의해보시면 좋을 것 같아요.

image

9

답변 감사드립니다. 플러그인과 스크립트를 계속 수정 시도해보겠습니다.

1개의 좋아요