Profile
이온디

2019.05.10

사용팁

equeer layout 에 recaptcha 넣기

조회 수 22 추천 수 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
7
Lv
이온디

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

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

0개의 댓글

에디터
번호 제목 조회 수 추천 수 날짜
공지 [라이믹스] Another XE, 라이믹스 소개/설치하기 23 0 2019.01.09
공지 [XE소식] XE제작문의는 이온디 제작의뢰로 가주세요. 19 0 2018.12.10
공지 [사이트맵] XE/라이믹스 사이트맵 불편 기능을 알려주세요. 44 0 2017.09.23
[사용팁] equeer layout 에 recaptcha 넣기 22 0 2019.05.10
363 [누리고] 누리고 장바구니 > 결제모듈 12 0 2019.05.10
362 [아이디어/건의] 오프라인 강좌 결제 7 0 2019.04.17
361 [추천자료] [XE끌어올리기] 유투브를 배경음악으로 - 20 0 2019.04.06
360 [사용팁] nginx xe-rewrite.conf 166 0 2019.03.22
359 [아이디어/건의] [계획] 구글애드센스 디자인의 XE 관리자 테마 만들어보기 35 0 2019.03.21
358 [사용팁] contentextended 안될 때 28 0 2019.01.21
357 [사용팁] 대규모 사이트에서의 XE 세팅방법 (Thanks to 기진곰) 36 0 2019.01.17
356 [사용팁] xe 로그인방식 아이디 이메일 14 0 2019.01.11
355 [라이믹스] XE에서 라이믹스로 이사하기 55 0 2019.01.09
354 [문제점] XE의 문제점 : SEO 29 0 2019.01.09
353 [추천자료] 회원검색위젯 (윤삼) 12 0 2019.01.08
352 [개발팁] XE 회원검색모듈, 회원검색위젯 (by 개발해보쟈(k_rifle)) 15 0 2019.01.08
351 [사용팁] [오류][마켓플레이스모듈] Call to undefined method marketplaceItem::getTags() 18 0 2019.01.05