iOS WKWebView를 사용한 하이브리드 웹 페이지에서 Javascript로 kakao.link.sendDefault 호출 시 반응이 없습니다

안녕하세요.

iOS 하이브리드 앱을 개발하고 있는 개발자 입니다.
웹뷰내의 페이지에서 링크 공유를 위해 아래와 같이 호출하고 있습니다. 반응이 없습니다.
WKNavigationDelegate의
func webView(_ webView: WKWebView,
decidePolicyFor navigationAction: WKNavigationAction,
decisionHandler: @escaping (WKNavigationActionPolicy) → Void)
에서 url을 확인해보니 “about:blank” 호출되고 “Kakao CORS Provider” 이후 아무런 액션이 발생하지 않고 있습니다.

개발 환경 -

  • OS: iOS 14.3
  • Device: iPhone 12
  • XCode: 12.3
  • 카카오 개발 사이트에 등록된 App bundle identifier: kr.co.lsinvest.hola.ios
  • AppName: Hola
  • 카카오 관련 LSApplicationQueriesSchemes는 모두 등록했습니다.

KAKAO_APP_KEY: *****

등록된 kakao related schemd 목록

  • kakaokompassauth
  • kakao35e547bea5c7cabbb2207a9c0d581d10
  • kakaolink
  • kakaotalk-5.9.7

앱 코드

extension WebViewController: WKNavigationDelegate {
func webView(_ webView: WKWebView,
                 decidePolicyFor navigationAction: WKNavigationAction,
                 decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
        var wkNavigationActionPolicy: WKNavigationActionPolicy = .cancel

        defer {
            decisionHandler(wkNavigationActionPolicy)
        }

        guard let url = navigationAction.request.url else {
            return
        }

        if let scheme = navigationAction.request.url?.scheme,
           ((dataDetectorSchemes.contains(scheme)) || !["http", "https", "file", "about"].contains(scheme)) {
            UIApplication.openURL(navigationAction.request.url!)
            return
        }

        wkNavigationActionPolicy = .allow
    }
}

샘플 테스트 페이지 코드

<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi, viewport-fit=cover">
</head>
<script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
<script type="text/javascript">
    function shareKakao() {
        if (navigator.share) {
          navigator.share({
            title: 'web.dev',
            text: 'Check out web.dev.',
            url: 'https://web.dev/',
          })
            .then(() => console.log('Successful share'))
            .catch((error) => console.log('Error sharing', error));
        }
    }
</script>
<body style="background-color: #79b8ff">
    <h1><a href="javascript:shareKakao();">카카오공유<img src="https://developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png" /> </a></h1>
</body>
</html>

안녕하세요.

웹뷰 환경에서는 카카오톡 앱을 실행시키기 위해서 native 앱에 추가로 구현해주셔야 하는 부분이 있는데요.
하이브리드 앱에 적용하기 문서를 확인해주세요.

안녕하세요.

카카오톡 앱을 실행시키기 위해서 native 앱에 추가로 구현해주셔야 하는 부분은 가이드에 나와있는 사항(팝업 관련 및 scheme 예외처리등)은 모두 구현한 상태입니다.

참고로 모바일 사파리에서도 동일하게 반응이 없습니다.

감사합니다.

남겨주신 샘플 테스트 페이지 코드에서 navigator.share 함수가 무엇인지 설명 부탁드려요.
Kakao.Link.sendDefault의 wrapper 함수 인가요?

저희가 접근할 수 있는 서비스 URL을 알려주세요.
공개하시기 어려우시면 메시지로 보내주셔도 됩니다.

안녕하세요.

죄송합니다. sendDefault가 안되서 시스템 share 창을 띄우는 코드를 넣어놨다가 잘못 공유 드렸습니다.

아직 공식적으로 해당 기능을 오픈한 단계는 아니고 해당 기능을 추가하기 위해 테스트 페이지를 만들어서 작업을 진행하는 중에 발생한 현상입니다.

수정된 테스트 페이지의 공유 코드 아래와 같습니다.

카카오 공유 코드

function shareKakao() {
if (!Kakao.isInitialized()) {
Kakao.init(‘1d9dc498f8595c6bf14a5ccaa287d01d’);
}

    Kakao.Link.sendDefault({
      objectType: 'text',
      text: '간단한 JavaScript SDK 샘플과 함께 카카오 플랫폼 서비스 개발을 시작해 보세요.',
      link: {
        mobileWebUrl: 'https://stockhola.co.kr',
        webUrl: 'https://stockhola.co.kr'
      },
      serverCallbackArgs: { // 콜백 파라미터 설정
        key: 'value'
      }
    });
}

감사합니다.

남겨주신 JavaScript 코드 상으로는 문제가 없어보이는데요.
저희 로그를 살펴 봤을 때 mobileWebUrl 파라미터에 올바르지 않은 형식의 URL이 들어온 흔적이 있습니다.
ex) "/" 또는 Querystring만 존재
mobileWebUrl 파라미터에 올바른 URL을 넣으셨는지 확인 부탁드려요.

추가로,
문제가 발견된 환경에서 저희 JS SDK 데모를 실행하셔서 동일한 현상이 있는지 확인 부탁드려요.

안녕하세요.
이게 아직 해결은 안된것 같아서 내용을 남겨드립니다.

해당 데모링크를 통해서 접속했을때 WKWebview 를 사용할 경우 마찬가지로 intent:kakaolink를 실행하지 않는 문제점이 발생됩니다.

카카오톡만 유달리 스위프트만 제공되는 라이브러리 형태를 가지고 어플리케이션을 제작하도록 되어 있어 C# xamarin 에서 하이브리드 웹뷰 구현에 많은 차질이 있네요.

ios에서 정확하게 kakaolink:// 으로 링크 실행만 해주면 되더라고요. e.g <a href="kakaolink://~~">카카오 공유</a>

한 번 이 부분 검수부탁드려봅니다.

( 카카오톡측에서 직접 제공되는 js파일에서 만드는 링크에 문제가 있는 것으로 보여집니다. https://developers.kakao.com/sdk/js/kakao.min.js )

@holden.joo

1개의 좋아요

Kakao.Link.sendDefault 를 Kakao.Share.sendDefault 로 바꿔 보세요. 바로 될 겁니다.