Profile
이온디

2019.05.10

사용팁

equeer layout 에 recaptcha 넣기

조회 수 73 추천 수 0
Code recaptcha
https://www.google.com/recaptcha/admin/site/342883353

오류 :
Uncaught Error: reCAPTCHA placeholder element must be an element or id
at Object.bC [as render] 

저는 라르게덴님의 프로알라 에디터를 사용 중이고, Invisible reCAPTCHA - XE 애드온을 사용 중입니다.

이 애드온은 구글 리캡차 v2 Invisible reCAPTCHA 인데 특정 act일 경우만 동작을 합니다. 

(이전에는 코노리님의 동일한 기능의 리캡차 애드온을 사용했었는데, 프로알라 에디터를 쓰면서 이 애드온으로 변경했습니다.)


이퀴어 레이아웃의 경우 특정 ACT에서 로그인이 동작하는게 아니라 기본 페이지 상태에서 로그인 모달 팝업이 뜨는데,

위 기능이 동작하지 않아 추가해봤습니다.


수정한 파일은 다음과 같습니다.

layouts/equeer_layout/components/login-modal.html


수정방법은 다음과 같습니다. 이 순서대로 진행했습니다.

1) FORM 태그에 ID 넣기

2) 로그인 버튼에 사이트키 넣기

3) 스크립트 넣기


login-modal.html 파일을 다음과 같은 방법으로 코드를 수정해줍니다. 

(스크립트 코드는 다양할 수 있으나 여기서 소개해드리는 내용은 처음 해볼 수 있는 간단한 내용으로 구성된 스크립트입니다.)


1) FORM 태그에 ID 넣기

id='demo-form'만 추가해줬습니다,

<form ruleset="@login" action="{getUrl()}" method="post" autocomplete="off" id='demo-form'>

2) 로그인 버튼에 사이트키 넣기 

class에 g-recaptcha를 넣고, data-sitekey와 data-callback을 추가해줬습니다.

<button type="submit" class="g-recaptcha eq button button-primary button-expand button-rounded button-shadow margin-bottom-small" tabindex="4" data-sitekey="사이트키" data-callback='onSubmit'>로그인</button>

3) 스크립트 넣기

하단에 다음 코드를 추가해줬습니다.

<!--@if(!$act=='dispMemberSignUpForm' || !$act=='dispMemberLoginForm')-->
<script type="text/javascript" charset="utf-8">
  function onSubmit(token) {
    document.getElementById("demo-form").submit();
  }
</script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<!--@end-->

특정 ACT일 경우 중복으로 들어가서 이렇게 IF 문으로 감싸줬습니다.


자 이제 일반 페이지에서도 로그인이 잘 동작하게 됩니다.


참조사이트 

1) 구글 리캡차 

https://developers.google.com/recaptcha/

2) 구글 리캡차 개발자문서

https://developers.google.com/recaptcha/docs/invisible?hl=ko

Profile
8
Lv
이온디

이온디 홈페이지는 간결하며,

 손쉽게 수정할 수 있습니다.

0개의 댓글

에디터
번호 제목 조회 수 추천 수 날짜
공지 [라이믹스] Another XE, 라이믹스 소개/설치하기 199 0 2019.01.09
공지 [XE소식] XE제작문의는 이온디 제작의뢰로 가주세요. 213 0 2018.12.10
공지 [사이트맵] XE/라이믹스 사이트맵 불편 기능을 알려주세요. 206 0 2017.09.23
372 [아이디어/건의] 관심사기반 게시물 추천 27 0 2019.11.12
371 [아이디어/건의] 라이선스 이슈 22 0 2019.11.12
370 [사용팁] xe sketchbook 댓글 추천 새로고침 없이 43 0 2019.11.08
369 [개발팁] xe sketchbook 카카오톡 공유 69 0 2019.11.03
368 [개발팁] 게시판 리스트 중간에 구글 광고 띄우기 33 0 2019.11.03
367 [개발팁] 게시물 중간에 원하는 위치에 구글 광고 삽입하기 끝!; 28 0 2019.10.24
366 [자유게시판] 오래된 XE 설치 사이트 수리하기 58 0 2019.09.12
[사용팁] equeer layout 에 recaptcha 넣기 73 0 2019.05.10
364 [누리고] 누리고 장바구니 > 결제모듈 106 0 2019.05.10
363 [아이디어/건의] 오프라인 강좌 결제 33 0 2019.04.17
362 [추천자료] [XE끌어올리기] 유투브를 배경음악으로 - 48 0 2019.04.06
361 [사용팁] nginx xe-rewrite.conf 565 0 2019.03.22
360 [아이디어/건의] [계획] 구글애드센스 디자인의 XE 관리자 테마 만들어보기 124 0 2019.03.21
359 [사용팁] contentextended 안될 때 50 0 2019.01.21
358 [사용팁] 대규모 사이트에서의 XE 세팅방법 (Thanks to 기진곰) 129 0 2019.01.17