AEM/CQ6.2: How to integrate Google reCaptcha or built-in captcha on an Adaptive Form? - aem

Question

Someone created a form that uses Adaptive Form.
I want to include some sort of captcha function on the form.
I tried using the built-in captcha (Form => Captcha). I made sure the captcha field is ticked as required but I have no problems submitting the form even if the captcha field is blank.
I was looking at incorporating Google's reCaptcha and the best guide I've seen is this: PracticalAEM article. But it doesn't really tell me how to include this new component into my existing setup.
Thanks very much for the help!

Answer 1

Captcha should be implemented on both sides of your application client and server.
Lets describe how reCaptcha work:
1) Browser render page with reCaptcha script with site ID(that is what you did based on article)
2) User answer reCaptcha and google return back some long string with captcha code(on that moment technically captcha still not validated)
3) Your frontend has to decide what to do with response(usually you placing it in mandatory field)
4) Submit reCaptcha captcha code to backEnd.(captcha still not validated)
This part is not described in the article that you read because it is basic for all captchas:
5) Backend should read captcha code and request google for verification of captcha code for current 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"
}
As you can see only response from google to backend is reCaptcha validation.
And for any captcha implementation there is two parts:
1) frontend where you can fulfil captcha check
2) backend where you can verify that check was done properly.

Answer 2

See if this helps. I have done this on a simple html form (not adaptive).
Folder structure..
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>
Note: Replace the SITE-KEY