AEM code snippets : Integrate Google reCAPTCHA with AEM

In this article I am going to explain to you 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 an API Key for your site, to create this you need to use google reCAPTCHA admin dashboard “https://www.google.com/recaptcha/admin”

In the google recaptcha admin dashboard, the registration window will ask you to provide label and domain name, you can enter any label out here but, the domain name must be your site domain name ex: www.keysandstrokes.info, finally click on register button to generate API Keys

recaptcha

Once the registration is completed in the google recaptcha admin dashboard, the next thing you need to do is check  what are all the things you need to include into your website, there are only two elements you need to keep on your page which is google recaptcha related javascript’s

Paste this snippet before the closing tag in 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

Keysandstrokes 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” to the textarea field,  Upon clicking of form submit button, we need to make post request to the server, in the server side code read this response value 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 google recaptcha api for verification, you need to 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