RE: Invisible reCaptcha in Liferay webforms 7.2

2020-03-03T06:26:29Z

Hi Shruti
Here is a snippet from what I implemented in order to make invisible recaptcha working:


<c:if test="<%= captchaEnabled %>">
&nbsp;&nbsp; &nbsp;<script src="<%= PropsValues.CAPTCHA_ENGINE_RECAPTCHA_URL_SCRIPT %>?hl=<%= locale.getLanguage() %>&amp;onload=<portlet:namespace />onloadCallback&amp;render=explicit" type="text/javascript"></script>
</c:if>

&nbsp;&nbsp; &nbsp;<div class="g-recaptcha" id="<portlet:namespace />recaptcha"></div>
&nbsp;&nbsp; &nbsp;
&nbsp;&nbsp; &nbsp;

&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<div style="background: #F9F9F9; border-radius: 3px; border: 1px solid #C1C1C1; bottom: 25px; height: 60px; left: 0; margin: 0; padding: 0; position: absolute; right: 25px; width: 300px;">
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<textarea class="g-recaptcha-response" id="g-recaptcha-response" name="g-recaptcha-response" style="border: 1px solid #C1C1C1; height: 40px; margin: 10px 25px; padding: 0; resize: none; width: 250px;"></textarea>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</div>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;
&nbsp;&nbsp; &nbsp;
&nbsp;&nbsp; &nbsp;
&nbsp;&nbsp; &nbsp;<aui:script>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;var <portlet:namespace />onloadCallback = function() {
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;var delay = 0;</aui:script>

&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;if (Liferay.Browser.isIe()) {
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;delay = 3000;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}

&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;setTimeout(
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;function() {
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;grecaptcha.render(
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;'<portlet:namespace />recaptcha',
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;{
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;'sitekey' : '&lt;%= HtmlUtil.escapeJS(PrefsPropsUtil.getString(PropsKeys.CAPTCHA_ENGINE_RECAPTCHA_KEY_PUBLIC, PropsValues.CAPTCHA_ENGINE_RECAPTCHA_KEY_PUBLIC)) %&gt;'
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;);
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;},
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;delay
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;);
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;};
&nbsp;&nbsp; &nbsp;

If you have a callback function, the

g-recaptcha-response

token is passed to your callback when the user submits a successful response. Can you check if you are missing this in your fragement's jsp?
Also, note that things might have changed a bit in liferay 7.2 and some additional changes might be needed as well. Unfortunately I have not checked things with 7.2 till now.

Invisible reCaptcha in Liferay webforms 7.2

2019-12-17T12:39:43Z

Hi,
Liferay version 7.2.0 GA1
I am trying to implement Invisible reCaptcha in Liferay web forms.
Found https://liferay.dev/forums/-/message_boards/message/111175055 this post on forum.
I have created a module fragment to override recaptcha.jsp and added data-size invisible

<div id='recaptcha' class="g-recaptcha"
data-sitekey="<%= HtmlUtil.escapeAttribute(captchaConfiguration.reCaptchaPublicKey()) %>"
data-callback="_onSubmitForm"
data-size="invisible"
></div>

Next, Override form.jsp of 'dynamic data mapping form renderer' to make a call to grecaptcha.execute()

instance.validate(
function(hasErrors) {
if (!hasErrors) {
var formNode = instance.getFormNode();

var currentPageInput = formNode.one('#' + instance.get('portletNamespace') + 'currentPage');

if (currentPageInput) {
currentPageInput.set('value', instance.getCurrentPage());
}

instance.showLoadingFeedback();

Liferay.fire(
'ddmFormSubmit',
{
formId: instance.getFormId()
}
);

Liferay.Util.submitForm(formNode);
}else{
grecaptcha.execute();
}
}
);

Now, when I am trying to submit the form, on Page its giving "Text Verification Failed" error. and on Logs I get

ERROR [http-nio-8080-exec-28][ReCaptchaImpl:121] CAPTCHA text is null. User null may be trying to circumvent the CAPTCHA.

When I checked ReCaptchaImpl.java , it searches for field "g-recaptcha-response"

String reCaptchaResponse = ParamUtil.getString(
httpServletRequest, "g-recaptcha-response");

Is there something that needs to be added to make sure Invisible reCaptcha works smooth?
Any Suggestions Please.

Thank You.