카카오톡 공유하기가 간헐적으로 안되요 (2.0 버전 이상에서)

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

앱ID: 295940

SDK버전: 2.8.1


안녕하세요. 카카오톡 javscript SDK 1버전대가 종료된다고해서 2버전대로 수정하여.

카카오톡공유하기

웹에서 javascript SDK로 2.8.1로 구현하였는데.

이전 버전에서(https://developers.kakao.com/sdk/js/kakao.min.js 사용)는

잘되던 카카오톡 공유하기 버튼이 2.8.1 버전대로 고치니 공유하기 한번클릭할땐 잘되다가.

두번째이상클시 됐다가 안됐다가 간헐적으로 안되네요. (공유하기버튼을 빠르게 누를때 그러는거 같기도하고요..)

안될때 다음과 같은 창이 떠서 javascript키 확인해봤는데 잘넘겨진거 확인했고.(key값도 관리자에서 확인해서 맞는거 확인했어요) 다른분들도

간헐적으로 뜨는거랑, 버전 변경시에 그러는거 보니 카카오톡 공유하기쪽에 문제가 있지않나싶어서요 !

답변부탁드립니다.

image

안녕하세요.

표시된 화면과 같이 카카오톡 공유 시, 운영하시는 서비스에서 앱키가 훼손되어 카카오측으로 전달된 상황입니다.

재현 가능한 URL과 관련 코드블럭 공유해주시면 어떤 상황인지 추가 확인해드리겠습니다.

감사합니다.

재현가능한 페이지는 현제 카카오톡쪽엔 공개된 버전이 아닌 dev서버 페이지라. 따로 공유해드릴 페이진없고

공유해드릴려면 별도의 페이지를 만들어들어야 할상황이라. 꼭 재현가능한 페이지가 필요하실가요?

다른방법이 있으실거 같은데..

코드블록은 카카오톡 공유하기 버튼누를시 아래 함수가 발현됩니다.

  • sdk 불러들어오는 부분 2.8.1을
<script async src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
  • 요롷게 고치면 오류가 안나요. 2버전대만 그래요.
<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.8.1/kakao.min.js" integrity="sha384-OL+ylM/iuPLtW5U3XcvLSGhE8JzReKDank5InqlHGWPhb4140/yrBw0bg0y7+C9J" crossorigin="anonymous"></script>

<script type='text/javascript'>
				// 카카오 공유 Init 한 번만 설정하도록 조절하는 Flag
				isKakaoInit = false;
				/*-----------------------------------------------------------------
					도매꾹 PC웹 카카오톡 공유 기능 추가
				-----------------------------------------------------------------*/
				
				function itemThumbkakaoBtnEvent()
				{
					//alert("itemThumb");
					try
					{
						if(typeof Kakao != 'object')
						{
							throw ('Closed Kakao script');
						}
							// 카카오링크 공유 설정
							
							var title = "[도매꾹]버킷햇 보터햇 모음전 /왕골 모자/라탄 모자/챙 모자/봄 여름 모자/챙넓은 모자/벙거지모자/버킷햇";
							var url = "https://www.domeggook.com/Sbbz9H";
							var thumb  = "https://cdn1.domeggook.com/upload/item/2018/06/28/15301687317B56A6B94E19317D703E0B/15301687317B56A6B94E19317D703E0B_stt_330.png";
							var itemNo = "7994552";
							var itemPrice = "3900";
							var affid = "3477374"
							var eventFlag = "";
							const planProductDesc = [
							"이런 상품 찾고 있었죠? 기획전에서 만나보세요!",
							"놓치면 아쉬운 추천템! 기획전에서 확인하세요!",
							"지금 꼭 필요한 상품만 모아봤어요!",
							"주제별 인기 상품을 한눈에! 기획전 오픈!",
							"찾기 어렵던 상품, 기획전에서 쉽게 만나보세요!",
							"테마별 상품 추천! 기획전에서 확인하세요!",
							"다양한 상품을 한곳에서! 기획전 구경하기",
							"이런 조합은 처음? 기획전에서 확인하세요!",
							"당신을 위한 맞춤 추천! 기획전으로 초대합니다.",
							"특별한 기획전, 원하는 상품을 한눈에!",
							"주제별로 모았습니다! 기획전에서 확인하세요!",
							"필요한 상품만 쏙쏙! 기획전 구경하세요!",
							"놓치면 후회! 지금 기획전에서 만나보세요!",
							"어디서 찾을지 고민 끝! 기획전에서 확인!",
							"이런 상품 조합, 기획전에서만 볼 수 있어요!",
							"특별한 큐레이션! 기획전에서 확인하세요!",
							"알아두면 좋은 상품, 기획전에 다 모았어요!",
							"찾고 있던 바로 그 상품! 기획전에서 만나세요!",
							"편리하게 모아둔 기획전, 지금 확인하세요!",
							"다양한 상품을 한눈에! 기획전에서 확인하세요!"
						];
							
							
							
							//<![CDATA[
							if(!Kakao.isInitialized())
							{
								// 사용할 앱의 JavaScript 키를 설정해 주세요.
								Kakao.init("javascript키");
								isKakaoInit = true;
							}
							// 카카오링크 버튼을 생성합니다. 처음 한번만 호출하면 됩니다.
							// 상세페이지쪽
							if(itemNo)
							{
								Kakao.Share.sendCustom({
								templateId: 106917, // 도매꾹 상품상세페이지 전용 카카오링크 메시지 템플릿 ID (웹으로이동, 앱으로이동 버튼 2개 생성)
								templateArgs: {
									'${IMAGE}'	: thumb,
									'${TITLE}'	: title,
									'${ITEMNO}'	: itemNo,	// 상품상세페이지의 상품번호 (카카오링크 메시지 템플릿에서 사용)
									'${PRICE}'	: itemPrice,	// 상품가격 (카카오링크 메시지 템플릿에서 사용)
									'${AFFID}'	: affid,		// 파트너프로그램 사용시 필요
								},
								installTalk: true, // 카카오톡 설치 안되어있을 경우 앱 설치 페이지로 이동
								});
							}
							else if(eventFlag)
							{
								//alert('기획전 : ' + thumb);
								const randomMsg = planProductDesc[Math.floor(Math.random() * planProductDesc.length)];
								Kakao.Share.sendCustom({
									templateId: 118402,
									templateArgs: {
										'${IMG}'    : thumb,
										'${MSG}'    : randomMsg,
										'${URL}'    : url
									}
								})
							}
							else
							{
								//alert('그외 : ' + url);
								
								Kakao.Share.sendDefault({
									objectType		: 'feed',
									content: {
										title		: title,
										description	: title,
										imageUrl	: thumb,
										imageWidth	: 195,
										imageHeight	: 96,
										link: {
											mobileWebUrl: url,
											webUrl: url
										}
									},
									buttons: [
										{
											title : '웹으로 이동',
											link  : {
												mobileWebUrl : url,
												webUrl		 : url
											}
										},
									],
									installTalk: true, // 카카오톡 설치 안되어있을 경우 앱 설치 페이지로 이동
								});
								
									
							}
					}
					catch(e)
					{
						// Do nothing
						console.log(e);
					}
				}

저는 기재 하신 코드로 잘 작동하는데요.

앱키는 설정하셨죠?

위에 첨부하신 에러는 아래 init 를 잘못했거나 전송중 Request가 훼손될때 발생합니다.
운영하시는 환경이나 개발내용이 원인이니 확인 부탁드려요.

Kakao.init("javascript키");

네네 앱키는 일부로 지워서 드렸어요 ! 다른 회사 개발자도 보시는 페이지인거같아서요.

한번 말고 여러번 눌러보셔요. 맨처음은 대부분 잘뜹니다.

저희쪽 개발이 문제라면. sdk를 2.8.1이아니라 https://developers.kakao.com/sdk/js/kakao.min.js요걸로 갈아끼울때도

똑같이 재현되어야할텐데요… 이전 버전을 잘떠서요.

키가 잘못된거라면 처음부터 안되야하는데.

보통. 처음에는 잘작동되고 두번째이상시 간헐적으로그래요.(처음에 바로 안될때도없고 규칙이 따로없네요. 정말

말그대로 간헐적이에요)

영상첨부해보려구 했는데 여긴 안되나보네요;; (300MB이상이라 첨부가 안되네요.)

이게 한번 말고 여러번 시도하셔야 재현되실거에요.

다시한번 확인부탁드려요 ~

init 를 분기 처리 하지 마시고 head에 한번 선언하시고

실제 send 만 함수 호출 하도록 변경해보시겠어요?

답변감사드려요 !! 테스트 여러게 해봣는데.

원인을 찾은거 같아요. 공유하기가 한페이지에 ‘3군데’ 있는데

중복으로 Kakao.init처리되거나 A를 기대했는데 B키로 불러진거 같아요…

(이미 중복으로 Kakao.init처리하지 않는 소스가있어서 요문제는 아닌거같은데..)

  1. 이게 혹시 Kakao 객체에서 한개로 키를 공유하는걸가요? 그래서 한페이지에 공유하기 하나만있어야

잘 작동되는걸가요??? (예를들면 A에서 먼저 Kakao.init호출해서 요 키값으로 잡혀있는데. B에선 다른 키값을 기대해서 에러가 뜬거같아서…)

  1. 혹시 Kakao.init(‘key값’); 요론 init을 할때마다 내부에서 key값이 다른값으로 초기화되나요??? 앱키가 다르다고나오는데. 저희쪽소스에는 3군데 같은 key로 요청하고있어서.확인이안되서요. (uuid도 계속 다르게 나오는거 보니…) Kakao sdk공유하기쪽에 init후 만들어진 앱키(?)를 확인할수 있는 함수는 따로 없을 가요???

이게 혹시 Kakao 객체에서 한개로 키를 공유하는걸가요?

네, 로딩된 SDK 에 Static하게 할당하므로 변수 생명주기에 따라 최종 설정한 값이 적용됩니다.

그리고 디벨로퍼스 운영정책에 따라 동일한 서비스에서는 동일한 디벨로퍼스앱을 사용하셔야합니다.

init을 할때마다 내부에서 key값이 다른값으로 초기화되나요???

설정한 값 그대로 세팅됩니다. 잘못된 앱키가 설정된게 아니라 앱키 설정이 제대로 안된 상황으로 보이는데요.
에러발생 시, 표시된 UUID 텍스트로 기재 해주시면 추가로 확인해보겠습니다.

init후 만들어진 앱키(?)를 확인할수 있는 함수는 따로 없을 가요???

아래 함수로 확인 가능합니다.

Kakao.Auth.getAppKey()

답변감사합니다 ^^ 내부에서 해결해볼게요.