EC-CUBE3.0에 reCAPTCHA 설치
EC-CUBE3.0에 reCAPTCHA 설치
하고 싶은 일
나는 로봇이 아니다."하고 싶어요.
컨디션
EC-CUBE3.0
이루어지다
프런트엔드 설치는 두 개뿐입니다.
- 관리 화면에서 블록 설정
관리 화면에 새 블록을 작성하십시오.<!-- Google recaptcha -->
<script src='https://www.google.com/recaptcha/api.js' async defer></script>
<script>
function validateRecaptcha(code){
if(!!code){
var form = document.querySelector(".recaptcha");
form.removeAttribute('disabled');
}
}
</script>
작성된 블록을 레이아웃으로 설정하고 질의 테이블의 머리글 섹션에 설정합니다.
4
<!-- Google recaptcha -->
<script src='https://www.google.com/recaptcha/api.js' async defer></script>
<script>
function validateRecaptcha(code){
if(!!code){
var form = document.querySelector(".recaptcha");
form.removeAttribute('disabled');
}
}
</script>
## 編集箇所
src > Eccube > Resource > template > default > Contact > index.twig
<div class="col-sm-offset-4 col-sm-4">
<div class="g-recaptcha" data-callback="validateRecaptcha" data-sitekey="6LdkFCoUAAAAAOwtu-OYCfiFKLBz9_ED1KlsEiOA"></div>
</div>
<div id="top_box__confirm_button" class="btn_group col-sm-offset-4 col-sm-4">
<p><button type="submit" class="recaptcha btn btn-primary btn-block" disabled>確認ページへ</button></p>
</div>
검사 전에 확인 단추를 누르지 않기 위해서, 초기 디스플레이에서disabled를 선택했습니다.이 소스 코드의 전문은 다음과 같다.
병합 결과는 다음과 같습니다.
이상
Reference
이 문제에 관하여(EC-CUBE3.0에 reCAPTCHA 설치), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/hgsgtk/items/47e07ab41e3a9685949b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)