RN 웹뷰 카카오 공유하기

JavaScript
1

카카오톡에서 초대장을 클릭 했을 때 onShouldStartLoadWithRequest에서 url를 갖고 오지 않습니다. 특이한 점은 앱을 설치하지 않고 초대장을 클릭했을 때 브라우저에서 의도한 url로 잘 이동이 됩니다. 따로 원인을 찾고 있지 못하는 상황입니다. 혹시, 의심할 부분이 어떤게 있을까요?

2

카카오톡에서 메시지 버튼 링크로 앱을 호출 했을때 파라메터가 안들어온다는 말씀이실까요?

모바일 브라우저에서 링크 구성하여 호출해도 동일한가요?

3

네 그렇습니다. 앱을 호출 했을 때 파라미터(url)이 들어오지 않고 있습니다. 모바일 브라우저에서는 파라미터(url)이 잘 들어옵니다. 현재 RN 웹뷰에서 어떤 설정을 못해서 그런건지 추측하고 있습니다.

4

혹시, 카카오톡 내 메시지 버튼 링크가 아니라, 메시지 하단 출처 링크로 이동하면 url잘 들어오는지 확인해주시겠어요?

image

5

Screenshot_20230313_183424_KakaoTalk

하단 “트립소다” url을 눌렀을 때 기존 의도했던 url과 다르게 domain 페이지로 이동하는 것을 확인했습니다. 어떤 부분이 원인인지 알 수 있을까요??

6

앱이 설치되어 있을때 버튼이 디벨로퍼스앱에 등록된 앱패키지를 호출하고
앱이 설치되어 있지 않을때 설정하신 URL로 이동 하며,
출처 링크 선택 시, 웹사이트 도메인 (디벨로퍼스 설정 첫번째 도메인)으로 이동하는 것으로 이해했습니다.

메시지 설정에 따른 정상 동작으로 추정되는데요.

앱ID와 발송하신 메시지를 어떻게 구성하셨는지 관련 코드블럭 공유 부탁드려요~

7

친절한 답변 감사드립니다.
혹시 앱 ID는 앱 키를 말씀하시는걸까요?
다음은 제 코드입니다.

const KakaoLinkShare = () => {
    const url = `/store/product/detail/${router.query.productId}`;

    kakao.Link.sendCustom({
      templateId: 56146,
      templateArgs: {
        title: `${title}`,
        description: `이런 여행 어때요?`,
        mobileWebUrl: url,
        webUrl: url,
      },
    });
  };
8

앱ID는 아래 정보 확인해주시면됩니다~

앱ID
https://developers.kakao.com/ 의 내 애플리케이션>앱 설정>요약 정보 : 기본정보에 있는 앱 ID
숫자로된 ID 입니다~
ex) 123456

9

감사합니다 (__)
앱 Id: 604333

10

가급적 유사하게 해보려고 구성 후, android 앱 실행 테스트 해봤는데요.
앱 실행과 파라메터 전달이 잘되서 문제상황 재현이 안되네요.

구현하신 앱에 종속적인 문제인 것 같습니다.

RN은 잘몰라서 onShouldStartLoadWithRequest검색해보니 앱내 인앱브라우저에서 request할때 사용하는 이벤트로 보이는데요.

onResume, onNewIntent에서 수신 처리 구현하셔야할 것으로 보입니다. (RN에 대해 자세한 안내 어려운점 양해 부탁드려요.)

https://stackoverflow.com/questions/33643359/how-do-i-get-onresume-event-from-react-native

            Kakao.Link.sendCustom({
                templateId: 57826,
                templateArgs: {
                    "title": "테스트상품",
                    "imageUrl": "https://via.placeholder.com/150/FFFF00/000000?Text=test",
                    "btn_title": "앱으로 보기",
                    'path': 'mobile_new/product/product.do?prdMstCd=S0002611',
                    "regularPrice": 50000
                }
            });

image

11

답변 감사드립니다. (__) 혹시, RN 웹뷰 환경에서 카카오 공유하기 기능 설정하는 문서가 따로 있을까요??

12

웹뷰환경에서 JS SDK v1사용하시는걸로 확인했었는데요.
웹뷰환경에서는 하이브리드앱 처리 (커스텀 스킴 호출 처리) 해주셔야하는데요.
아래 내용 참고해보시겠어요?

리액트네이티브 웹뷰 / 카카오공유 - woody.ho 님의 게시물 #7

JS SDK v2 사용하시면 별도 처리 없이 사용가능할 것 같은데… v2로 변경해보시는 것도 좋을 것같아요.

설치 방법 Kakao Developers
최신 버전 Kakao Developers

13

기존에 잘 작동했던 기능이 어느 시점에 안되었는데 아마 JS SDK v2 업데이트를 안해서 그런가 보네요… 감사합니다.

14

기존에 잘 작동했던 기능이 어느 시점에 안되었는데

그렇다면 다른 문제일듯해요. v1은 변경된 것이 없고 v2는 호출 URL이 커스텀스킴이 아니라서 별도 처리가 필요없는 부분입니다.

참고 부탁드려요. (JS SDK v1과 v2는 완전히 다른 리소스입니다.)

1개의 좋아요
15

문제 해결했습니다.
다른 개발자님도 이와 동일한 문제를 겪을 수 있을거 같아서 해결 방법을 남기도록 하겠습니다.

Version.
React Native: 0.66.0.
React Native Webview: 11.14.0

Issue.
Webview 커스텀 스킴 호출 처리하는 함수인 onShouldStartLoadWithRequest에서 스킴을 갖고 오지 못함.
ex) event.url 값을 갖고 오지 못함.

Resolution.
카카오톡 공유: Android | Kakao Developers 카카오톡 공유: Android 참고. parameters를 통해 특정 페이지를 이동할 수 있도록 url을 설정.
ex) AndroidManifext.xml

           <data android:host="oauth"
                    android:scheme="kakao${YOUR_NATIVE_APP_KEY}://kakaolink?value=param" />

Webview의 Navigation의 상태를 조작하는 handleNavigationStateChange 함수에서 다음과 같이 코드를 작성.

    Linking.getInitialURL().then((url) => {
      const param = '&mobileWebUrl=';
      if (url.startsWith('kakao${YOUR_NATIVE_APP_KEY}//') && url.match(param)) {
        const mobileWebUrl = url.substring(url.indexOf(param) + param.length);
        setUri(mobileWebUrl);
      }
    });

추가적으로 정상적으로 작동했던 onShouldStartLoadWithRequest 함수에서 왜 스킴을 갖고 오지 못하는지 원인을 파악하지는 못했습니다. 혹시 이와 관련해 알게된 사항이 있으시면 답변해주시기 바랍니다. (__)

1개의 좋아요