카카오톡 공유하기 ios 에러 나오는 문제

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


안녕하세요

앱 ID 874353 를 사용하고 있는데

현재 flutter inappwebview 를 통하여 하이브리드앱을 구현하였는데

  kakao.Share.sendCustom({
    templateId: customId,
    templateArgs: {
      title: props.title,
      webUrl: props.link,
      mobileWebUrl: props.link
    }
  })


  kakao.Share.sendDefault({
    objectType: props.type,
    content: getContent(props),
    buttons: getButton(props)
  })
}

아래와 같이 공유하기를 하는 경우에 IOS 앱에서 동작을 하지 않고

카카오톡 공유하기 전달하려는 메시지 형식이 올바르지 않습니다

에러 메시지가 나오면서 동작하지 않습니다.

해당문제는 어떻게 해결해야할까요

웹뷰에서 표시하는 사이트를 일반브라우저에서 테스트해보시면 좋을 것같습니다.
로그상 아래와 같은 에러 응답이 전달되었습니다.

등록하지 않은 도메인은 디벨로퍼스 설정에 등록해주시고
메시지 템플릿이 형식에 맞지 않는 부분은 가이드와 예제 참고하셔서 확인 부탁드립니다.

Kakao Developers

{"code":-401,"msg":"domain mismatched! caller=https://ld-front-git-code-onit.vercel.app. check out registered web domains."}
{"code":-2,"msg":"failed to parse parameter. name=template_id, stringToParse=-, paramString=-, paramStringAlias=null"}
{"msg":"failed to parse parameter. name=template_id, stringToParse=-, paramString=-, paramStringAlias=null","code":-2}

웹뷰에서 표시하는 사이트를 safari 에서 했을때는 정상 동작하고 IOS 앱에서만 동작을 하지 않습니다.

{“code”:-401,“msg”:“domain mismatched! caller=https://ld-front-git-code-onit.vercel.app. check out registered web domains.”}
해당 URL 일 떄가 아니라

https://main.tpick.app 해당 url 로 진행을 하였을 때 문제가 발생하였습니다.

  kakao.Share.sendCustom({
    templateId: customId,
    templateArgs: {
      title: props.title,
      webUrl: props.link,
      mobileWebUrl: props.link
    }
  })

위 처럼 sendCustom 을 해줄 때 templateId 와 args 는 해당 피드의 아이디에 존재하는 args 를 똑같이 입력하였고

https://developers.kakao.com/docs/latest/ko/message/js-link#custom-template-msg-custom

해당 url 을 보더라도 어떠한 부분에서 잘못을 하였는지 모르겠습니다.

공유하기 재현 테스트 해볼 수 있는 페이지 URL알려주시겠어요?

IOS 휴대폰에서 어플리케이션 티픽을 다운받은 후 회원가입을 학생으로 진행 후 멘토 페이지에서 멘토를 클릭 후 대화하기를 누르고 충전하기를 누르는 방식으로 해서 부모님꼐 요청하기를 누르면 카카오톡 공유하기가 있는데 해당 경우 발생하지 않는데 복잡할 수 있으니

https://main.tpick.app/app/mentor/125408

해당 URL 을 클릭하면 공유하기 이미지 버튼을 누른 후 공유하기를 누르면 공유하기를 확인할 수 있습니다.

해당 공유하기는

function getContent(props: ShareProps) {
  switch (props.type) {
    case 'feed':
      return {
        title: props.title,
        description: props.description,
        imageUrl: props.imageUrl || '',
        link: {
          mobileWebUrl: props.link,
          webUrl: props.link
        }
      }
    case 'text':
      return {
        text: props.text
      }
  }
}

function getButton(props: ShareProps) {
  switch (props.type) {
    case 'feed':
      return [
        {
          // TODO: title 은 후에 변경 필요
          title: '웹으로 보기',
          link: {
            mobileWebUrl: props.link,
            webUrl: props.link
          }
        }
      ]
    case 'text':
      return null
  }
}


kakao.Share.sendDefault({
    objectType: props.type,
    content: getContent(props),
    buttons: getButton(props)
  })

로 진행 된 것으로 해당 공유하기도 IOS 앱에서만 동작을 하지 않습니다.

IOS 앱스토어 주소입니다.

https://apps.apple.com/kw/app/티픽-내가-목표하는-대학교-선배와-1-1-대화/id6447420719

에러 로그상 도메인 미등록에러가 아닐때는 template_id가 null이라고 나오니 상황에 따른 변수처리에 문제가 있을 것 같아요.

객체 분리 하지 마시고 아래 내용의 메시지 json 부분 하드코딩 하셔서 한번 확인해보시겠어요?

kakao.Share.sendDefault({
    objectType: props.type,
    content: getContent(props),
    buttons: getButton(props)
  })

      kakao.Share.sendCustom({
        templateId: 95375,
        templateArgs: {
          title: '제목입니다.',
          webUrl: 'https://developers.kakao.com/',
          mobileWebUrl: 'https://developers.kakao.com/'
        }
      })


      kakao.Share.sendDefault({
        objectType: 'feed',
        content: {
          title: '카카오공유하기 시 타이틀',
          description: '카카오공유하기 시 설명',
          imageUrl: '',
          link: {
            mobileWebUrl: 'https://developers.kakao.com/',
            webUrl: 'https://developers.kakao.com/'
          }
        },
        buttons: [
          {
            title: '웹으로 보기',
            link: {
              mobileWebUrl: 'https://developers.kakao.com/',
              webUrl: 'https://developers.kakao.com/'
            }
          }
        ]
      })

sendCustom 과 sendDefault 를 해줄 때 위의 코드처럼 모두 하드코딩을 하였지만
Flutter 를 이용한 IOS WebView 에서만 똑같은 문제가 발생합니다.

(1) 기재하신 스크립트와 동일하게 iOS 웹뷰를 만들어 테스트 해봤지만 정상 작동하여 재현하지 못했습니다.
(2) 오늘자 로그를 보니 JS SDK에서 전달한 파라메터에 잘못된 값이 추가된 것을 확인했습니다.

  • “template_id”:“95375#Intent;launchFlags=0x14008000;end;”

(3) 웹뷰에서 JS SDK가 카카오 api 호출하는 시점에 개발하신 앱에서 위와같이 전송정보에 개입하여 Request가 훼손되는 것으로 보입니다.

웹뷰 처리부 확인해보시겠어요?