Integrate Google reCAPTCHA with AEM

In this article I am going to explain how to integrate google reCAPTCHA with AEM, reCAPTCHA helps your website protects from the spam and abuse, the first step which you need to do is create a API Key for your site, to create this you need to use google reCAPTCHA admin dashboard “https://www.google.com/recaptcha/admin”

The registration window ask you to provide label and domain name, you can enter any label out here but the domain must be your site domain name ex: www.greyarea.in, finally click on register button to generate API Keys

recaptcha

Once registration completed, the next thing you need to check is what are all the things you need to integrate in your website there are only two elements you need to keep on your page

Paste this snippet before the closing tag on your HTML template:

Paste this snippet at the end of the page where you want place reCAPTCHA widget to appear:


Once above two elementes are added on your page then you will see out put something like below

GreyArea Recaptcha demo

How are we going to test this ?

Once the reCAPTCHA verification is successful then it will automatically add dynamic textarea field by adding name attribute “g-recaptcha-response” ,  Upon clicking of form submit button we need to make post request to the server to  read this response value from server-side code to validate

The below sling servlet uses getParameter method to read response code and send it to the verifyResponse method of RequestHandler class

The RequestHanlder takes the response code and send it to the googleapi for verification, build a Url something like below and make a httprequest

Create a dialog in AEM which takes only site key and populates data-sitekey attribute

The xml structure of dialog

Finally the output is

recaptchaaem

Download code

Leave a Reply

Your email address will not be published. Required fields are marked *

Visit Us On FacebookVisit Us On Google PlusVisit Us On Twitter