카카오싱크 호출 에러

dutlssla321 · 1월 12, 2024, 9:05오전

안녕하세요. 카카오 싱크 호출 관련하여 오류가 있어, 문의 드립니다. 관련 부서가 아니다 보니 조금 이해가 어려울 수 있어, 상세하게 도움 주시면 감사하겠습니다! (_ _)

개발 과정에서 문제가 있을 경우
- 앱 아이디(app ID): 499932
- 호스팅 사: 카페24
- 전달 주신 서비스 URL : https://kauth.kakao.com/oauth/authorize?client_id=485bc280bcb6c8dfca541bd6808f693a&redirect_uri=https%3A%2F%2Fm.physiogel.co.kr%2FApi%2FMember%2FOauth2ClientCallback%2Fkakao%2F&response_type=code

리다이렉션 기능

카카오 인앱에서 쇼핑몰 상품/쿠폰함 랜딩 메시지 발송
상기 메시지 클릭 시, 자동 로그인 후 메인 홈으로 튕김 현상 발생

리다이렉션 기능 작용되지 않아, 설정 희망
혹 앱 통해 추가적으로 리다이렉트 URL 삽입 필요한 부분 있을지 확인 부탁드립니다!

이벤트 페이지 내 간편가입 버튼 통해 카카오 싱크 구현
: 모바일 웹 통해 이벤트 페이지 / 카카오 채널 추가 광고 내 [카카오 간편가입] 유도하는 버튼 삽입 예정
현재) 로그인 페이지로 랜딩
→ 변경 희망) 모바일 웹에서도 카카오 싱크 호출하여 플친 추가&회원가입 함께 진행 희망

전달 주신 하기 링크로 버튼 내 삽입하여 테스트하였으나, 카카오 싱크 호출이 아닌 메일/비밀번호 삽입 필요
이벤트 페이지 뿐만 아니라 간편가입/원클릭 진행 시에도 카카오싱크 구현 희망.
(카카오 인앱에서는 정상 작동 되는 점 확인하였습니다!)
하기 예시에서 HTML 혹은 JAVA 코드 내 카카오싱크 구현 코드가 있는 것 같은데, 추가로 삽입 필요한 부분 있을지 확인 부탁드립니다!
(+ 이벤트 페이지에서도 계속 구현하고 싶어서, 회원가입 페이지 내 HTML 말고도 전체적으로 가능하도록 코드 삽입 필요 할지 확인 부탁드려요)

카카오싱크 호출 예시
: 안다르와 같이 모바일 웹으로 카카오 간편가입 (카카오싱크) 클릭 시, 카카오싱크 창 불러오기 구현

▼ 안다르

로그인 페이지 URL : https://m.andar.co.kr/member/login.html?noMemberOrder&returnUrl=/myshop/index.html
HTML 삽입 코드

<a href="#none" onclick="mappingKaKaoLinkFunc(); MemberAction.kakaosyncLogin('83dfc764a72cb0ef01b8d01c69f7ffab')" class="btn_kakao"><img src="/_wisa/img/member/kakao_btn.svg" alt="">카카오 회원가입/로그인<span class="tooltip_box displaynone" id="tooltip_box"><span class="fontB font_Gilroy">3,000원 할인</span></span></a>

안다르 카카오싱크 구현 화면
전달 주신 카카오싱크 URL : https://kauth.kakao.com/oauth/authorize?client_id=485bc280bcb6c8dfca541bd6808f693a&redirect_uri=https%3A%2F%2Fm.physiogel.co.kr%2FApi%2FMember%2FOauth2ClientCallback%2Fkakao%2F&response_type=code
로그인 페이지 내 카카오 원클릭 HTML
(아직 카카오싱크 URL 삽입X)

<div module="member_login" class="chk_login" data-page='login'>
    <!--@css(/css/module/member/login.css)-->
    <!--
        $defaultReturnUrl = /index.html
        $forbidIpUrl = member/adminFail.html
    -->
    <div class="login">
        <h3>로그인</h3>
        <div class="logBanner"><img src="/ivimg/login_banner.jpg"></div>
        <fieldset>
            <legend>로그인</legend>
            <ul class="snsArea change_img">
                <li>
                    <a href="#none" class="btnKakao {$display_kakao|display}" onclick="{$kakao_func_login}"><img src="/ivimg/k_btn.jpg"></a>
                </li>
        </fieldset>
    </div>
</div>

카카오싱크 링크 삽입한 TEST URL : https://physiogel.co.kr/board/free/read.html?no=83147&board_no=2
상기 URL 모바일 웹으로 클릭 시 구현 화면

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

안녕하세요.

카카오 싱크 mo화면 오류 - woody.ho 님의 게시물 #14

앞서 문의 글로 전달드린 URL은 계정 ID/PW 로그인을 수반하는 REST API 방식의 URL 입니다.
문의 내용 중 퍼머링크 사용 의사를 확인해 주셔서 해당 용도로 안내 드린 URL 입니다.

정황상 카카오톡 내 배너나 QR코드 용도로 퍼머링크가 필요하신게 아닌것으로 보입니다.
따라서, 퍼머링크는 신청하지 않도록 하겠습니다. (필요하시면 다시 말씀 부탁드립니다.)

제공해 드린 URL이 계정 ID/PW 로그인을 수반 하더라도 카카오톡 인앱브라우저 내에서 사용하게 되면 ID/PW 입력 없이 동의 화면이 표시됩니다.

서비스에서 모바일 웹에서 간편 로그인 기능을 원하시는 경우 JS SDK를 사용하셔야 합니다.
다만, 서비스는 카페24 사용하고 계시기에 이를 직접 구현하시기 보단 카페24에서 제공한 기능을 사용하시는 것을 권장드립니다.

안다르 예시와 같이 서비스의 로그인 버튼에 아래 코드를 삽입 후 확인 부탁드립니다.

...
<a href="#none" class="btnKakao {$display_kakao|display}" onclick="MemberAction.kakaosyncLogin('3a3267828b85225018c4fda6d0167a9a')"><img src="/ivimg/k_btn.jpg"></a>
...

다른이야기지만, 본문의 첨부 이미지에 어드민 키가 노출된 이미지를 사용하신점을 발견하였습니다.

어드민키는 앱 키의 종류 중 하나로, 애플리케이션 관리자를 위해 최고 등급의 권한을 인증하는 값입니다.
애플리케이션에 치명적인 영향을 줄 수 있는 기능은 어드민 키를 사용해 호출하도록 되어 있습니다. 따라서 어드민 키 유출 시, 보안 문제가 발생할 수 있으므로 어드민 키를 반드시 재발급 받으시길 권고 드립니다.

dutlssla321 · 1월 12, 2024, 10:15오전

안녕하세요 죄송하지만 혹시 어드민 키 값 재발급 방식 빠르게 안내 주실 수 있을까요?

woody.ho · 1월 12, 2024, 10:42오전

디벨로퍼스 [내 애플리케이션 > 앱 설정 > 앱 키] 메뉴에서 재발급 받으실 수 있습니다.

서비스 이용에 영향을 주지 않기위해 반드시 Admin 키만 재발급 부탁드립니다.

dutlssla321 · 1월 12, 2024, 10:46오전

혹시, 하기 내용도 함께 확인 주시면 감사하겠습니다.

오용 범위
어드민 키 값에 대한 인지가 없다 보니 발생한 이슈인데요.
해당 내용 광고주에게도 안내 필요하여 하기 내용 안내 주시면 감사하겠습니다.

어드민 키 값의 정의
어드민 키 값의 활용 범위 (보안상 발생할 수 있는 이슈)

재발급 시 데이터 관련
앱 키 재발급 시, 서비스 애플리케이션이나 웹 사이트에 적용된 앱 키를 재발급된 값으로 변경 필요한 점 확인했는데요.
혹, 교체 시 데이터 측면에서 사라진다 든지 하는 이슈가 있을지 확인 부탁드립니다.
타인 인지 관련성 문의
조회수 총 5회로 확인이 되는데요. 혹 저희 내부자와 담당자님 외에 조회한 사람을 알 수 있을까요?
내부에서 확인할 수 있는 방법 있을지 확인 부탁드립니다.

woody.ho · 1월 12, 2024, 11:35오전

반드시 어드민 키만 재발급 부탁드립니다.

1. 오용 범위:
어드민키는 앱 키의 종류 중 하나로, 애플리케이션 관리자를 위해 최고 등급의 권한을 인증하는 값입니다.

이 키를 활용하여 디벨로퍼스에서 제공되는 일부 관리자 기능을 사용할 수 있습니다.

예를들어 어드민 키를 활용하면 사용자의 접근토큰 없이 회원번호만으로 사용 가능한 API가 있습니다. 어드민 키와 회원번호가 유출된 경우 제3자가 이들 API를 사용하여 사용자 정보에 접근 할 수도 있습니디.

사용 가능한 API는 디벨로퍼스 문서를 참고 부탁드립니다.

2. 재발급 시 데이터 관련
데이터 관련 이슈 없습니다.
반드시 어드민 키만 재발급 부탁 드립니다.

재발급 받게되면 이전 키는 즉시 사용불가 됩니다.
따라서 다른 키들을 재발급 받게되면 아직 해당 키를 사용중인 기능들은 동작할 수 없게 됩니다.

3. 타인 인지 관련성 문의
데브톡은 공개 커뮤니티로 해당 정보는 알 수 없습니다.

우려하시는 일 대부분은 어드민 키와 회원번호 둘 다 유출되어야만 발생 할 수 있기에 너무 걱정 마시고 현재 그러한 시도도 없기에 단순히 어드민 키만 재발급 받으시면 됩니다.

서비스에서 어드민 키 사용중이신지 확인해 보시고 아니라면 재발급 바로 하시면 됩니다.

dutlssla321 · 1월 12, 2024, 12:18오후

빠르게 확인 주셔서 감사합니다!
광고주 공유 및 재발급 신청 진행 하겠습니다.

전달 주신 코드는 차주 테스트 적용 예정이며,
관련하여 추가적으로 문의 사항 있을 경우, 확인 요청 드리도록 하겠습니다. (_ _)

dutlssla321 · 1월 15, 2024, 6:50오전

안녕하세요. 담당자님, Admin 키 관련하여 추가 문의 드립니다.

사용 가능한 API
: 문서 내 REST/JS/IOS 등 지원 여부가 기재되어 있는데, Admin의 경우 전체 호출이 가능하다고 이해하면 될지 확인 부탁드립니다!

사용자 인증이나 앱 인증 시 필요
애플리케이션 전체 사용자 목록을 불러오는 사용자 목록 가져오게 API가 해당
이외 사용 가능 범위는 문서 참고

현재 사용 범위 위치 확인
: 재발급 신청 & 교체 전 어느 위치(코드)에 해당 값이 실질적으로 활용 & 삽입 되어 있는지 파악이 필요한데요.
저희 내부적으로 인수인계가 명확하게 되어 있지 않다 보니 다소 찾기 어려운 부분이 있어, 해당 키 값을 1)호스팅사 디자인 관리에서 확인해야 할지 혹은 2) 디벨로퍼스로도 확인 가능할지 경로 말씀 주시면 감사하겠습니다!

woody.ho · 1월 15, 2024, 7:20오전

안녕하세요.

1. 전체 API가 아닙니다.
API 문서 내용 중, 요청: 서비스 앱 어드민 키 방식으로 표기된 API를 참고 부탁드립니다.

2. 어드민 앱 키만 재발급 하시면 됩니다.
앞서 안내 드린대로 현재 서비스 앱에서 어드민 앱 키를 사용하고 있지 않습니다.
따라서, 지금 재발급 하셔도 서비스 운영에 영향을 주지 않습니다.

dutlssla321 · 1월 18, 2024, 4:40오전

안녕하세요 담당자님!
일전에 문의 드린 카카오싱크 호출 관련하여 추가 문의 드립니다.

로그인 페이지의 경우, 전달 주신 코드 적용하여 카카오싱크 호출 정상 작동 진행하였는데요.
이벤트 페이지 내에 동일하게 적용했을 때는 작동을 안 하고 있어 문의 드립니다.

작동 희망
이벤트 페이지 내 이미지로 삽입된 1초만에 회원가입하기 클릭 시 [카카오싱크 호출 > 회원가입 진행 후 이벤트페이지로 리다이렉션]로 진행 필요하나, 이벤트페이지에는 싱크 호출이 불가할 경우, REST API를 활용하고자 합니다.
현재 적용된 테스트 코드
1)) 로그인 페이지 내 적용된 코드

<p><a class="btnKakao" href="#none" rmstringonclick="MemberAction.kakaosyncLogin('3a3267828b85225018c4fda6d0167a9a')">카카오 원클릭 로그인</a></p>

2)) REST API URL & 리다이렉션 코드 삽입

<p>
	<a href="https://kauth.kakao.com/oauth/authorize?client_id=3a3267828b85225018c4fda6d0167a9a&redirect_uri=https://physiogel.co.kr/board/free/read.html?no=URLEncoder.encode(“83147&board_no=2”, “UTF-8”)&response_type=code"><img class="fr-fic fr-dii" src="/web/upload/NNEditor/mall3/240111_%20(18).png"></a></p>

문제 상황 : 리다이렉션 문의 글 참고하여 리다이렉션 코드 생성하였음에도 URL이 유실되고 있는 현상
리다이렉트 필요한 URL : https://physiogel.co.kr/board/free/read.html?no=83147&board_no=2

3)) 로그인 페이지 코드 & 이미지

<p>
	<a class="btnKakao {$display_kakao|display}" href="#none" rmstringonclick="MemberAction.kakaosyncLogin('3a3267828b85225018c4fda6d0167a9a')"><img class="fr-fic fr-dii" src="/web/upload/NNEditor/mall3/240111_%20(18).png"></a></p>

추가적으로, 차주 중으로 애드뷰 상품 & 비즈보드 상품 활용하여, 신규회원&친구 이벤트 진행하고자 하는데요.

광고 랜딩 URL은 REST API URL을 활용하면 되는 부분일지
랜딩 URL에도 리다이렉션 링크 달아서 진행해도 괜찮을지 확인 부탁드립니다.

REST API URL : https://kauth.kakao.com/oauth/authorize?client_id=485bc280bcb6c8dfca541bd6808f693a&redirect_uri=https%3A%2F%2Fm.physiogel.co.kr%2FApi%2FMember%2FOauth2ClientCallback%2Fkakao%2F&response_type=code

dutlssla321 · 1월 18, 2024, 6:36오전

앞부분에 덧붙여 마지막에 문의 드린 애드뷰/카카오 랜딩 URL 추가 문의 드립니다.

애드뷰 상품 URL 관련 참고 문서에 기재된 코드 가이드 활용하고자 하는데요.
redirect_url=${리다이렉트 url}에 활용될 url는 애플리케이션의 redirect url에 추가 수정하면 될지도 확인 부탁드립니다!

https://kauth.kakao.com/oauth/authorize?client_id=${3a3267828b85225018c4fda6d0167a9a}&redirect_uri=${https://physiogel.co.kr/board/free/read.html?no=83147&board_no=2}&response_type=code)

woody.ho · 1월 18, 2024, 7:21오전

안녕하세요.

해당 사이트의 우측 상단 로그인 기능 사용 시, L-care Members 로그인 페이지로 이동하고 있습니다.
하지만 현재 문의 주시는 앱 키는 다른 앱인데요

즉, 한 사이트에서 로그인 가능한 앱이 2개가 되는데요 의도된 상황인지 확인 부탁드립니다.

dutlssla321 · 1월 18, 2024, 7:50오전

네네, 해당 부분은 의도한 것으로 현재 문의 건은 피지오겔 비즈니스 채널 활성화로 확인 부탁드립니다!

woody.ho · 1월 18, 2024, 7:53오전

비즈니스 채널 활성화 부분을 잘 이해하지 못하였는데요
어떠한 채널 활성화를 위해 카카오 로그인을 동일 사이트에서 다른 앱 2개로 연결하고자 하시는건가요?

dutlssla321 · 1월 18, 2024, 8:10오전

다른 앱 2개로 연동 진행하는 것에 대해 이슈가 있을까요?!
통합 멤버십 채널로 모수 확보하고자 스위치 과정 중에 있긴 하나,
피지오겔 카카오 채널 활성화도 함께 진행이 필요한 부분이라서요.

이벤트 페이지 내에 카카오싱크는 피지오겔 채널로 연결 예정인 점으로 인지 부탁드립니다.
혹 2개 앱 연동으로 인해 오류가 발생하고 있는 건일지 확인 부탁드립니다!

woody.ho · 1월 18, 2024, 8:24오전

사이트의 로그인과 회원가입에 사용되는 앱이 다르고 회원가입 하더라도 피지오겔에 가입하는 것이 아닌 다른사이트로 이동하기에 사용자의 혼란이 예상됩니다.

일반적이지 않은 상황이라 의도하신게 맞는지 확인차 다시 문의 드렸습니다.

앞서 문의에 이어서 답변 드리자면,

이벤트 페이지는 일반 게시판으로 보이고 이 페이지에서는 카페24에서 제공하는 MemberAction 기능이 포함되어 있지 않은 것으로 보입니다.

MemberAction 기능은 카페24에서 제공하는 부분이라 이 기능 사용 방법 문의는 카페24 고객센터를 통해 문의 부탁드립니다.

만약 불가한 경우 아래 코드처럼 삽입하여 처리하실 수도 있으니 참고 부탁드립니다.

<p>
  <a class="btnKakao" href="#" onclick="startKakaoLogin(); return false;">
    <img class="fr-fic fr-dii" src="/web/upload/NNEditor/mall3/240111_%20(18).png">
  </a>
</p>
<script>
function startKakaoLogin() {
    Kakao.cleanup();
    Kakao.init('3a3267828b85225018c4fda6d0167a9a');
    Kakao.Auth.authorize({
        redirectUri: location.origin + '/Api/Member/Oauth2ClientCallback/kakao/';
    })
}
</script>

아래 URL 사용 부탁드립니다.

https://kauth.kakao.com/oauth/authorize?client_id=3a3267828b85225018c4fda6d0167a9a&redirect_uri=https%3A%2F%2Fm.physiogel.co.kr%2FApi%2FMember%2FOauth2ClientCallback%2Fkakao%2F&response_type=code

dutlssla321 · 1월 18, 2024, 9:32오전

woody.ho:

<script>
function startKakaoLogin() {
    Kakao.cleanup();
    Kakao.init('3a3267828b85225018c4fda6d0167a9a');
    Kakao.Auth.authorize({
        redirectUri: location.origin + '/Api/Member/Oauth2ClientCallback/kakao/';
    })
}
</script>

코드 부분은 일반 게시판 > 게시글에 코드 삽입 시, 이미지 내로 반영이 안되는데

해당 부분은 디자인 편집 내 일반 게시판 상세보기의 공통 html 에 삽입하면 되는 부분일지 확인 부탁드립니다.

추가로, 애드뷰 상품은 저 랜딩 url로 삽입 시, 메인홈으로 리다이렉트 되는 것으로 확인했는데요.
혹 가입 후 바로 관련 이벤트페이지로는 연결되도록 url 구조 수정 불가할지 확인 부탁드립니다!

woody.ho · 1월 18, 2024, 9:54오전

게시글과 같이 입력 가능하시면 같이 입력 부탁드립니다.
보통은 게시글에 이러한 스크립트를 같이 넣지 않는데요 입력 불가한 경우 게시판 공통 html에 넣으시면 좋을것 같습니다.

이어서, 제가 가이드 드리는 내용은 서비스측에서 그동안 개발해 오시던 구성 및 패턴에 맞게 적절한 요소에 삽입하는데만 참고 하셔야 합니다.

따라서, 해당 서비스를 관리하던 웹 개발자를 통해 구축 하시길 권장 드립니다.

추가로, 회원 가입 이후, 이벤트 페이지로 이동은 직접 구현하셔야 하는데요. 카페24에서 제공 불가한 기능으로 알고 있습니다.
이 부분 기능제공 가능여부는 카페24 고객센터를 통해 문의해 보시는게 좋을것 같습니다.