Ios 공유하기시 미리보기 이미지 안보이는 이슈

IBK카드플랫폼3837 · 12월 20, 2024, 12:44오전

문의 시, 관련 URL 또는 디벨로퍼스 앱ID를 알려주세요.

안녕하세요.

ios 에서 카톡 공유하기시 미리보기 이미지가 안보이고 있습니다.

아이디 : 1128797
호출 함수 : ShareApi.shared.shareDefault

로그 메세지 첨부

“warning_msg” = {
“C.THL[0].TH.THU” = “https://cardapp.ibk.co.kr:9143/imgadm/evnt/img/2024/12/13/YO88-341J-TYEK-NR8K.png. app does not have NONE_KAGE_IMAGE_SUPPORTED permission. get the permission or it will be dropped or changed.”;
};

tim.l · 12월 20, 2024, 1:56오전

안녕하세요.

카카오 측에서 이미지 섬네일 생성을 위해 접근할때 운영하시는 시스템에서 차단하는 것으로 보입니다.
(참고로 기재하신 워닝 메시지는 외부 참조 이미지는 섬네일 생성하여 캐시된다는 내용으로 이미지 표시안되는 것과 무관합니다.)

이미지 섬네일 생성을 위해 접근하는 서버의 IP 대역은 상황에 따라 변경될 수 있습니다.

스크랩 방식 카카오톡 공유하기 또는 카카오톡 URL 미리보기 이용자에게 공유용으로 사용되므로
ACL로 접근 제어 하지 않고, 별도 CDN 서버로 이미지에 접근 가능하도록 제공 부탁드립니다.
이미지에 개인정보나 민감정보가 있다면 미리보기가 아닌 사이트내 컨텐츠로 제공해주시기 바랍니다.

또는

이미지 업로드하기로 업로드된 이미지를 메시지에 사용하시면 좋을 것 같습니다.
https://developers.kakao.com/docs/latest/ko/message/ios-link#upload-image

IBK카드플랫폼3837 · 12월 24, 2024, 8:44오전

안녕하세요. 먼저 문의를 드렸었는데요.

카카오톡 공유하기 기능을 구현하고 있는데, 실제 썸네일 이미지가 보이지 않습니다.
여러가지 테스트(방확벽 오픈, 포트 변경 등)를 수행해보았지만,
카카오톡 썸네일 서버를 통한 이미지만 보이지 않는 현상이 있어서
아래 URL이 정상적으로 열리는지 확인 요청 드립니다.

ㅇ카카오톡 쎰네일 서버에서 아래 URL 호출시 상태 확인 요청 드립니다.
https://cardapp.ibk.co.kr:9143/images/share/img_day_point.png
https://cardapp.ibk.co.kr:9143/imgadm/evnt/img/2024/12/13/YO88-341J-TYEK-NR8K.png

woody.ho · 12월 24, 2024, 9:09오전

안녕하세요.

재현 방법 부탁드립니다.
해당 이미지에는 정상 접근 가능한 것으로 확인하였습니다.

IBK카드플랫폼3837 · 12월 24, 2024, 9:20오전

샘플 코드 전달 드립니다.

let contents = "이벤트 페이지 이동. https://cardapp.ibk.co.kr:9143/images/share/img_day_point.png"
        let imgUrl = URL(string: "https://cardapp.ibk.co.kr/images/share/img_day_point.png")!
        let linkUrl = URL(string: "/#/card/cardmain")!
        
        if ShareApi.isKakaoTalkSharingAvailable() {
            
            let appLink = Link(androidExecutionParams: params, iosExecutionParams: params)
            let button = Button(title: "자세히 보기", link: appLink)
            let content = Content(title: contents, imageUrl: imgUrl, link: appLink)
            let template = FeedTemplate(content: content, buttons: [button])
            if let templateJsonData = (try? SdkJSONEncoder.custom.encode(template)) {
                
                //생성한 메시지 템플릿 객체를 jsonObject로 변환
                if let templateJsonObject = SdkUtils.toJsonObject(templateJsonData) {
                    ShareApi.shared.shareDefault(templateObject:templateJsonObject) {(linkResult, error) in
                        if let error = error {
                            Log("error : \(error)")
                        } else {
                            guard let linkResult = linkResult else { return }
                            UIApplication.shared.open(linkResult.url, options: [:], completionHandler: nil)
                        }
                    }
                }
            }
            
        }

스크린샷 첨부

확인 부탁 드리겠습니다.

woody.ho · 12월 24, 2024, 9:24오전

혹시 contents string에 포함된 이미지가 표시되지 않으셔서 문의 주신건가요?

woody.ho · 12월 26, 2024, 1:46오전

안녕하세요.
앞서 말씀주신 주소는 9143 포트가 포함되어 있는 주소입니다.
현재 안된다고 제공해 주신 코드는 포트가 포함되어 있지 않으며 외부 접속 불가한 경로 입니다.

IBK카드플랫폼3837 · 12월 26, 2024, 2:19오전

안녕하세요.

급하게 전달하다 보니 오류가 있었습니다.

샘플 코드 다시 전달 드립니다.

let contents = "[test] 이벤트 페이지 이동 합니다.”
let imgUrl = URL(string: "https://cardapp.ibk.co.kr:9143/images/share/img_event_241223.png")!
let linkUrl = URL(string: "/#/card/cardmain")!
if ShareApi.isKakaoTalkSharingAvailable() {
            
            let appLink = Link(androidExecutionParams: params, iosExecutionParams: params)
            let button = Button(title: "자세히 보기", link: appLink)
            let content = Content(title: contents, imageUrl: imgUrl, link: appLink)
            let template = FeedTemplate(content: content, buttons: [button])
            if let templateJsonData = (try? SdkJSONEncoder.custom.encode(template)) {
                
                //생성한 메시지 템플릿 객체를 jsonObject로 변환
                if let templateJsonObject = SdkUtils.toJsonObject(templateJsonData) {
                    ShareApi.shared.shareDefault(templateObject:templateJsonObject) {(linkResult, error) in
                        if let error = error {
                            Log("error : \(error)")
                        } else {
                            guard let linkResult = linkResult else { return }
                            UIApplication.shared.open(linkResult.url, options: [:], completionHandler: nil)
                        }
                    }
                }
            }
            
        }

imgUrl 변수에
https://cardapp.ibk.co.kr:9143/images/share/img_event_241223.png
https://cardapp.ibk.co.kr:9143/images/share/img_day_point.png
위와 같이 외부에서 접근 가능한 url 설정해도 카톡 미리보기 이미지가 보이지 않습니다.

디버그 로그도 전달 드립니다.

2024-12-26 11:12:40021 [ℹ️][Api.swift 135:29] -> request: 
 method: HTTPMethod(rawValue: "POST")
 url:https://kapi.kakao.com/v2/api/kakaolink/talk/template/default
 headers:Optional(["Authorization": "KakaoAK"])
 parameters: Optional(["link_ver": "4.0", "template_object": "{\"content\":{\"title\":\"[test] 이벤트 페이지 이동 합니다.\",\"link\":{\"android_execution_params\":\"key1=\\/%23\\/card\\/cardmain\",\"ios_execution_params\":\"key1=\\/%23\\/card\\/cardmain\"},\"image_url\":\"https:\\/\\/cardapp.ibk.co.kr:9143\\/images\\/share\\/img_event_241223.png\"},\"object_type\":\"feed\",\"buttons\":[{\"title\":\"자세히 보기\",\"link\":{\"android_execution_params\":\"key1=\\/%23\\/card\\/cardmain\",\"ios_execution_params\":\"key1=\\/%23\\/card\\/cardmain\"}}]}"])

woody.ho · 12월 26, 2024, 3:00오전

네, 외부 접근 가능한점 확인하였습니다.

카카오 스크랩 서버와 회원님 서비스간 접근 가능여부 확인 후 답변 드리겠습니다.

woody.ho · 12월 26, 2024, 5:54오전

번거로우시겠지만, 이미지 서빙하는 서버가 tls1.2 요청에도 응답 가능하도록 구성 부탁드립니다.

카카오톡 URL 미리보기의 경우 tls1.3 까지 지원 가능하지만, 카카오톡 공유하기에 표시되는 이미지를 위한 최적화 서비스는 아직 tls1.2 까지만 지원하고 있습니다.

관련하여 개선될수 있도록 조치중에 있으나 당장의 개선이 어려운점 양해 부탁드립니다.
추가로 1.3의 경우 2019년 이전의 android/iOS의 경우 os가 지원하지 않기에 1.2도 함께 지원하시는 것을 추천드립니다.