Help Center

카페24 소식

공지사항업데이트스토어소식

[상점관리] 미인증회원의 인증유도 기능 추가

2015-01-28

안녕하세요, 카페24 운영도우미 입니다.

 

인증이 되지 않은 아이디 사용에 의한 쇼핑몰 피해를 방지할 수 있는 기능이 추가되었습니다.

추가된 기능을 활용하여 여러 아이디를 이용한 이벤트 중복 참여, 또는 적립금 부당 획득을 방지하세요!

 
자세한 내용은 아래를 참조해 주세요.

 


■ 적용일자 : 2015-02-11 (수)

■ 업데이트 내용


- 위치 :  상점관리 > 운영관리 > 본인인증 서비스 설정


쇼핑몰 접속 시 미인증 회원인 경우 본인인증 유도를 위한 다음의 방법들을 설정할 수 있습니다.

- 본인인증 없이 회원정보 수정 불가

- 로그인 시 회원정보 수정 페이지로 바로 이동

- 로그인 시 본인인증 안내 팝업창 표시

- 출석체크 이벤트 참여 불가


▼ 관리자 설정 화면 - [미인증 회원 관련 설정] 화면



1) '회원정보수정 제한'을 통한 본인인증 유도

-  '본인인증 없이 회원정보수정 불가' 에 체크하면 미인증 회원은 인증 후 정보수정을 할 수 있습니다.


2) '본인인증 유도' 설정

- '로그인 시 회원수정 페이지로 바로 이동'을 선택한 경우,
  미인증 회원이 로그인을 하면 인증을 위한 '회원 정보 수정'화면으로 이동합니다.


▼ 쇼핑몰 화면 - 미인증 회원에게 표시되는 '회원 정보 수정'의 '회원인증' 화면


※ 아이핀, 휴대폰, 이메일 인증 중 하나 이상의 본인인증 수단이 활성화되어있어야 합니다.


- '로그인 시 안내 팝업창 표시'를 선택한 경우,
  미인증 회원이 로그인을 하면 이동하는 화면마다 인증안내 레이어 팝업이 표시됩니다.


▼ 쇼핑몰 화면 - 미인증 회원에게 표시되는 '안내 팝업창' 화면


- '사용안함'을 선택한 경우, 본인인증 유도 기능을 사용하지 않습니다.


3) '이벤트 참여 제한'을 통한 본인인증 유도

- '출석체크 이벤트 참여 불가'에 체크하면 미인증 회원은 인증 후 출석체크 이벤트에 참여할 수 있습니다.

   로그인형, 댓글형, 스탬프형 출석체크 이벤트 모두 적용됩니다.


 

■ PC 쇼핑몰


1. [PC-HTML] 인증안내 레이어 팝업 추가


  - HTML 파일 추가(certification_layer.html)

  - 위치 : 디자인관리>회원(/member)


▼ 아래 파란색 소스로 HTML 파일을 추가해주세요.

 <div module="member_certification">

    <!--@css(/css/module/member/certification_layer.css)-->

    <h1>본인인증 알림</h1>

    <div class="content">

        <h3><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/member/h3_certification_layer.png" alt="회원 본인인증을 해주세요!" /></h3>

        <p><strong>{$member_name}</strong> 회원님, 알고 계셨나요?</p>

        <p>2013년 정보통신망법 개정에 따라 주민등록번호를 이용한<br />실명인증 대신 다른 본인인증 수단을 제공하고 있습니다.</p>

        <p>원활한 이벤트 참여 및 아이디/비밀번호 찾기를 위하여<br />본인인증을 완료하여 주시기 바랍니다.</p>

        <a href="/member/modify.html" class="btnCertification"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/member/btn_certification.png" alt="본인인증 하러가기" /></a>

    </div>

    <div class="btnArea">

        <label><input type="checkbox" id="{$checkbox_today_open}" /> 오늘 하루 열지않음</label>

        <a href="#none" onclick="$('.xans-member-certification').hide();"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/common/btn_layer_close.gif" alt="닫기" /></a>

    </div>

    <div class="close"><a onclick="$('.xans-member-certification').hide();"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/common/btn_close.png" alt="닫기" /></a></div>

</div>



2. [PC-HTML] '회원정보수정'에 '회원인증' 추가


  - HTML 소스 변경

  - 위치 : 디자인관리>회원>회원정보 수정(/member/modify.html)


▼ 아래와 같이 파란색 소스를 추가해주세요.

※ <!--@css(/css/module/member/edit.css)--> 와 <h3>기본정보</h3> 사이에 추가.

## 상단 생략 ##


 <!--@css(/css/module/member/edit.css)-->

 <div class="{$display_certification_form|display}">

    <h3>회원인증</h3>

    <div class="boardWrite typeCertificate">

        <table border="1" summary="">

        <caption>회원인증</caption>

        <tbody>

            <tr>

                <th scope="row">회원구분</th>

                <td>{$member_type}</td>

            </tr>

            <tr>

                <th scope="row">인증여부</th>

                <td>

                    <strong class="txtEm" id="MauthText">미인증</strong>

                    <ul class="certifInfo">

                        {$certification_info}

                    </ul>

                </td>

            </tr>

            <tr class="{$display_certification_method|display}">

                <th scope="row">회원인증</th>

                <td>

                    {$form.personal_type}

                    <div class="certifForm" id="ipinWrap">

                        <a href="#none" onclick="{$action_ipin_open}"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/member/btn_check6.gif" alt="아이핀 인증" /></a>

                        <p class="certifInfo">아이핀이란, 회원님의 개인정보 보호를 위해 웹사이트에 주민등록번호를 제공하지 않고 본인임을 확인하는 인터넷상의 개인식별번호 서비스입니다.<br />아이핀을 통한 가입을 원하시면 아이핀 인증 버튼을 눌러 진행해 주십시오.</p>

                    </div>

                    <div class="certifForm" id="mobileWrap">

                        <a href="#none" onclick="{$action_mobile_open}"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/member/btn_check5.gif" alt="휴대폰 인증" /></a>

                        <p class="certifInfo">본인 명의의 휴대폰으로 본인인증을 진행합니다.</p>

                    </div>                      

                    <div class="certifForm" id="emailWrap">

                        <p class="certifInfo">기본정보 > 이메일 항목에 입력하신 정보로 본인인증을 진행합니다.<br />정보수정 후에 입력하신 이메일 주소로 인증 메일이 발송되오니, 확인해 주시기 바랍니다.</p>

                    </div>

                </td>

            </tr>

        </tbody>

        </table>

    </div>

</div>

<h3>기본정보</h3>


## 하단 생략 ##



3. [PC-CSS]  인증안내 레이어 팝업 관련 CSS 추가


  - CSS 파일 추가(/certification_layer.css)

  - 위치 : 디자인관리>css>모듈>회원(/css/module/member)


▼ 아래 파란색 소스로 CSS 파일을 추가해주세요.

.xans-member-certification { position:fixed; top:50%; left:50%; z-index:1000; width:450px; margin:-183px 0 0 -225px; }

.xans-member-certification h1 { height:35px; padding:0 35px 0 19px; color:#fff; font-size:14px; line-height:35px; background:#495164; }

.xans-member-certification .content { height:365px; border-right:1px solid #757575; border-left:1px solid #757575; background:#5070c3 url("http://img.echosting.cafe24.com/skin/base_ko_KR/member/bg_certification_layer.jpg") no-repeat 0 0; }

.xans-member-certification .content > h3 { padding:35px 0 25px 40px; }

.xans-member-certification .content > p { padding:0 0 10px 40px; font-size:14px; color:#fbfafa; font-family:Gulim; line-height:1.4; }

.xans-member-certification .content > p strong { color:#ffe746; }

.xans-member-certification .content .btnCertification { display:inline-block; margin:30px 0 0 32px; }

.xans-member-certification .close { position:absolute; right:20px; top:10px; }

.xans-member-certification .close img { cursor:pointer; }

.xans-member-certification .btnArea { overflow:hidden; padding:9px 20px 9px 0; border:1px solid #d7d5d5; text-align:right; background:#fbfafa; }

.xans-member-certification .btnArea label { float:left; margin:0 0 0 20px; line-height:30px; color:#525252; }


 

 

4. [PC-CSS]  '회원정보수정'에 '회원인증' 추가 관련 CSS 추가


  - CSS 소스 변경

  - 위치 : 디자인관리>css>모듈>회원/edit.css(/css/module/member/edit.css)


▼ 아래와 같이 파란색 소스를 추가해주세요.

※ .xans-member-edit .boardWrite .account select { margin:0; } 하단에 추가.

## 상단 생략 ##


.xans-member-edit .boardWrite .account select { margin:0; }

/* 회원인증 */

.xans-member-edit .boardWrite.typeCertificate strong.txtEm { color:#008bcc; }

.xans-member-edit .boardWrite.typeCertificate ul.certifInfo li,

.xans-member-edit .boardWrite.typeCertificate p.certifInfo { color:#757575; padding:0 0 0 9px; background:url("http://img.echosting.cafe24.com/skin/base_ko_KR/common/bg_list.gif") no-repeat 0 10px; }

.xans-member-edit .boardWrite.typeCertificate .certifForm { margin:20px 0 0; }

.xans-member-edit .boardWrite.typeCertificate .certifForm img { margin:0 0 5px; }


## 하단 생략 ##



■ 모바일 쇼핑몰


1. [모바일-HTML] 인증안내 레이어 팝업 추가


  - HTML 파일 추가(certification_layer.html)

  - 위치 : 디자인관리>회원(/member)


▼ 아래 파란색 소스로 HTML 파일을 추가해주세요.

 <style type="text/css">

    .xans-member-certification { z-index:100; position:fixed; top:50px; left:50%; width:306px; margin:0 0 0 -153px; border-radius:5px; letter-spacing:-1px; background:#5a7ec0;

        -webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.75);

        -moz-box-shadow:    0px 0px 10px 2px rgba(0, 0, 0, 0.75);

        box-shadow:         0px 0px 10px 2px rgba(0, 0, 0, 0.75);

    }

    .xans-member-certification h2 { overflow:hidden; text-indent:150%; white-space:nowrap; font-size:0; line-height:0; }

    .xans-member-certification .content { padding:29px 13px; line-height:1.5em; color:#fff; }

    .xans-member-certification .content > h3 { font-size:20px; }

    .xans-member-certification .content > h4 { padding:14px 0 4px; font-size:14px; }

    .xans-member-certification .content > p { padding:10px 0 0 0; }

    .xans-member-certification .content .txtEm { color:#ffe746; }

    .xans-member-certification .content .btnStrong { display:inline-block; border-bottom-color:#3b4150; margin:14px 0 0; width:100%; text-align:center; font-weight:normal; }

    .xans-member-certification .footer { position:relative; padding:0 7px; border-radius:0 0 5px 5px; background:#f9f9f9; }

    .xans-member-certification .footer .btnClose { position:absolute; top:7px; right:7px; padding:0 19px 0 0; font-size:11px; background:url("http://img.echosting.cafe24.com/skin/mobile_ko_KR/member/btn_close.png") no-repeat 100% 2px; background-size:13px 13px; }

</style>

 

<div module="member_certification">

    <h2>본인인증 알림</h2>

    <div class="content">

        <h3><span class="txtEm">회원 본인인증</span>을 해주세요!</h3>

        <h4><span class="txtEm">{$member_name}</span> 회원님, 알고 계셨나요?</h4>

        <p>2013년 정보통신망법 개정에 따라 주민등록번호를 이용한 실명인증 대신 다른 본인인증 수단을 제공하고 있습니다.</p>

        <p>원활한 이벤트 참여 및 아이디/비밀번호 찾기를 위하여 본인인증을 완료하여 주시기 바랍니다.</p>

        <a href="/member/modify.html" class="btnStrong">본인인증 하러가기</a>

    </div>

    <div class="footer">

        <input type="checkbox" id="{$checkbox_today_open}"><label for="{$checkbox_today_open}">오늘 하루 열지 않음</label>

        <a href="#none" onclick="$('.xans-member-certification').hide();" class="btnClose">닫기</a>

    </div>

</div>



2. [모바일-HTML] '회원정보수정'에 '회원인증' 추가


  - HTML 소스 변경

  - 위치 : 디자인관리>회원>회원정보 수정(/member/modify.html)


▼ 아래와 같이 파란색 소스를 추가해주세요.

※ <!-- $login_page = /member/login.html --> 과 <h3>기본정보 <span> 사이에 추가.

## 상단 생략 ##


    <!--@css(/css/module/member/edit.css)-->

    <!--

        $login_page = /member/login.html

     -->

 <div class="{$display_certification_form|display}">

    <h3>회원인증</h3>

    <div class="boardWrite typeCertificate">

        <table border="1" summary="">

        <caption>회원인증</caption>

        <tbody>

            <tr>

                <th scope="row">회원구분</th>

                <td>{$member_type}</td>

            </tr>

            <tr>

                <th scope="row">인증여부</th>

                <td>

                    <strong class="txtEm" id="MauthText">미인증</strong>

                </td>

            </tr>

            <tr class="{$display_certification_method|display}">

                <th scope="row">회원인증</th>

                <td>

                    {$form.personal_type}                      

                    <div class="certifForm" id="ipinWrap">

                        <a href="#none" onclick="{$action_ipin_open}"><img src="http://img.echosting.cafe24.com/skin/mobile_ko_KR/member/btn_Ipin.gif" width="106" alt="아이핀 인증"></a>

                    </div>

                    <div class="certifForm" id="mobileWrap">

                        <a href="#none" onclick="{$action_mobile_open}"><img src="http://img.echosting.cafe24.com/skin/mobile_ko_KR/member/btn_mobile_check.gif" width="106" alt="휴대폰 인증"></a>

                    </div>

                    <div class="certifForm" id="emailWrap">

                        <p class="certifInfo">기본정보 > 이메일 항목에 입력하신 정보로 본인인증을 진행합니다. 정보수정 후에 입력하신 이메일 주소로 인증 메일이 발송되오니, 확인해 주시기 바랍니다.</p>

                    </div>

                </td>

            </tr>

        </tbody>

        </table>

    </div>

</div>

<h3>기본정보 <span><img src="http://img.echosting.cafe24.com/skin/mobile_ko_KR/member/ico_required.png" width="5" height="5" alt="필수">필수</span></h3>


## 하단 생략 ##



3. [모바일-CSS]  '회원정보수정'에 '회원인증' 추가 관련 CSS 추가


  - CSS 소스 변경

  - 위치 : 디자인관리>css>모듈>회원/edit.css(/css/module/member/edit.css)


▼ 아래와 같이 파란색 소스를 추가해주세요.

※ .xans-member-edit .boardWrite .interest span { display:inline-block; } 하단에 추가.

## 상단 생략 ##


.xans-member-edit .boardWrite .interest span { display:inline-block; }

/* 회원인증 */

.xans-member-edit .boardWrite.typeCertificate strong.txtEm { color:#508bed; }

.xans-member-edit .boardWrite.typeCertificate .certifInfo { color:#757575; font-size:11px; }

.xans-member-edit .boardWrite.typeCertificate .certifForm { margin:9px 0px 7px; }


## 하단 생략 ##


카페24 는 쇼핑몰 운영을 보다 편리하고 쉽게 할 수 있도록 기능 업데이트를 지속적으로 진행하고 있습니다.
더 좋은 서비스가 되기 위해 노력하겠습니다. 끊임없는 애정과 관심 부탁 드립니다.

궁금하신 사항은 언제든지 고객지원센터 1:1게시판으로 문의해주세요. [문의하기]

이전글

[상점관리] 독립선택형 옵션 상품의 경우 목록에서 장바구니 및 옵션보기 기능 안내

2015-01-21

다음글

[접속통계] 쇼핑몰 메인- 카페24접속통계 리포트 바로가기 기능 추가

2015-01-21