휴대폰 인증 서비스 사용자 매뉴얼img.cafe24.com/images/ec_admin/etc/phone_confrm... ·...

휴대폰 인증 서비스

사용자 매뉴얼

목차

2

1. 서비스 소개 및 신청

1) 휴대폰 인증 서비스란?

2) 휴대폰 인증 서비스 장점

3) 서비스 신청하기

2. 디자인 설정

1) 회원가입 페이지에 적용

2) 아이디, 비밀번호 찾기 페이지에 적용

3) 14세 미만 비회원 구매 제한 팝업에 적용

4) 성인인증 페이지에 적용


3

1) 휴대폰 인증 서비스란?

휴대폰 인증 서비스는 본인명의의 휴대폰을 사용하여 본인확인을 가능하게 해주는 서비스로써, 휴대폰을 소유한 개인은 누구든지 간편하게 인증을 진행할 수 있습니다.

2) 휴대폰 인증 서비스 장점

인증진행이 간편하고 인증율이 높습니다. 휴대폰 인증은 누구나 소유하고 있는 휴대폰을 이용한 인증 수단이기에 인증자가 부담 없이 인증을 진행할 수 있다는 것이 가장 큰 장점입니다. 중복가입 방지가 가능합니다. 휴대폰 인증 시에 본인확인 기관에서 보내주는 정보에는 중복확인을 체크하는 값이 포함되어 있어, 개인의 중복가입을 방지할 수 있습니다. 신뢰할 수 있는 마케팅 정보를 얻을 수 있습니다. 휴대폰 인증 후 본인확인 기관에서 보내주는 정보에 인증자의 이름/나이/성별/생년월일과 같은 마케팅에 도움을 줄 수 있는 정보가 포함되어 있습니다. 법적 제재에서 벗어날 수 있습니다. 휴대폰 인증 서비스는 개인정보를 입력 받는 것이 아니기 때문에 개인정보 보호법을 준수할 수 있도록 도와줄 뿐만 아니라, 청소년 보호법에 의한 14세 미만/19세 미만 회원가입 및 구매제한 법률로부터 쇼핑몰을 안전하게 지켜줍니다.


4

3) 서비스 신청하기

휴대폰 인증 서비스는 유료 부가서비스이므로, 별도 신청 및 결제가 완료되어야 쇼핑몰에 적용할 수 있습니다. 휴대폰 인증은 부가서비스 메뉴에서 신청할 수 있습니다.

▼ 위치: 부가서비스 > 운영지원 서비스 > 휴대폰인증 서비스 > 서비스신청

2. 디자인 설정

5

1) 회원가입 페이지에 적용

다음 순서에 따라 설정 및 디자인 수정을 해야 적용됩니다. ① 휴대폰 인증 사용 설정 휴대폰 인증 신청 및 심사승인이 완료되어 사용 가능한 상태가 되면, 아래 화면과 같이 ‘서비스 신청 상태가’ 가 ON으로 표시됩니다. 사용 설정 항목에서 본인인증 사용함 선택 및 휴대폰 인증에 체크합니다. (이 설정은 회원가입, 아이디/비밀번호 찾기 페이지에 공통으로 적용됩니다.)

▼ 위치: 상점/운영 > 상점운영 관련설정 > 본인인증 서비스 설정

2. 디자인 설정

6

② html 디자인 수정 > 회원가입 페이지 다음과 같이 회원가입 페이지에 관련 소스를 추가합니다.

<input type='hidden' name='NameAuthUseFlag' id='NameAuthUseFlag' value='{{$bNameAuth}}' />  <input type='hidden' name='IpinAuthUseFlag' id='IpinAuthUseFlag' value='{{$bIpinAuth}}' />  <input type='hidden' name='MobileAuthUseFlag' id='MobileAuthUseFlag' value='{{$bMobileAuth}}' />  <input type='hidden' name='passwd_type' id='passwd_type' value='{{$passwd_type}}' />  ====생략====  <tr style="display:{{$ssn_display}}" id='dPersonalSSN'> <td height=10 align="center" bgcolor="{{$tab_array.c_3.th_bgcolor}}" width="127" class="txt_pro">주민등록번호</td> <td height=10 bgcolor="{{$tab_array.c_3.td_bgcolor}}" width="510"> {{if $bIpinJoin === true}} 아이핀 인증 회원 <input type='hidden' name='IpinJoinFlag' id='IpinJoinFlag' value='{{$bIpinJoin}}' />  {{elseif $bMobileAuthJoin === true}} 휴대폰 인증 회원 <input type='hidden' name='MobileAuthJoinFlag' id='MobileAuthJoinFlag' value='{{$bMobileAuthJoin}}' />  {{else}} <input type=text size=10 name="ssn1" id="ssn1" value="{{$ssn1}}" {{$ssn_readonly}} class="input01" maxlength=6> - <input type=password size=10 name="ssn2" value="{{$ssn2}}" {{$ssn_readonly}} class="input01" maxlength=7> {{if $bNameAuthBt === true}} <img src='{{$img_array.c_3.15.url}}' onclick="javascript:window_open( 'http://{{$server_name}}/front/php/name_auth_f.php?'+'form=frm&ssn1=ssn1&ssn2=ssn2&name=name', 'name_auth' ,100, 170, 436, 248 )" style="cursor:pointer">{{/if}} {{/if}}  {{$auth_agreement_check}} </td> </tr>  ====생략==== {{/literal}} {{$AuthFormInit}} setAuthType(); </script>

▼ 위치: HTML 디자인설정 > 회원가입/수정 > 회원가입/ 수정 입력폼 (c_3)

<input type='hidden' name='IpinBirthday' id='IpinBirthday' /> {{* 아이핀 API가 리턴해준 생일 *}} <input type='hidden' name='IpinGender' id='IpinGender' /> {{* 아이핀 API가 리턴해준 성별 *}} <input type='hidden' name='MobileauthBirthday' id='MobileauthBirthday' /> {{* 휴대폰 인증 리턴값 *}} <input type='hidden' name='MobileauthGender' id='MobileauthGender' /> <input type='hidden' name='Mobileauth_di_key' id='Mobileauth_di_key' /> ====생략==== <tr id="PersonalAuth"> <td bgcolor="#F6F6F6" style="text-align: center;">회원인증</td> <td bgcolor="#FFFFFF"> {{$c_3_u24}} {{$c_3_u25}} {{$c_3_u26}} {{$c_3_u31}} {{$c_3_u27}} {{$c_3_u28}} 

▼ 위치: HTML 디자인설정 > 회원가입/수정 > 회원가입/ 수정 입력폼 (c_3) > 회원정보(c_3_u22)

추가

2. 디자인 설정

7

{{* $bNameAuth : 실명인증 서비스 이용 여부 - 상점/운영 - 상점운영관련설정 - 실명인증 서비스 설정에서 변경가능합니다. $bIpinAuth : 아이핀 서비스 이용 여부 - 상점/운영 - 상점운영관련설정 - 실명인증 서비스 설정에서 변경가능합니다. $bMobileAuth : 휴대폰 인증 서비스 이용 여부 - 상점/운영 - 상점운영관련설정 - 실명인증 서비스 설정에서 변경가능합니다. *}}  <div id="NameAuthType"> {{if $bNameAuth === true}} <input type="radio" name="MemNameAuthType" id="MemNameAuthType1" value="1" checked="checked" onclick="NameAuthDisp();"> <label for="MemNameAuthType1">실명인증</label> {{/if}} {{if $bIpinAuth === true}} <input type="radio" name="MemNameAuthType" id="MemNameAuthType2" value="2" checked="checked" onclick="NameAuthDisp();"> <label for="MemNameAuthType2">아이핀</label> {{/if}} {{if $bMobileAuth === true}} <input type="radio" name="MemNameAuthType" id="MemNameAuthType3" value="3" checked="checked" onclick="NameAuthDisp(); setAuthType();"> <label for="MemNameAuthType3">휴대폰 인증</label> {{/if}} </div> 

▼ 위치: HTML 디자인설정 > 회원가입/수정 > 회원가입/ 수정 입력폼 (c_3) > 개인인증관련(c_3_u24)

▼ 위치: HTML 디자인설정 > 회원가입/수정 > 회원가입/ 수정 입력폼 (c_3) > 아이핀인증(c_3_u26)

 {{if $bNameAuth !== true && $bIpinAuth === true && $bMobileAuth !== true}} <div id="NameAuthIpin"> {{else}} <div id="NameAuthIpin" style="display: none;"> {{/if}} <div style="padding: 10px;"><a href="#:none" ><img border="0" src="http://img.cafe24.com/images/ec_hosting/front/btn_ipin.gif" onclick="IpinPopup();"></a></div> <div>아이핀이란, 회원님의 개인정보 보호를 위해 웹사이트에 주민등록번호를 제공하지 않고 본인임을 확인하는 인터넷상의 개인식별번호 서비스입니다.<br/>아이핀을 통한 가입을 원하시면 아이핀 인증 버튼을 눌러 진행해 주십시오.</div> </div> <input type="hidden" name="ipin_returnUrl" id="ipin_returnUrl" value="{{$IpinReturnUrl}}"/> <input type="hidden" name="mallId" id="mallId" value="{{$mallId}}"/> <input type="hidden" name="version" id="version" value="shop20"/> 

추가

2. 디자인 설정

8

 {{if $bNameAuth !== true && $bIpinAuth !== true && $bMobileAuth === true}} <div id="NameAuthMobile"> {{else}} <div id="NameAuthMobile" style="display: none;"> {{/if}} <div style="padding: 10px;"><a href="#:none" ><img border="0" src="http://img.echosting.cafe24.com/admin/btn_check_phone2.gif" onclick="MobileAuthPopup();"></a></div> <div>본인 명의의 휴대폰으로 본인인증을 진행합니다.</div> </div> <input type='hidden' name='authModule' id='authModule' value='{{$authModule}}'/>  <input type='hidden' name='authType' id='authType' value='' />  <input type='hidden' name='mallVersion' id='mallVersion' value='shop20' />  <input type='hidden' name='returnUrl' id='returnUrl' value='{{$mobileReturnUrl}}' />  

▼ 위치: HTML 디자인설정 > 회원가입/수정 > 회원가입/ 수정 입력폼 (c_3) > 휴대폰인증(c_3_u31) 추가

{{* 휴대폰 인증 결과 화면 아래의 폼에 쓰인 필드들의 이름(name/id)과 하단에 스크립트를 삭제하지 마세요. *}} <input type="hidden" id="MobileauthResult" name="MobileauthResult" value="{{$MobileauthResult}}"/> <input type="hidden" id="mode" name="mode" value="{{$mode}}"/>  <input type="hidden" id="MobileauthName" name="MobileauthName" value="{{$MobileauthName}}"/> <input type="hidden" id="MemId" name="MemId" value="{{$MemId}}"/> <input type="hidden" id="MobileauthBirthday" name="MobileauthBirthday" value="{{$MobileauthBirthday}}"/> <input type="hidden" id="MobileauthGender" name="MobilauthGender" value="{{$MobileauthGender}}"/> <input type="hidden" id="MobileauthDiKey" name="MobileauthDiKey" value="{{$MobileauthDiKey}}"/>  <input type="hidden" id="ResultMsg" name="ResultMsg" value="{{$ResultMsg}}"/> <input type="hidden" id="JoinLimitDay" name="JoinLimitDay" value="{{$JoinLimitDay}}"/> <input type="hidden" id="QuitDate" name="QuitDate" value="{{$QuitDate}}"/> <script> init(); </script>

▼ 위치: HTML 디자인설정 > 회원관련화면 > 휴대폰인증 결과 페이지 > 휴대폰인증 결과(c_1)

*주의 위의 휴대폰인증(c_3_u31) 페이지, 휴대폰인증 결과(c_1) 페이지는 이번 휴대폰인증 추가 작업으로 새롭게 추가된 페이지로써 반드시 [편집완료 저장하기] 를 1회 진행해 주셔야 휴대폰인증이 정상 작동합니다.

2. 디자인 설정

9

▼ 회원가입 페이지에 휴대폰 인증 적용된 화면

2. 디자인 설정

10

② html 디자인 수정 > 아이디 찾기 페이지 다음과 같이 아이디 찾기 페이지에 휴대폰 인증 관련 소스를 추가/수정합니다.

<td>가입하신 방법에 따라 아이디 찾기가 가능합니다.<br/> 법인사업자 회원 또는 외국인 회원의 경우 이름/주민등록번호 란에 법인명과 법인번호 또는 이름과 등록번호를 입력해 주세요. </tr> <tr> <td> <form action="./?url=FindidDao" name="idFindForm" id="idFindForm" method="post" onsubmit="return FindIdFormCheck();"> <input type="hidden" name="is_check" id="is_check"/> <input type="hidden" name="mode" id="mode" value="findId"/> <table border="1" cellpadding="5" cellspacing="0" width="100%" style="border-collapse:collapse;" > <col width="120"/> <col/> ====생략==== <input type="radio" name="MemAuthType" id="MemAuthTypeE" value="E" onclick="setDispCheck('E');"/> <label for="MemAuthTypeE">이메일로 찾기</label> <input type="radio" name="MemAuthType" id="MemAuthTypeH" value="H" onclick="setDispCheck('H');"/> <label for="MemAuthTypeH">휴대폰 번호로 찾기</label> {$c_4_u2} {$c_4_u4} </td> </tr> ====생략==== <tr id="trEmailRow"> <td bgcolor="#EFEFEF">이메일</td> <td bgcolor="#FFFFFF"><input type="text" name="email" id="email"/></td> </tr> <tr id="trPhoneRow"> <td bgcolor="#EFEFEF">휴대폰 번호</td> <td bgcolor="#FFFFFF"><input type="text" name="phone" id="phone"/>* 입력시 (-)없이 숫자만 입력하세요.</td> </tr> {$c_4_u3} {$c_4_u5} </table> </form>

▼ 위치: HTML 디자인설정 > 아이디찾기 > new 아이디찾기( c_4 )

2) 아이디, 비밀번호 찾기 페이지에 적용

다음 순서에 따라 설정 및 디자인 수정을 해야 적용됩니다. ① 휴대폰 인증 사용 설정 ‘본인인증 서비스 설정 > 회원가입’ 설정을 본인인증 사용함 선택 및 휴대폰 인증에 체크합니다. 이 설정은 회원가입, 아이디/비밀번호 찾기 페이지에 공통으로 적용됩니다. (5P 참고)

추가

2. 디자인 설정

11

{{* c_4_u4 START*}} <span id="mobileauthRadio"><input type="radio" name="MemAuthType" id="MemAuthTypeM" value="M" onclick="setDispCheck('M');"/> <label for="MemAuthTypeM">휴대폰 인증으로 찾기</label></span> {{* c_4_u4 END *}}

▼ 위치: HTML 디자인설정 > 아이디찾기 > new 아이디찾기( c_4 ) > 휴대폰인증 선택 라디오버튼(c_4_u4)

{{* c_4_u5 START *}} <tr id="trMobileauthRow"> <td bgcolor="#EFEFEF">휴대폰 인증</td> <td bgcolor="#FFFFFF"><a href="#:none" onclick="MobileAuthPopup();"><img src="http://img.echosting.cafe24.com/admin/btn_check_phone2.gif" border="0"/></a><br /> 본인 명의의 휴대폰으로 아이디 찾기를 진행할 수 있습니다.<br > 휴대폰 명의자의 정보로 가입한 아이디 찾기가 가능합니다. </td> </tr> <input type='hidden' name='authModule' id='authModule' value='{{$authModule}}'/>  <input type="hidden" name="authType" id="audthType" value="mobile"/> <input type="hidden" name="returnUrl" id="returnUrl" value="{{$returnUrl}}"/> <input type="hidden" name="mallId" id="mallId" value="{{$mallId}}"/> <input type="hidden" name="mallVersion" id="mallVersion" value="shop20"/> <input type="hidden" name="mobileauth_key" id="mobileauth_key"/> {{* c_4_u5 END *}}

▼ 위치: HTML 디자인설정 > 아이디찾기 > new 아이디찾기( c_4 ) > 휴대폰인증 선택 라디오버튼(c_4_u5)

▼ 아이디 찾기 페이지에 휴대폰 인증 적용된 화면

추가

*주의 위의 휴대폰인증 선택 라디오버튼(c_4_u4) 페이지, 휴대폰인증 선택 라디오버튼(c_4_u5)페이지는 이번 휴대폰인증 추가 작업으로 새롭게 추가된 페이지로써 반드시 [편집완료 저장하기] 를 1회 진행해 주셔야 휴대폰인증이 정상 작동합니다.

2. 디자인 설정

12

③ html 디자인 수정 > 비밀번호 찾기 페이지 다음과 같이 비밀번호 찾기 페이지에 휴대폰 인증 관련 소스를 추가/수정합니다.

<td>가입하신 방법에 따라 비밀번호 찾기가 가능합니다.<br/> 법인사업자 회원 또는 외국인 회원의 경우 이름/주민등록번호 란에 법인병과 법인번호 또는 이름과 등록번호를 입력해 주세요. </td> </tr> <tr> <td> <form action="./?url=PasswdfindDao" name="pwFindForm" id="pwFindForm" method="post" onsubmit="return FindPwFormCheck();"> <input type="hidden" name="mode" id="mode" value="findPw" /> <input type="hidden" name="is_check" id="is_check" value=="{{$is_check}}"/> <input type="hidden" id="search_type" value="{{$search_type}}"/> <table border="1" cellpadding="5" cellspacing="0" width="100%" style="border-collapse:collapse;" > <col width="120"/> <col/> ====생략==== <td bgcolor="#EFEFEF">구분</td> <td bgcolor="#FFFFFF"><input type="radio" checked="checked" name="MemAuthType" id="MemAuthTypeR" value="R" onclick="setDispCheck('R');"/><label for="MemAuthTypeR"><span id="find_ssn">법인등록번호로 찾기</span></label> <input type="radio" name="MemAuthType" id="MemAuthTypeE" value="E" onclick="setDispCheck('E');"/> <label for="MemAuthTypeE">이메일로 찾기</label> <input type="radio" name="MemAuthType" id="MemAuthTypeH" value="H" onclick="setDispCheck('H');"/> <label for="MemAuthTypeH">휴대폰 번호로 찾기</label> {$c_4_u2} {{$c_4_u4}} ====생략==== <tr id="trEmailRow"> <td bgcolor="#EFEFEF">이메일</td> <td bgcolor="#FFFFFF"><input type="text" name="email" id="email"/></td> </tr> <tr id="trPhoneRow"> <td bgcolor="#EFEFEF">휴대폰 번호</td> <td bgcolor="#FFFFFF"><input type="text" name="phone" id="phone"/>* 입력시 (-)없이 숫자만 입력하세요.</td> </tr> {$c_4_u3} {{$c_4_u5}} </table> </form> <div style="padding:10px; text-align: center;"><input type="image" src="{$img_array.c_4.3.url}" onclick="return FindIdFormCheck();"/></div> </td>

▼ 위치: HTML 디자인설정 > 비밀번호찾기 1단계 > new 비밀번호찾기 1단계( c_4 ) 추가

2. 디자인 설정

13

{{* c_4_u4 START*}} <span id="mobileauthRadio"><input type="radio" name="MemAuthType" id="MemAuthTypeM" value="M" onclick="setDispCheck('M');"/> <label for="MemAuthTypeM">휴대폰 인증으로 찾기</label></span> {{* c_4_u4 END *}}

▼ 위치: HTML 디자인설정 > 비밀번호찾기1단계 > new 비밀번호찾기 1단계( c_4 ) > 휴대폰인증 라디오버튼(c_4_u4)

{{* c_4_u5 START *}} <tr id="trMobileauthRow"> <td bgcolor="#EFEFEF">휴대폰 인증</td> <td bgcolor="#FFFFFF"> <a href="#:none" onclick="MobileauthPopup();"><img src="http://img.echosting.cafe24.com/admin/btn_check_phone2.gif" border="0"/></a><br /> 본인 명의의 휴대폰으로 비밀번호 찾기를 진행할 수 있습니다.<br /> 휴대폰 명의자의 정보로 가입한 아이디의 비밀번호 찾기가 가능합니다. </td> </tr> <input type="hidden" name="authModule" id="authModule" value="{{$authModule}}"/> <input type="hidden" name="authType" id="audthType" value="mobile"/> <input type="hidden" name="returnUrl" id="returnUrl" value="{{$ReturnUrl}}"/> <input type="hidden" name="mallId" id="mallId" value="{{$mallId}}"/> <input type="hidden" name="mallVersion" id="mallVersion" value="shop20"/> <input type="hidden" name="mobileauth_key" id="mobileauth_key"/> {{* c_4_u5 END *}}

▼ 위치: HTML 디자인설정 > 비밀번호찾기1단계 > new 비밀번호찾기 1단계( c_4 ) > 휴대폰인증 팝업 호출버튼(c_4_u5)

▼ 비밀번호 찾기 페이지에 휴대폰 인증 적용된 화면

추가

*주의 위의 휴대폰인증 선택 라디오버튼(c_4_u4) 페이지, 휴대폰인증 선택 라디오버튼(c_4_u5)페이지는 이번 휴대폰인증 추가 작업으로 새롭게 추가된 페이지로써 반드시 [편집완료 저장하기] 를 1회 진행해 주셔야 휴대폰인증이 정상 작동합니다.

2. 디자인 설정

14

3) 14세 미만 비회원 구매 제한 팝업에 적용

다음 순서에 따라 설정 및 디자인 수정을 해야 적용됩니다. ① 14세 미만 비회원 구매차단 설정 14세 미만 비회원 구매 차단 설정을 합니다.

▼ 위치: 상점/운영 > 상점운영 관련설정 > 상점운영방식 설정 > 구매권한

② html 디자인 수정 > 14세 미만 비회원 구매 제한 팝업 다음과 같이 소스를 수정합니다. 빨간색으로 표시된 부분은 삭제, 파란색으로 표시된 부분은 추가되어야 할 소스입니다.

▼ 위치: HTML 디자인설정 > 주문관련화면 > 주문전 로그인> ID/Pass입력받는화면 (c_3)

<td>본 쇼핑몰에서는 비회원님도 상품구매가 가능합니다.<br> 단, 비회원 주문시 쇼핑몰에서 제공하는 다양한 회원 혜택에서 제외될 수 있습니다.</td> </tr> <tr> <td align="center"> <a href="/front/php/address.php?basket_type={{$basket_type}}"> <a href="javascript:under14Check('');"> <img src="{{$img_array.c_3.8.url}}" border="0" tabindex=5></a>

삭제 추가

2. 디자인 설정

15

function under14Check(f) {{ var sAuthType = document.getElementById('auth_type').value; if (sAuthType == "N") {{ if (f.ssn1.value =='') {{ alert('주민번호를 입력해주세요'); f.ssn1.focus(); return false }} if (f.ssn2.value =='') {{ alert('주민번호를 입력해주세요'); f.ssn2.focus(); return false }} if( frm.chk_name.value == "" ){{ alert('이름을 입력하세요.') ; f.chk_name.focus() ; return false ; }} if( f.auth_agreement_flag && f.auth_agreement_flag.checked === false ){{ alert('고유식별정보 처리에 동의해 주시기 바랍니다.') ; f.auth_agreement_flag.focus() ; return false ; }} }} else {{ if (f.ipin_key == '') {{ alert('아이핀을 통해 본인 인증을 해주세요.'); return false; }} }} if (sAuthType == "M") {{ if(f.mobileauth_key == '') {{ alert('휴대폰 인증을 통해 본인 인증을 해주세요.'); return false; }} }} else {{ if (f.ipin_key == '') {{ alert('아이핀을 통해 본인 인증을 해주세요.'); return false; }} }} }} function setDisplay(sType) {{ try {{ if(document.getElementById('c_2')) {{ document.getElementById('c_2').style.display = 'none'; }} document.getElementById('c_1').style.display = 'none'; if(sType == 'I') {{ document.getElementById('c_2').style.display = ''; document.getElementById('auth_type').value = 'I'; }} else {{ document.getElementById('c_1').style.display = ''; document.getElementById('auth_type').value = 'N'; }} 다음 페이지에 이어서

▼ 위치: HTML 디자인설정 > 주문관련화면 > 14세미만 비회원 체크

삭제 추가

2. 디자인 설정

16

if (document.getElementById('c_1')) {{ document.getElementById('c_1').style.display = 'none'; }} if(document.getElementById('c_2')) {{ document.getElementById('c_2').style.display = 'none'; }} if(sType == 'I') {{ document.getElementById('c_1').style.display = ''; document.getElementById('auth_type').value = 'I'; }} else if (sType == 'M') {{ document.getElementById('c_2').style.display = ''; document.getElementById('auth_type').value = 'M'; }} }} catch(e) {{ alert(e); }} }} function IpinPopup(sParam) {{ var sOriAction = document.frm.action; var sOriTarget = document.frm.target; window.open('', 'popupIpin','width=448, height=500'); document.frm.target = "popupIpin"; document.frm.action = sParam; document.frm.submit(); document.frm.target = sOriTarget; document.frm.action = sOriAction; }} function MobileauthPopup(sParam) {{ var sOriAction = document.frm.action; var sOriTarget = document.frm.target; if(!document.getElementById('iframe_mobile')) {{ var node = document.createElement('div'); node.id = 'iframe_mobile'; node.innerHTML = '<iframe src="" name="iframe_mobile" id="iframe_mobile" width="0" height="0"></iframe>'; node.style.display = 'none'; document.body.appendChild(node); }} document.frm.target = "iframe_mobile"; document.frm.action = "https://i-pin.cafe24.com/namecheck/echosting/?action=auth"; document.frm.submit(); document.frm.target = sOriTarget; document.frm.action = sOriAction; }} 다음 페이지에 이어서

삭제 추가

2. 디자인 설정

17

function setFormInit() {{ var sType; try {{ // 사용중인 본인인증 수단 여부에 따라 초기 체크값 세팅 1순위 아이핀 2순위 휴대폰 if(document.getElementById('IpinUse').style.display == 'none') {{ if(document.getElementById('MobileauthUse').style.display != 'none') {{ document.getElementById('MemAuthTypeM').checked = true; sType = 'M'; }} }} else {{ document.getElementById('MemAuthTypeI').checked = true; sType = 'I'; }} }} catch(e) {{ alert(e); }} setDisplay(sType); }} ====생략====  <div style="width:450px;">  <div class="pop_tle"> <img src="http://img.cafe24.com/images/ec_hosting/front/tle_pop_cfm_age.gif" alt="14세미만 구매 제한 확인 절차"><br> </div> {{$c_1}} </div>  </body> <script> setFormInit(); </script> </html>

삭제 추가

2. 디자인 설정

18

<div class="txt_age"> 14세 미만 사용자는 구매가 제한되어, 확인이 필요합니다. </div> <div class="clear"></div> <form name="frm" method="post" action="/Front/Basket/?url=Basketunder14check" onSubmit="return under14Check(this)"> <input type="hidden" name="mode" id="mode" value="under14basket" /> <input type="hidden" name="basketType" value='{{$basketType}}'> <input type="hidden" name="auth_type" id="auth_type" value='{{$auth_type}}'/> <div class="tab_cont"> <div style="display:{{$c_2_Disp}}"> <div style="border:1px #72a0e6 solid; background-color:#eef6ff; padding:10px 10px 8px 12px; margin-bottom:20px;"> <div id="IpinUse" style="{{$IpinUse}}"> <input type="radio" checked="checked" name="MemAuthType" id="MemAuthTypeI" value="I" onclick="setDisplay('I');"/> <label for="MemAuthTypeI">아이핀(i-PIN) 인증</label> </div> <div id="MobileauthUse" style="{{$MobileauthUse}}"> <input type="radio" name="MemAuthType" id="MemAuthTypeM" value="M" onclick="setDisplay('M');"/> <label for="MemAuthTypeM">휴대폰 인증</label> </div> </div> </div> <div id="c_1"> <a href="#:none" onclick="IpinPopup('{{$popupUrl}}');"><img src="http://img.cafe24.com/images/ec_hosting/front/btn_ipin.gif"/></a> <input type="hidden" name="ipin_returnUrl" id="ipin_returnUrl" value="{{$IpinReturnUrl}}"/> <input type="hidden" name="mallId" id="mallId" value="{{$mallId}}"/> <input type="hidden" name="version" id="version" value="shop20"/> <input type="hidden" name="ipin_key" id="ipin_key"/> <div> <p style="text-align:left; margin-bottom:3px;"> 아이핀이란, 회원님의 개인정보 보호를 위해 웹사이트에<br>주민등록번호를 제공하지 않고 본인임을 확인하는 인터넷상의<br>개인식별번호 서비스입니다.<br> 아이핀을 통한 가입을 원하시면 아이핀 인증 버튼을 눌러 진행해 주십시오. </div> </div> <div id="c_2"> <a href="#:none" onclick="MobileauthPopup('{{$mobileauthPopupUrl}}');"><img src="http://img.echosting.cafe24.com/admin/btn_check_phone2.gif"/></a> <input type='hidden' name='authModule' id='authModule' value='{{$authModule}}'/>  <input type="hidden" name="authType" id="authType" value="mobile"/> <input type="hidden" name="returnUrl" id="returnUrl" value="{{$MobileauthReturnUrl}}"/> <input type="hidden" name="mallId" id="mallId" value="{{$mallId}}"/> <input type="hidden" name="mallVersion" id="mallVersion" value="shop20"/> <input type="hidden" name="mobileauth_key" id="mobileauth_key"/> <div> <p style="text-align:left; margin-bottom:3px;"> 본인 명의의 휴대폰으로 본인인증을 진행합니다.<br/> 휴대폰 명의자의 나이 정보로 14세 미만 여부를 확인합니다. </div> </div> </div> </form> </div> 

▼ 위치: HTML 디자인설정 > 주문관련화면 > 14세미만 비회원 체크 > 14세미만 비회원 구매시 체크(c_1)

삭제 추가

2. 디자인 설정

19

▼ 14세 미만 비회원 체크 팝업에 휴대폰 인증 적용된 화면

2. 디자인 설정

20

4) 성인인증 페이지에 적용

▼ 위치: 디자인관리 > HTML 디자인설정 > 인트로화면 디자인선택

다음 순서에 따라 본인인증 인트로 설정 및 디자인 수정을 해야 적용됩니다.

① 본인인증 인트로 사용 설정 메인, 게시판에 각각 설정을 할 수 있습니다.

2. 디자인 설정

21

② html 디자인 수정 다음과 같이 소스를 수정합니다. 빨간색으로 표시된 부분은 삭제, 파란색으로 표시된 부분은 추가되어야 할 소스입니다. 인트로화면5 {common_5}, 인트로화면6 {common_6}, 인트로화면7{common_7} 페이지 모두 아래와 같이 수정하시면 됩니다.

 <div style="display:{$ipinDisp}"> <form action="/Front/?url=index" method="post" name="under19Form">  <div style="display:{{$nameAuth}}"> <form action="/Front/?url=index" method="post" name="under19Form" id="under19Form"> <div class="box_set" style="margin-top:35px;"> <h2 class="tle">비회원 성인인증 </h2> <div class="ipin_is"> <label><input type="radio" name="AuthType" value="AuthTypeI" checked="checked" style="vertical-align:middle;" />아이핀(i-PIN) 인증</label> <p style="padding:8px 0 0 20px; font:11px/1.5em dotum; color:#939393;"> 아이핀이란, 회원님의 개인정보 보호를 위해 웹사이트에 주민등록번호를 제공하지 않고,<br /> 본인임을 확인하는 인터넷상의 개인식별번호 서비스입니다.<br /> 아이핀 가입 또는 인증을 원하시면 '아이핀 인증' 버튼을 눌러 진행해 주십시오.<br /><br /> <a href="#:none" onclick="IpinPopup();"><img src="http://img.cafe24.com/images/ec_admin/popup/1210/btn_ipin_is.gif" alt="아이핀 인증" /></a> <input type="hidden" name="ipin_returnUrl" id="ipin_returnUrl" value="{{$IpinReturnUrl}}"/> <input type="hidden" name="mallId" id="mallId" value="{{$mallId}}"/> <input type="hidden" name="version" id="version" value="shop20"/> <input type="hidden" name="ipin_key" id="ipin_key"/> </p> <div class="ipin_is" style="display:{{$nameAuth}}"> <span style="display:{{if $bIpinUse === false}}none{{/if}}"><input type="radio" name="AuthType" id="AuthTypeI" value="AuthTypeI" {{$ipinChecked}} style="vertical-align:middle;" onclick="setAuthType();"/><label for="AuthTypeI">아이핀(i-PIN) 인증</label> </span> <span style="display:{{if $bMobileauthUse === false}}none{{/if}}"><input type="radio" name="AuthType" id="AuthTypeM" value="AuthTypeM" {{$mobileauthChecked}} style="vertical-align:middle;" onclick="setAuthType();"/><label for="AuthTypeM">휴대폰 인증</label></span> <div id="ipinAuth"> <p style="padding:8px 0 0 20px; font:11px/1.5em dotum; color:#939393;"> <a href="#:none" onclick="IpinPopup();"><img src="http://img.cafe24.com/images/ec_admin/popup/1210/btn_ipin_is.gif" alt="아이핀 인증" /></a><br /><br /> 아이핀이란, 회원님의 개인정보 보호를 위해 웹사이트에 주민등록번호를 제공하지 않고,<br /> 본인임을 확인하는 인터넷상의 개인식별번호 서비스입니다.<br /> 아이핀 가입 또는 인증을 원하시면 '아이핀 인증' 버튼을 눌러 진행해 주십시오.<br /><br /> <input type="hidden" name="ipin_returnUrl" id="ipin_returnUrl" value="{{$IpinReturnUrl}}"/> <input type="hidden" name="mallId" id="mallId" value="{{$mallId}}"/> <input type="hidden" name="version" id="version" value="shop20"/> <input type="hidden" name="ipin_key" id="ipin_key"/> </p> </div> 다음 페이지에 이어서

▼ 위치: HTML 디자인설정 > 인트로화면 > 인트로화면5 {common_5}

삭제 추가

2. 디자인 설정

22

<div id="mobileAuth"> <p style="padding:8px 0 0 20px; font:11px/1.5em dotum; color:#939393;"> <a href="#:none" onclick="MobileauthPopup();"><img src="http://img.echosting.cafe24.com/admin/btn_check_phone2.gif" alt="휴대폰 인증" /></a><br /><br /> 본인 명의의 휴대폰으로 본인인증을 진행합니다.<br /> 휴대폰 명의자의 나이 정보로 성인 여부를 확인합니다. <input type="hidden" name="authModule" id="authModule" value="{{$authModule}}"/> <input type="hidden" name="mode" id="mode" value="under19_enter"/> <input type="hidden" name="authType" id="authType" value="mobile" /> <input type="hidden" name="returnUrl" id="returnUrl" value="{{$MobileauthReturnUrl}}"/> <input type="hidden" name="mallId" id="mallId" value="{{$mallId}}"/> <input type="hidden" name="mallVersion" id="mallVersion" value="shop20"/> <input type="hidden" name="mobileauth_key" id="mobileauth_key"/> </p> </div> </div> <div class="btm"></div> </div> </form> </div>   <p class="txt_add">미성년자 차단을 위하여 로그인 또는 본인인증 절차를 거치셔야 합니다.</p> </div> </center> <script> setAuthType(); </script>

삭제 추가

2. 디자인 설정

23

▼ 휴대폰 인증 적용된 본인인증 인트로화면

휴대폰 인증 서비스 사용자 매뉴얼img.cafe24.com/images/ec_admin/etc/phone_confrm... ·...

Documents