Integrating CAPTCHA or reCAPTCHA with custom assets through plugins

Liferay 6 provides a new feature that you can easily implement a different CAPTCHA than the default CAPTCHA, like reCAPTCHA. A blogs post mentioned: Easily Improve Your CAPTCHA. By the way, for 5.2.x one blogs post mentioned: Implement CAPTCHA in Liferay Portlet. Both blogs posts are nice articles. Much thanks to Alex, Jack, entire Liferay development team and contributors in Liferay community.

This article will address how to integrate CAPTCHA or reCAPTCHA with custom assets through plugins in Liferay portal 6 or above versions.  I will use custom asset Knowledge Base Article as an example. Knowledge Base Article would be useful for Q and A management, Hotel management, Restaurant management, etc.

Introduction

As mentioned in previous blogs posts, Knowledge Base article can have a parent article and / or many child articles. When creating a new article, we need ensure that the response is not generated by a computer. In this case, CAPTCHA would be helpful. Furthermore, reCAPTCHA supplies subscribing websites with images of words that optical character recognition (OCR) software has been unable to read. This would be also helpful when users prefer hearing words in images, rather than reading.

For example, when creating a new Knowledge Base Article, CAPTCHA is required by default.

 Of course, you can quickly enable ReCaptcha via Control Panel | Server Administration | Captcha.

Now when creating a new Knowledge Base Article, reCAPTCHA is required.

How to make it?

Abstracted from the book: Liferay User Interface Development.

In brief, it will just take three steps to integrate CAPTCHA or reCAPTCHA with custom assets through plugins.

• First, Add following lines inside the method serveResource of com.liferay.knowledgebase.admin.portlet.AdminPortlet.

try {
 CaptchaUtil.serveImage(resourceRequest, resourceResponse);
} catch (Exception e) {
 e.printStackTrace();
}

Above code will generate CAPTCHA or reCAPTCHA and returned its content.

• Then add following line inside the method updateArticle  of com.liferay.knowledgebase.admin.portlet.AdminPortlet before creating Knowledge Base article.

CaptchaUtil.check(actionRequest);

• Last, add UI tag Liferay-ui:captcha into jsp, that is, /admin/edit_article.jsp after the line <aui:input name="title" />

<c:if test="<%= article == null %>">
 <portlet:resourceURL var="captchaURL"/>
 <liferay-ui:captcha url="<%= captchaURL %>" />
</c:if>

That’s it. You did integrate CAPTCHA or reCAPTCHA with custom asset, for example, Knowledge Base Article, through plugins.

Where do you find sample WAR?

You can download sample code from

knowledge-base-portlet-6.0.6.1.war

and deploy it.

Note that the WAR was generated based on the portal 6.0.10 (revision 63459).

Summary
As you can see, you would be able to add Integrating CAPTCHA or reCAPTCHA with any custom assets generated by Service-Builder in plugins. The asset Knowledge Base Article is one of them (custom assets).

[Roshan Qureshi]

Thanks Jonas for a nice blog.

[Ashish Sharma]

Hi Jonas,
nice blog.
how can i display alpha numeric values for captcha in liferay?