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