Kakao SDK 공유하기 메서드 호출시 IOS에서만 정상동작 안하는 이슈 질문드립니다

REST API
#1

문의 시, 사용하시는 개발환경과 디벨로퍼스 앱ID를 알려주세요.

IOS 앱 내 웹뷰 환경에서 kakao javascript SDK의 Kakao.Share.sendDefault()메서드 호출시 카카오톡앱이 열리지 않고

‘카카오톡이 실행되지 않나요?’
카카오톡 앱을 설치하거나
최신버전으로 업데이트 해주세요.
[ 다운로드 ]

라는 화면으로 (앱의 웹뷰 내에서)이동합니다.

안드로이드에서는 동일한 웹뷰 코드로 카카오톡이 열리며 공유하기 기능이 동작하는데 IOS만 이런 에러가 발생하는 원인이 무엇일까요?

+) 해당 메서드 호출을 짧은시간 여러번 호출하면 카카오톡앱이 열리며 정상동작하는 경우가 있습니다

#2

안녕하세요.

자세한 확인을 위해 사용자의 클릭 이벤트로 부터 SDK 사용까지 구현하신 코드 공유 부탁드립니다.

#3

nextjs 12 사용중이며_app.js의 App Container 내부에서 kakao SDK를 초기화하고있습니다.

const KakaoAccountConfig = ({ service }: { service: ServiceCode }) => {
  useEffect(() => {
    const script = document.createElement('script');
    script.defer = true;
    script.src = 'https://t1.kakaocdn.net/kakao_js_sdk/2.7.1/kakao.min.js';

    script.integrity =
      'sha384-kDljxUXHaJ9xAb2AzRd59KxjrFjzHa5TAoFQ6GbYTCAG0bjM55XohjjDT7tDDC01';

    script.crossOrigin = 'anonymous';

    script.onload = () => {
      Kakao.init(kakaoSDKKeys[service]); // SDK key 
    };

    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return <></>;
};

클릭이벤트로부터 SDK 호출하는 부분은 대략 다음과 같은 코드로 구성되어있는데요.
카카오 공유하기 버튼 클릭시 shareType의 state가 'kakao’로 useState setter호출되며
아래 로직이 동작하며 Kakao.Share.sendDefault 를 호출하게 됩니다.

 if (shareType === 'kakao') {
      setIsLoading(false);
      return Kakao.Share.sendDefault(
        getKakaoClipShareObject({
          ...clipShareData.metadata, 
          dynamicUrl: shortLink,  // Rest 방식으로 생성한 dynamic link shortLink
        })
      );
    }
#4

사용자 이벤트가 state 를 변경하고 훅에서 이를 감지하여 처리하시는건가요?

#5

네 맞습니다 사용자의 onClick이벤트에 의해 shareType state를 변경합니다.
state 변경으로 아래 로직을 포함한 컴포넌트가 리렌더 되어 shareType === 'kakao’조건이 true가 되면, if문이 동작하는 형태로 구현되어있습니다.

 if (shareType === 'kakao') {
      setIsLoading(false);
      return Kakao.Share.sendDefault(
        getKakaoClipShareObject({
          ...clipShareData.metadata, 
          dynamicUrl: shortLink,  // Rest 방식으로 생성한 dynamic link shortLink
        })
      );
    }
#6

JS SDK v2의 카카오톡 공유하기는 카카오톡 실행을 위해 유니버셜링크가 사용됩니다.
iOS 웹뷰에서 사용자 이벤트로 부터 요청되지 않는 타 앱의 실행(유니버셜링크 사용)은 불가 합니다.

사용자 이벤트에 직접 연결 부탁드립니다.

#7

제가 잘못 설명을 드린 것 같습니다. :sweat_smile:
카카오톡 공유하기 버튼 UI를 클릭하면 아래 이벤트핸들러가 실행되며

onClick={() => setDynamicLink(shareType)}

setDynamicLink 함수는 다음과 같은 로직을 담고있습니다.

  1. firebase dynamic Link 생성 (long dynamicLink)
  2. REST API요청으로 dynamicLink를 shortLink로 변환
  3. 다이나믹링크의 shortLink 생성 이후 아래의 로직 동작
    if (shareType === ‘kakao’) {
    setIsLoading(false);
    return Kakao.Share.sendDefault(
    getKakaoClipShareObject({
    …clipShareData.metadata,
    dynamicUrl: shortLink,
    })
    );
    }

setDynamicLink함수는 위 순서대로 동작하며
결과적으로 사용자 이벤트에 따라 호출되는 이벤트핸들러 내부에서 Kakao.Share.sendDefault()를 호출하는 것이 맞습니다.

#8

이 과정에서 이벤트가 끊기는 것으로 보입니다.
사용자 이벤트와 앱 실행 과정에 Promise chaining이 발생하면 사용자 이벤트를 잃게 됩니다.

#9

정상적으로 해결된 것 같습니다. 감사합니다 ! :smile: