Profile
이온디

2019.05.10

사용팁

equeer layout 에 recaptcha 넣기

조회 수 47 추천 수 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, 라이믹스 소개/설치하기 45 0 2019.01.09
공지 [XE소식] XE제작문의는 이온디 제작의뢰로 가주세요. 29 0 2018.12.10
공지 [사이트맵] XE/라이믹스 사이트맵 불편 기능을 알려주세요. 50 0 2017.09.23
373 [아이디어/건의] 사용자별 테마 기능 21 0 4 일 전
372 [아이디어/건의] 관심사기반 게시물 추천 3 0 7 일 전
371 [아이디어/건의] 라이선스 이슈 2 0 7 일 전
370 [사용팁] xe sketchbook 댓글 추천 새로고침 없이 21 0 11 일 전
369 [개발팁] xe sketchbook 카카오톡 공유 17 0 16 일 전
368 [개발팁] 게시판 리스트 중간에 구글 광고 띄우기 5 0 16 일 전
367 [개발팁] 게시물 중간에 원하는 위치에 구글 광고 삽입하기 끝!; 9 0 26 일 전
366 [자유게시판] 오래된 XE 설치 사이트 수리하기 40 0 2019.09.12
[사용팁] equeer layout 에 recaptcha 넣기 47 0 2019.05.10
364 [누리고] 누리고 장바구니 > 결제모듈 26 0 2019.05.10
363 [아이디어/건의] 오프라인 강좌 결제 12 0 2019.04.17
362 [추천자료] [XE끌어올리기] 유투브를 배경음악으로 - 31 0 2019.04.06
361 [사용팁] nginx xe-rewrite.conf 303 0 2019.03.22
360 [아이디어/건의] [계획] 구글애드센스 디자인의 XE 관리자 테마 만들어보기 76 0 2019.03.21
359 [사용팁] contentextended 안될 때 35 0 2019.01.21