AEM/CQ6.2: Как интегрировать Google reCaptcha или встроенную капчу в адаптивной форме?

Question

Кто-то создал форму, которая использует адаптивную форму.

Я хочу включить какую-то функцию captcha в форму.

1. Я попытался использовать встроенный captcha (Form => Captcha). Я убедился, что поле captcha помечается по мере необходимости, но у меня нет проблем с отправкой формы, даже если поле captcha пустое.

2. Я смотрел на включение reCaptcha Google и лучший гид, который я видел, это: PracticalAEM article. Но на самом деле это не говорит о том, как включить этот новый компонент в мою существующую настройку.

Большое спасибо за помощь!

Answer 1

Captcha должен быть реализован с обеих сторон вашего клиента и сервера приложения. Позволяет описать, как ReCaptcha работа:

1) Браузер рендеринга страницы с ReCaptcha сценария с site ID (то есть то, что ты сделал на основании статьи)

2) ответ пользователя ReCaptcha и Google вернуться обратно некоторую длинную строку с искаженным кодом (на тот момент технически CAPTCHA, еще не подтвержденным)

3) Ваш внешний интерфейс должен решить, что делать с ответом (как правило, вы ставите его в обязательном поле)

4) Отправить ReCaptcha captcha code бакэнду. (капчу еще не подтверждено)

Эта часть не описана в статье, что вы читаете, потому что это является основным для всех каптч:

5) Backend следует читать captcha code и запрос Google для проверки captcha code для текущего site ID

ReCaptchaImpl reCaptcha = new ReCaptchaImpl(); 
    reCaptcha.setPrivateKey("your_private_key"); 

    String challenge = request.getParameter("recaptcha_challenge_field"); 
    String uresponse = request.getParameter("recaptcha_response_field"); 
    ReCaptchaResponse reCaptchaResponse = reCaptcha.checkAnswer(remoteAddr, challenge, uresponse); 

    if (reCaptchaResponse.isValid()) { 
     .... 
    } else { 
     //send response to browser with message "Captcha is invalid" 
    } 

Как вы видите, только ответ от google на бэкэнд является проверкой reCaptcha.

И для любой реализации капчи есть две части:

1) внешний интерфейс, где вы можете выполнить Captcha

Регулярно проверяйте

2) бэкенд, где вы можете проверить, что проверка была сделана правильно.

Answer 2

Посмотрите, поможет ли это. Я сделал это на простой html-форме (не адаптивной).

структура папок ..

recaptcha (main component folder name) 
> _cq_editConfig.xml 
> .content.xml 
> dialog.xml 
> recaptch.html 

cq_editConfig.xml

<?xml version="1.0" encoding="UTF-8"?> 
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" 
    xmlns:jcr="http://www.jcp.org/jcr/1.0"  
    xmlns:nt="http://www.jcp.org/jcr/nt/1.0" 
    cq:disableTargeting="true" 
    jcr:primaryType="cq:EditConfig"/> 

.content.XML

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" 
    xmlns:jcr="http://www.jcp.org/jcr/1.0" 
    xmlns:sling="http://sling.apache.org/jcr/sling/1.0" 
    allowedParents="[*/parsys]" 
    componentGroup="ABC Commons" 
    jcr:description="ABC reCaptcha"/> 

dialog.xml

<?xml version="1.0" encoding="UTF-8"?> 
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" 
jcr:primaryType="cq:Dialog" 
title="ABC reCaptcha Component"  
xtype="dialog"> 
<items jcr:primaryType="cq:WidgetCollection"></items> 
</jcr:root> 

recaptcha.html

<div class="col-md-12"> 
<div id="response-div" style="color:red; font-weight: bold;"></div> 
<script src='https://www.google.com/recaptcha/api.js?onload=reCaptchaCallback&render=explicit' async defer></script> 
<div id="rcaptcha" class="g-recaptcha" data-sitekey="SITE-KEY"></div> 
<input type="hidden" value="true" id="recaptchaRequired" name="recaptchaRequired" />  
<button id="addButton" class="btn plus btn-success">Submit</button> 
</div>   
</div> 

<script> 
var RC2KEY = 'SITE-KEY'; 
var doSubmit = false; 

function reCaptchaVerify(response) { 
    if (response === document.querySelector('.g-recaptcha-response').value) { 
    doSubmit = true; 
    } 
} 

function reCaptchaExpired() { 
    /* do something when it expires */ 
} 

function reCaptchaCallback() {  
    grecaptcha.render('rcaptcha', { 
    'sitekey': RC2KEY, 
    'callback': reCaptchaVerify, 
    'expired-callback': reCaptchaExpired 
    }); 
} 

$("#addButton").click(function (e) { 
    e.preventDefault(); 
    if (doSubmit) { 
     //alert('submit pressed'); 
     $("form:first").submit(); 
    } else { 
     //alert('recaptcha not selected'); 
     document.getElementById("response-div").innerHTML = "Recaptcha is required!";    
    } 
}); 

</script> 

Примечание: Заменить SITE-KEY