카카오톡에서 딥링크가 제대로 작동하지 않습니다

Flutter
1

문의 시 사용하시는 SDK 버전 정보와 플랫폼(Android / iOS) 및 디벨로퍼스 앱ID를 알려주세요.

디벨로퍼스 앱 ID: 775109

flutter 앱에 딥링크를 연결했고, go router를 통해 경로를 설정했습니다.

   <intent-filter android:autoVerify="true">
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data android:scheme="http" android:host="partner-deeplink.netlify.app" />
                <data android:scheme="https" />
            </intent-filter>

GoRouter(
  initialLocation: '/',
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) {
        return const SplashScreen();
      },
    ),
    GoRoute(
      path: '/main',
      builder: (context, state) {
        return const MainNavigationScreen(tab: "일기");
      },
    ),
    GoRoute(
      path: '/sign-up',
      builder: (context, state) {
        return const SignUpScreen();
      },
    ),
    GoRoute(
      path: '/agreement',
      builder: (context, state) {
        if (state.extra == null) return const SignUpScreen();
        final kakaoUser = (state.extra as kakao.User);
        return RegAgreementScreen(
          kakaoLogin: true,
          kakaoUser: kakaoUser,
        );
      },
    ),
    GoRoute(
      path: '/partner',
      builder: (context, state) {
        final sendUserId = state.uri.queryParameters["sendUserId"];
        return PartnerAgreementScreen(sendUserId: sendUserId);
      },
    ),
  ],
)

딥링크는 hash url이 아니라 path url로 작동되는 것으로 확인했고
그럴 경우 ‘https://partner-deeplink.netlify.app/partner?sendUserId=aaa’ 링크를 클릭하면
PartnerAgreementScreen 화면이 띄워져야 합니다.

실제 문자에 해당 링크를 올리면 PartnerAgreementScreen이 올바르게 뜹니다.

다만, 카카오톡으로 해당 링크를 공유하면 아무 화면도 뜨지 않아요.
현재 netlify로 배포했을 때 아무 화면도 뜨지 않고, github로 배포했을 때는 404 에러가 떴습니다.

‘https://partner-deeplink.netlify.app/#/partner?sendUserId=aaa’
이렇게 #을 넣고 hash url로 접근하면 링크는 카카오톡에서도 잘 작동하는데 PartnerAgreementScreen가 아닌 그냥 기본 SplashScreen 화면이 뜹니다.

원래는 카카오톡에서 hash url로도 작동이 안되었어서 딥링크를 연결하는 웹의 index.html에 아래와 같이 코드를 넣어 외부 창을 띄우도록 했습니다.

<script type="text/javascript" charset="UTF-8">
  var inappdeny_exec_vanillajs = (callback) => {
    if (document.readyState !== "loading") {
      callback();
    } else {
      document.addEventListener("DOMContentLoaded", callback);
    }
  };
  inappdeny_exec_vanillajs(() => {
    /* Do things after DOM has fully loaded */
    function copytoclipboard(val) {
      var t = document.createElement("textarea");
      document.body.appendChild(t);
      t.value = val;
      t.select();
      document.execCommand("copy");
      document.body.removeChild(t);
    }
    function inappbrowserout() {
      copytoclipboard(window.location.href);
      alert(
        'URL주소가 복사되었습니다.\n\nSafari가 열리면 주소창을 길게 터치한 뒤, "붙여놓기 및 이동"를 누르면 정상적으로 이용하실 수 있습니다.'
      );
      location.href = "x-web-search://?";
    }

    var useragt = navigator.userAgent.toLowerCase();
    var target_url = location.href;

    if (useragt.match(/kakaotalk/i)) {
      //카카오톡 외부브라우저로 호출
      location.href =
        "kakaotalk://web/openExternal?url=" + encodeURIComponent(target_url);
    } else if (useragt.match(/line/i)) {
      //라인 외부브라우저로 호출
      if (target_url.indexOf("?") !== -1) {
        location.href = target_url + "&openExternalBrowser=1";
      } else {
        location.href = target_url + "?openExternalBrowser=1";
      }
    } else if (
      useragt.match(
        /inapp|naver|snapchat|wirtschaftswoche|thunderbird|instagram|everytimeapp|whatsApp|electron|wadiz|aliapp|zumapp|iphone(.*)whale|android(.*)whale|kakaostory|band|twitter|DaumApps|DaumDevice\/mobile|FB_IAB|FB4A|FBAN|FBIOS|FBSS|trill|SamsungBrowser\/[^1]/i
      )
    ) {
      //그외 다른 인앱들
      if (useragt.match(/iphone|ipad|ipod/i)) {
        //아이폰은 강제로 사파리를 실행할 수 없다 ㅠㅠ
        //모바일대응뷰포트강제설정
        var mobile = document.createElement("meta");
        mobile.name = "viewport";
        mobile.content =
          "width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, minimal-ui";
        document.getElementsByTagName("head")[0].appendChild(mobile);
        //노토산스폰트강제설정
        var fonts = document.createElement("link");
        fonts.href =
          "https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap";
        document.getElementsByTagName("head")[0].appendChild(fonts);
        document.body.innerHTML =
          "<style>body{margin:0;padding:0;font-family: 'Noto Sans KR', sans-serif;overflow: hidden;height: 100%;}</style><h2 style='padding-top:50px; text-align:center;font-family: 'Noto Sans KR', sans-serif;'>인앱브라우저 호환문제로 인해<br />Safari로 접속해야합니다.</h2><article style='text-align:center; font-size:17px; word-break:keep-all;color:#999;'>아래 버튼을 눌러 Safari를 실행해주세요<br />Safari가 열리면, 주소창을 길게 터치한 뒤,<br />'붙여놓기 및 이동'을 누르면<br />정상적으로 이용할 수 있습니다.<br /><br /><button onclick='inappbrowserout();' style='min-width:180px;margin-top:10px;height:54px;font-weight: 700;background-color:#31408E;color:#fff;border-radius: 4px;font-size:17px;border:0;'>Safari로 열기</button></article><img style='width:70%;margin:50px 15% 0 15%' src='https://tistory3.daumcdn.net/tistory/1893869/skin/images/inappbrowserout.jpeg' />";
      } else {
        //안드로이드는 Chrome이 설치되어있음으로 강제로 스킴실행한다.
        location.href =
          "intent://" +
          target_url.replace(/https?:\/\//i, "") +
          "#Intent;scheme=http;package=com.android.chrome;end";
      }
    }
  });
</script>

그럼에도 https://partner-deeplink.netlify.app/partner?sendUserId=aaa 랑크에는 아무런 반응이 없네요ㅠ
카카오톡 데벨로퍼스의 플랫폼 Web에 사이트 도메인에도 잘 연결해주었습니다.

처음에는 깃허브로 배포했었는데 딥링크는 path url로 작동하는데 깃허브가 hash url이 아니면 오류가 떨어지는 것 같아서 netlify로 배포툴을 바꾸었음에도 카카오톡에서만 동일하게 작동 안하나는 걸로 보아서는 배포툴의 문제라기보단 카카오톡에서 무언가 작동을 막는 것 같습니다,

카카오톡에서만 해당 링크가 작동되지 않는 이유가 무엇일까요?
그리고 어떻게 해결하면 될지 도움 부탁드립니다…

2

안녕하세요.

ro_goute에서 Custom URL Scheme을 모두 점유 처리하여 발생하는 문제로
해결을 위해서는 아래 답변 참고 부탁드립니다.

3

@woody.ho
저도 이전에 카카오톡 로그인 관련해서 해당 포스트를 보고 도움을 받았었는데 같이 이슈인지 그리고 해결책이 명확하지가 않아 도움 요청 드립니다.

해당 포스트는 ios에서 FlutterDeepLingEnabled를 True로 설정할 때 이슈가 있었던 것으로 기억하는데 저는 현재 안드로이드 문제를 보고 있습니다.
그리고 해당 링크가 다른 노트에서는 잘 열리는데 카카오톡에서만 작동이 안 되는데 이게 다른 패키지 영향일 가능성도 있는건가요?

댓글 중에 아래의 해결책도 있는데 저는 현재 url에서 sendUserId 값을 받아와야하는데 kakao에서 redirect 했던 url은 기존 url 이 아니었던 걸로 기억합니다.

final GoRouter router = GoRouter(
  routes: <RouteBase>[
    // 생략
  ],
  redirect: (BuildContext context, GoRouterState state) {
    // 생략
    
    final uri = state.uri;

    // kakao${app_key}://kakaolink과 같은  Custom URL Scheme도 있으므로 uri.authority까지 체크 필요
    if (uri.scheme.contains('kakao') && uri.authority == 'oauth') {
      return '${카카오톡 로그인을 실행한 페이지}';
    }

    // 생략
  },
);

카카오톡으로 실행할 때의 문제고 카카오톡 에서 로그인 할 때 보내는 url을 go router가 가로채는게 아니고 유저가 기입한 url인데 이게 카카오톡에서만 이상하게 작동되는게 같은 문제인지 모르겠습니다 ㅠㅠ

4

앗, 카카오톡에서 URL 접근 시, 오동작 한다는 말씀이군요
제가 이해한게 맞을까요?

5

@woody.ho 네 맞습니다!

6

카카오톡 인앱브라우저가 사용하신 코드에 따라 외부 브라우저를 호출하지만 이는 카카오에서 공식적으로 지원하지 않는 기능입니다.

해당 기능의 오동작에 대해서는 달리 지원하지 않는점 참고 부탁드리며
이와 별개로 앱의 동잘 불가 문제는 Digital Asset Links 설정이 원인일 수 있는점 참고 부탁드립니다.

일반 브라우저에서 해당 링크 진입 시, 앱 선택화면이 표시되는지 확인해 보시면 좋을것 같습니다.

7

@woody.ho 외부 브라우저를 호출하지 않으면 딥링크가 아예 호출되지 않는데 이게 일반적인건가요?
말씀드린대로 카카오톡 말고 다른 노트에에서는 딥링크가 정상 작동합니다.
그럴 때 그러면 해결방법은 무엇인가요…ㅠ
카카오톡 외부에서는 모두 정상 작동되는데 아무리 자료를 찾아봐도 나오지 않아서 도움 부탁드립니다ㅠㅠ

8

안드로이드 인앱 브라우저에서 특별히 딥링크 호출을 제한하지 않습니다.

일반적인 모바일 브라우저에서는 Digital Asset Links에 따라 앱 호출이 지원되지만
카카오톡, 페이스북, 인스타그램, 라인 등에서 사용하는 웹뷰는 기본적으로 이러한 기능을 제공하지 않습니다.

따라서 일반적인 상황입니다.

현재 회원님께서 이러한 안드로이드 자체 제한을 우회하기 위해 지원되지 않은 외부 브라우저 호출 스킴을 사용하고 계시지만
이는 공식지원하지 않는 기능으로 언제든지 사용이 제한/종료될 수 있습니다.

이와 별개로 앱의 정상 동작 불가 문제는 Digital Asset Links 설정이나 개발하신 앱에 원인이 있을 수 있는점 참고 부탁드립니다.
예를들어 유튜브, 트위터의 경우 회원님께서 구현중인 내용과 동일하게 intent-filter 처리 되어 있고 정상 동작하는점 참고 부탁드립니다.

유효하지 않은 https 스킴이 포함된 라인을 제거하시거나 Links 설정을 추가 확인해 보시는것을 추천 드리며
개인적으로는 커스텀 스킴을 함께 사용하시는 것을 추천드립니다.

9

@woody.ho 네, 말씀해주셔서 Digital Asset Links 설정 부분 찾아보았는데 sub url 을 사용하고 있는데 이에 대한 처리를 안해주니 404 에러가 나서 창이 안 뜨던 거였습니다. 확인 감사드립니다.

1개의 좋아요