May 27, 2020
Estimated Post Reading Time ~

reCaptcha / Captcha Integration with Adobe CQ5/AEM6.0

Before going to start you should register with reCAPTCHA to get a public and private key to use in the code.

Loading widget
create a CQ component Ex: captcha integration
Add below code to your component JSP

<%@include file="/libs/foundation/global.jsp"%>
<%@ page import="net.tanesha.recaptcha.ReCaptcha" %>
<%@ page import="net.tanesha.recaptcha.*" %>

<%
    //Getting remote ip address to validate captcha 
    String ipAddress = request.getHeader("X-FORWARDED-FOR");  
    if (ipAddress == null) {  
   ipAddress = request.getRemoteAddr();  
   } 

 %>
    <input type="hidden" value="<%=ipAddress%>" id="remoteIPAdderess" >
    <input type="hidden" value="<%=currentNode.getPath()%>" id="curNodePath" >
    <% ReCaptcha reCaptcha = ReCaptchaFactory.newReCaptcha("<Public Key>", "<Private Key>", false); %>
    
    <h1 id="page-title" class="title">Google Captch Integration in CQ</h1>
    <form accept-charset="UTF-8" id="testCaptcha" method="post" action="" class="contact-press-form ajax-form">
        <div id="gooleCaptcha">
            <input type="hidden" value="form-U5ArplaaF5MKYCMnyZkQDZfvXEy7bO7JLc5e6VCKses"  name="form_build_id"> 
            <input type="hidden" value="apollocontactpress_contact_form" name="form_id">
    
            <fieldset class="captcha form-wrapper">
                <legend>
                    <span class="fieldset-legend">CAPTCHA</span>
                </legend>
                <div class="fieldset-wrapper form-item form-item-captcha">
                    <%=reCaptcha.createRecaptchaHtml(null, "clean", null) %>
                    <div class="error-message"></div>
                </div>
            </fieldset>
            <input type="button" id="test" class='testCaptcha' value="test">
        </div>
    </form>

<script>

$(function() { 
  
  $('#gooleCaptcha').on('click','.testCaptcha',function(){
       alert("redy captch integration");
       var cpatchaFlag = false;
        var remoteIP=$('#remoteIPAdderess').val();
        var currentNodePath = $("#curNodePath").val();         
        var captchaField = $('#recaptcha_response_field');
        var capResponse=$('#recaptcha_response_field').val();
        var capChallange=$('#recaptcha_challenge_field').val();                 
        var captchValUrl=currentNodePath+'.validatecaptcha.html';
        if($.trim(capResponse).length === 0){
   alert("response is empty");
  }else{  
            var isValidCaptcha="";
            $.ajax({                          
                url: captchValUrl,
                async: false,
                data: {'remoteAddr':remoteIP,'recaptcha_response_field' : capResponse,'recaptcha_challenge_field':capChallange},
                success: function (response, status, xml) {
                    isValidCaptcha=response;
                }
            });
            
            if($.trim(isValidCaptcha) === 'true'){ 
                alert("valid captcha");
                $('#recaptcha_response_field').css({border : '1px solid black !important'});
            }else{
                alert("invalid captcha");
                $('#recaptcha_response_field').css({border : '1px solid red !important'});
            }
            
        }
  });  
});
    </script>

Validate Captcha 
To validate Captcha create validatecaptcha.jsp under your component. 
Add below code to newly created JSP

<%@include file="/libs/foundation/global.jsp"%>
<%@ page import="net.tanesha.recaptcha.ReCaptcha" %>
<%@ page import="net.tanesha.recaptcha.*" %>
<%
 ReCaptchaImpl reCaptcha = new ReCaptchaImpl();
 reCaptcha.setPrivateKey("<Private Key>");
 String remoteAddr =  request.getParameter("remoteAddr");
 String challenge = request.getParameter("recaptcha_challenge_field");
 String uresponse = request.getParameter("recaptcha_response_field");
 ReCaptchaResponse reCaptchaResponse = reCaptcha.checkAnswer(remoteAddr, challenge, uresponse);

 if (reCaptchaResponse.isValid()) {
    out.print("true");
    log.info("valid capticha");
 } else {
    out.print("false");
    log.info("invalid capticha");
 }

%>

Maven dependency 
I have to use the below maven dependency and exported in CORE bundle
     <dependency>
   <groupId>net.tanesha.recaptcha4j</groupId>
   <artifactId>recaptcha4j</artifactId>
   <version>0.0.7</version>
    </dependency>

Note: Replace your public key and private key


By aem4beginner

No comments:

Post a Comment

If you have any doubts or questions, please let us know.