안녕하세요. 카카오싱크 퍼머링크 생성 요청드립니다.
- 카카오싱크 퍼머링크의 서비스 랜딩URL : https://mzigi.com:9090/mzigi/
- 디벨로퍼스 앱과 연결된 카카오톡 채널의 검색용 아이디 : @엠앤와이즈 개발자용
@ish430 안녕하세요 알려주신 검색용 아이디로는 조회되지 않아서요.
디벨로퍼스 앱과 연결된 채널의 검색용 아이디 확인 부탁 드릴게요~
https://business.kakao.com/dashboard 에 가셔서, 아래 네모 표시한 아이디를 알려주시면 되어요~
다시 확인 후 보내드립니다.
디벨로퍼스 앱과 연결된 카카오톡 채널의 검색용 아이디 : @mjexmti0osvfqyu
지금은 그냥 일반 URL로 리다이렉트가 되는데,
퍼머링크 클릭시 바로 카카오싱크 동의창이 열리도록 수정하고 싶습니다.
이런 경우엔, 리다이렉트 페이지 자체 접속이 동의창이 열리도록 저희가 구현하면 될까요?
만약 그런 경우, 어떤 API를 참고하면 좋을까요 ? 답변 부탁드립니다.
- [현재 JavaScript SDK 로그인 구현로직은 적용된 상태 - “카카오계정으로 로그인” 버튼 클릭시 카카오싱크 동의창이 열림]
JavaScript SDK 방식의 경우를 가이드 드립니다.
JavaScript SDK가 import된 페이지(parent window)와 카카오싱크 동의창(child window)이 데이터를
주고 받아야 하기 때문에 JavaScript SDK를 import한 페이지에서 카카오싱크 동의창을 호출해야
합니다.
[좋은 예시]
좋은 사용자 경험을 위해서는 빈 페이지에 SDK를 import하고 카카오싱크 동의창을 호출하는 것을
권장합니다.
[안 좋은 예시]
기존 로그인 페이지를 그대로 사용하면 사용자에게 UI가 잠시 보였다가 이동되기 때문에 사용자
경험이 좋지 않습니다.
위 중 좋은 예시를 기준으로 하신다면
새로운 페이지를 하나 만들면, 그게 서비스URL이 되고.
사용자가 서비스 URL에 진입하면 '싱크 간편가입’이 호출되도록 만들어 두시면 됩니다.
서비스 페이지의 코드 예
-
JavaScript SDK 사용을 위해서 SDK를 import 합니다.
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script> -
아래 코드를 참고하여 개발 후 해당 페이지 URL을 입력하세요.
// 톡 내에서만 싱크 동의창 호출하는 예제Kakao.init(‘APP_KEY’);
if(/KAKAOTALK/i.test(navigator.userAgent)) {
Kakao.Auth.login({
success: function(authObj) {
location.href=${success_login_url}
},
fail: function (error) {
// 사용자가 동의창에서 취소 버튼을 클릭한 경우 대응하는 로직을 구현할 수 있습니다.
location.href=${login_url}
}
});
}
새로운 페이지를 만드셨다면, 퍼머링크 추가로 발급해드릴게요.
안녕하세요. 안내해주신대로 '싱크 간편가입’이 호출되도록 수정 후 URL 전달드립니다.
퍼머링크 재생성 부탁드립니다.
링크 : https://mzigi.com:9090/mzigi/kakao_login.jsp
안녕하세요. 카카오 퍼머링크 생성 관련하여 검색하다가 발견하였습니다.
저도 카카오 싱크 개발 시 Javascript SDK 방식을 사용하여 구현하려고 합니다.
위의 댓글에서 서비스 페이지 코드 예에서 Kakao.Auth.login() 함수를 예시로 보여주셨는데요.
저는 Kakao.Auth.authorize() 기능으로 구현하여 사용 중에 있습니다.
혹시 해당 내용으로도 동일하게 예시 페이지 처럼 빈 페이지를 구성하여 사용 가능할까요?
답변해주시면 감사하겠습니다.
@syhwan2 안녕하세요.
Kakao.Auth.authorize() 기능으로 구현하셨다면 아래와 같이 간단하게 퍼머링크 원본주소 구성하실 수 있습니다.
퍼머링크 랜딩 URL 예시 주소 :
ㄴ https://kauth.kakao.com/oauth/authorize?client_id={REST_API_KEY}&redirect_uri={설정값}&response_type=code
해당 변수 확인 방법
ㄴREST_API_KEY : 내 애플리케이션>앱 설정>요약 정보
ㄴRedirect URI : 디벨로퍼스 > 내 애플리케이션 > 제품 설정 > 카카오 로그인 > Redirect URI
의도적으로 빈페이지를 별도 개발하시려는게 아니라면 위와 같이 설정하셔서 신청 부탁드려요.
안녕하세요. 답변 감사합니다.
제가 Kakao.Auth.authorize() 함수로 구현 시 state 변수 값을 파라미터로 전달받는 용도로 사용하고 있습니다.
redirect uri 로 callback 처리 받을 때 state 변수값을 파라미터로 사용하고 싶으면 신청을 어떻게 해야하나요?
작성해주신 예시 뒤에 이어서 &state=12345 이런식으로 신청하면 파라미터로 해당 값을 전달 받는 것이 가능한건가요?
@syhwan2
네, 퍼머링크에 state값 전달 가능합니다.
아래와 같이 퍼머링크에 query 파라메터로 state=1 을 인코딩하여 전달하시면
퍼머링크에서 인가코드요청 주소로 state파라메터를 전달해드립니다.
https://pf-link.kakao.com/qr/_HxoZUj/pages/_S?query=state%3D1안녕하세요, 지난번 퍼머링크 적용 관련하여 문의를 드렸는데요.
퍼머링크 발급받은 대상에 state 변수에 파라미터가 전달 되는 것은 확인하였습니다.
혹시 query= 안에 state 외에 다른 파라미터 변수 설정 및 값 전달이 가능한지 문의드립니다.
오프라인 매장별로 코드를 식별하기 위함이고, 파라미터 셋팅을 다음과 같이 해보려고 합니다.
-
파라미터 셋팅 대상
state = KakaoPermaLink
shopcd = 12345 -
url 설정 예시
https://pf-link.kakao.com/qr/_HxoZUj/pages/_S?query=state%3dKakaoPermaLink%26shopcd%3d12345
이러한 셋팅이 가능한지 확인을 부탁드립니다.
감사합니다.
안녕하세요.
state 파라미터로 값을 전달하는 것은 가능하지만, 전달하실 때 인코딩 주의 부탁드립니다.
query=state%3dKakaoPermaLink%26shopcd%3d12345
위 값이 추출되어 디코딩 될 때, 아래 처럼 변환됩니다.
state=KakaoPermaLink&shopcd=12345
&shopcd=12345 부분은 state 파라미터에 포함되지 않기 때문에 로그인 이후 제거 됩니다.