카카오싱크를 이용하여 기존계정 연동 시도시 로그인만 반복 돼요.
기존계정으로 카카오싱크 연동 시도시 로그인만 무한반복 된다면 디자인 확인이 필요해요.
카카오싱크를 이용하여 기존 일반 가입 계정과 연동하려 할 때
[선택한 아이디로 카카오 연동하기] 클릭 후 연동 될 아이디와 비밀번호를 입력하여 로그인 하는 액션이 있어야 최종적으로 연동 완료 돼요.
만약, 로그인 페이지가 반복 된다면
디자인 편집창 > /member/login.html 페이지에 아이디/비밀번호 입력란이 제공 되고 있는지 확인 후
해당 영역이 없다면 입력란이 제공 될 수 있도록 디자인 에이전시를 통해 디자인 수정이 필요해요.
카카오싱크로 회원가입시 이름 항목이 연동되지 않아요.
이름 항목이 연동되지 않는다면 하기 내용 참고 하시어 점검 부탁드려요.
1. 카카오 개발자센터 > 내 애플리케이션 > 카카오 싱크 연동 앱 > 제품 설정 > 카카오 로그인 > 동의 항목에서 프로필 정보 항목이 필수 동의 혹은 선택 동의로 설정 된 상태여야 해요.
- 카카오 개발자센터 [바로가기]
2. 카카오 개발자센터에서의 설정이 정상임에도 연동이 모두 되지않는 경우 세팅 자체가 정상적으로 되지 않았을 가능성이 있어 번거로우시겠지만 카카오 로그인 연동 설정을 사용안함으로 저장 후 > 사용함으로 재설정 부탁드려요.
(재설정시 반드시 처음에 연동 했던 앱을 선택 하셔야 기존 가입 회원들도 정상 로그인 되는 점 필히 유의 부탁드려요.)
3. 위 두가지 사항을 점검 했음에도 조치가 되지않을경우 회원가입시 약관동의 팝업에 프로필 수집에 대한 정보가 노출 되는지 확인 부탁드려요.
카카오싱크 사용시 회원가입 중 이름 항목은 카카오 약관동의 팝업에서 [프로필]로 수집 되며, 만약 회원가입 진행단계에서 프로필 수집에 대한 필수 항목이 노출 되지않는다면 해당 부분은 카카오측으로 문의 및 추가로 당사에서 확인 필요한 사항이 있을 경우 상세 내용과 함께 문의 부탁드려요.
(사양상 카카오 측에 데이터가 등록 되어있지 않거나, 고객이 제공 동의를 하지 않을 경우 정보가 전달 되지 않기 때문에 공란으로 저장 될 수 있어요.)
[필수 점검 사항]
- 카카오 개발자센터의 카카오 로그인 동의 항목에서 프로필 정보 설정 유무 점검
- 회원가입시 약관동의 항목에 필수값인 [프로필 수집]에 대한 항목이 노출 되고있는지 확인 필요
- 회원 전체가 아닌 일부 고객에게 발생되는 증상일 경우 카카오프로필에 제공동의 유무와 공란으로 되어있지 않은지 확인 필요
-위 내용상 이상이 없다면 1차로 카카오 측으로 점검요청 후 당사에서 확인 해야하는 사항이 있다면 카카오측 답변 사항으로 세부 내용 점검 요청 필요.
일시적으로 카카오 로그인을 사용 하실 수 없습니다. 라고 노출 되고있어요.
일시적으로 카카오 로그인을 사용 하실 수 없습니다. 자세한 내용은 관리자에게 문의하세요. 라고 메세지가 나오는 경우 디자인 수정이 필요해요.
카카오 싱크로 변경 후 아래와 같은 메시지가 노출 될 경우 디자인을 수정 한 후 이용 해주셔야해요.
(html,css 파일을 추가한 후 시간이 몇 분 소요 될 수 있어요.)
PC 쇼핑몰 디자인 수정 방법
1) 화면추가 버튼을 클릭 해주세요.
2) CSS 파일을 생성 해주세요.
- 생성 경로 : 상단 리스트에서 CSS > 모듈(module) > 회원(member) 선택
- 파일명 : mapping_login_kakao.css
3) 저장 클릭 후 CSS 입력기가 나오면 아래의 파란색 소스 전체를 추가 해주세요.
/* 카카오싱크 로그인 연동 */ .kakao_login { border:1px solid #d7d5d5; font-family:굴림; text-align:center; } .kakao_login .inner { width:401px; margin:0 auto; padding:0 0 10px; } .kakao_login .summary { margin:0; padding:28px 0 18px; color:#353535; font-size:12px; line-height:15px; font-weight:bold; letter-spacing:-0.4px; } .kakao_login .selectBox { overflow-y:auto; height:238px; margin:0 -12px 20px; padding:8px 5px 5px 10px; border:1px solid #d5d5d5; box-sizing:border-box; text-align:left; } .kakao_login .selectBox ul { margin:0; padding:0; } .kakao_login .selectBox li { padding:2px 0; color:#353535; font-size:12px; line-height:18px; list-style:none; word-break:break-word; } .kakao_login .selectBox li .label { position:relative; display:block; padding:0 0 0 18px; } .kakao_login .selectBox li .label .radio { position:absolute; top:3px; left:0; } .kakao_login .item { margin:0 12px 30px; border-top:1px solid #e9e9e9; } .kakao_login .item:first-child { border-top:0; } .kakao_login .button [class^="btn"] { overflow:hidden; display:block; text-align:center; padding:0 10px; font-size:14px; font-family:굴림; font-weight:bold; line-height:50px; vertical-align:middle; text-decoration:none; white-space:nowrap; border-radius:2px; box-sizing:border-box; cursor:pointer; } .kakao_login .button .btnKakaoSubmit { color:#fff; background-color:#4a5164; } .kakao_login .button .btnKakaoJoin { color:#333; background-color:#ffe500; }
|
4) 화면추가 버튼을 다시 한번 클릭 해주세요.
5) html 파일을 생성 해주세요.
- 생성 경로 : 상단 리스트에서 회원(member) 선택
- 파일명 : mapping_login.html
6) 저장 클릭시 HTML편집기가 나오면 아래의 파란색 소스 전체를 추가 해주세요.
<!--@layout(/layout/basic/layout.html)-->
<!--@css(/css/module/member/mapping_login_kakao.css)-->
<div class="path"> <span>현재 위치</span> <ol> <li><a href="/">홈</a></li> <li title="현재 위치"><strong>카카오싱크 매핑방법 선택 화면</strong></li> </ol> </div>
<div class="titleArea"> <h2>카카오싱크 로그인 연동</h2> </div>
<div module="member_loginMapping"> <div class="kakao_login"> <div class="inner"> <div class="item"> <div class="box"> <p class="summary">{$provider_member_email} 로 가입된 아이디가 {$member_id_exists_desc}<br>{$mapping_login_kakao_desc} <div class="selectBox {$display_member_id|display}"> <ul> <li><label class="label"><input type="radio" name="login_mapping_info" value="{$member_id}" class="radio"> {$masking_member_id} (가입일 {$regist_date})</label></li> <li><label class="label"><input type="radio" name="login_mapping_info" value="{$member_id}" class="radio"> {$masking_member_id} (가입일 {$regist_date})</label></li> <li><label class="label"><input type="radio" name="login_mapping_info" value="{$member_id}" class="radio"> {$masking_member_id} (가입일 {$regist_date})</label></li> <li><label class="label"><input type="radio" name="login_mapping_info" value="{$member_id}" class="radio"> {$masking_member_id} (가입일 {$regist_date})</label></li> </ul> </div> </div> <div class="button"> <a href="#none" onclick="{$kakao_func_login_checked_mapping}" class="btnKakaoSubmit {$display_member_id|display}">선택한 아이디로 카카오 연동하기</a> </div> </div> <div class="item"> <p class="summary">사용 중인 아이디가 리스트에 표시되지 않나요?<br>직접 로그인하고 카카오계정을 연동해보세요.</p> <div class="button"> <a href="#none" onclick="{$kakao_func_login_mapping}" class="btnKakaoSubmit">로그인하고 카카오 연동하기</a> </div> </div> <div class="item"> <p class="summary">아직 회원이 아니라면 원클릭으로 가입하세요.</p> <div class="button"> <a href="#none" onclick="{$kakao_func_login}" class="btnKakaoJoin">카카오계정으로 신규 가입하기</a> </div> </div> </div> </div> </div>
|
모바일 쇼핑몰 디자인 수정 방법
1) 화면추가 버튼을 클릭해주세요.
2) CSS 파일을 생성 해주세요.
- 생성 경로 : 상단 리스트에서 CSS > 모듈(module) > 회원(member) 선택
- 파일명 : mapping_login_kakao.css
3) 아래의 파란색 소스 전체를 추가 해주세요.
/* 카카오싱크 로그인 연동 */ .kakao_login { padding:15px 7px 0; font-family:"맑은 고딕"; } .kakao_login .summary { margin:0; padding:17px 0 12px; color:#3a3a3a; font-size:11px; line-height:15px; font-weight:bold; letter-spacing:-0.5px; } .kakao_login .box .summary { padding:10px 0 13px; } .kakao_login .selectBox { overflow-y:auto; height:270px; padding:9px 14px 9px 14px; border:1px solid #ececec; border-radius:2px; box-sizing:border-box; } .kakao_login .selectBox li { padding:5px 0; color:#353535; font-size:11px; line-height:15px; word-break:break-word; } .kakao_login .selectBox li .label { position:relative; display:block; min-height:15px; margin:0; padding:0 0 0 25px; color:#3a3a3a; font-size:11px; line-height:15px; cursor:pointer; letter-spacing:-0.4px; } .kakao_login .selectBox li .label .radio { position:absolute; top:1px; left:0; width:15px; height:15px; margin:0; border:0; border-radius:50%; background:url("//img.echosting.cafe24.com/skin/mobile_ko_KR/layout/bg_radio.png") no-repeat 0 0; background-size:15px 15px; -webkit-appearance:none; outline-style:none; } .kakao_login .selectBox li .label .radio:checked { background-image:url("//img.echosting.cafe24.com/skin/mobile_ko_KR/layout/bg_radio_checked.png"); -webkit-appearance:none; } .kakao_login .item { margin:0 7px 20px; border-top:1px solid #e9e9e9; } .kakao_login .item:first-child { border-top:0; } .kakao_login .item .box { margin:0 0 14px; padding:0 12px 15px; border:1px solid #d5d5d5; } .kakao_login .button [class^="btn"] { overflow:hidden; display:block; height:33px; padding:0 10px; font-size:13px; font-family:맑은 고딕; font-weight:bold; line-height:31px; text-align:center; vertical-align:middle; text-decoration:none; white-space:nowrap; border-radius:5px; box-sizing:border-box; cursor:pointer; } .kakao_login .button .btnKakaoSubmit { color:#fefeff; background-color:#4a5164; } .kakao_login .button .btnKakaoJoin { color:#010101; background-color:#ffe500; }
|
4) 화면추가 버튼을 다시 한번 클릭 해주세요.
5) html 파일을 생성 해주세요.
- 생성 경로 : 상단 리스트에서 회원(member) 선택
- 파일명 : mapping_login.html
6) 아래의 파란색 소스 전체를 추가 해주세요.
<!--@layout(/layout/basic/layout.html)-->
<!--@css(/css/module/member/mapping_login_kakao.css)-->
<div module="member_loginMapping"> <div class="kakao_login"> <div class="inner"> <div class="item"> <div class="box"> <p class="summary">{$provider_member_email} 로 가입된 아이디가 {$member_id_exists_desc}<br>{$mapping_login_kakao_desc} <div class="selectBox {$display_member_id|display}"> <ul> <li><label class="label"><input type="radio" name="login_mapping_info" value="{$member_id}" class="radio"> {$masking_member_id} (가입일 {$regist_date})</label></li> <li><label class="label"><input type="radio" name="login_mapping_info" value="{$member_id}" class="radio"> {$masking_member_id} (가입일 {$regist_date})</label></li> <li><label class="label"><input type="radio" name="login_mapping_info" value="{$member_id}" class="radio"> {$masking_member_id} (가입일 {$regist_date})</label></li> <li><label class="label"><input type="radio" name="login_mapping_info" value="{$member_id}" class="radio"> {$masking_member_id} (가입일 {$regist_date})</label></li> </ul> </div> </div> <div class="button"> <a href="#none" onclick="{$kakao_func_login_checked_mapping}" class="btnKakaoSubmit {$display_member_id|display}">선택한 아이디로 카카오 연동하기</a> </div> </div> <div class="item"> <p class="summary">사용 중인 아이디가 리스트에 표시되지 않나요?<br />직접 로그인하고 카카오계정을 연동해보세요.</p> <div class="button"> <a href="#none" onclick="{$kakao_func_login_mapping}" class="btnKakaoSubmit">로그인하고 카카오 연동하기</a> </div> </div> <div class="item"> <p class="summary">아직 회원이 아니라면 원클릭으로 가입하세요.</p> <div class="button"> <a href="#none" onclick="{$kakao_func_login}" class="btnKakaoJoin">카카오계정으로 신규 가입하기</a> </div> </div> </div> </div> </div>
|