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
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
No comments:
Post a Comment
If you have any doubts or questions, please let us know.