equeer layout 에 recaptcha 넣기

저는 라르게덴님의 프로알라 에디터를 사용 중이고, 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