Liferay CAPTCHA Configuration

Liferay CAPTCHA Configuration

How to configure CAPTCHA for Liferay

Overview


A lot of sites use CAPTCHA to protect themselves, and to make sure only human beings are allowed to access the site. Liferay has also an out-of-the-box CAPTCHA support. It's enabled by default for account creation, forgot password functionality and can be also configured for other sensitive actions. There are two types of CAPTCHA Engines supported by Liferay: SimpleCaptcha and Google's reCAPTCHA. This article describes how to setup each of them for your portal.


General CAPTCHA Configuration


CAPTCHA is configured in Liferay inside the System Settings -> Security Tools -> CAPTCHA configuration menu:

By default, CAPTCHA is enabled for "Create Account" and "Send Password" actions, but can be also enabled for Message Boards or Forms.

The default CAPTCHA Engine is "SimpleCaptcha", but can be changed to "reCAPTCHA".

An example of CAPTCHA can be found on the forgot screen (if "Send Password CAPTCHA Enabled" is checked):


How does it work?


Liferay renders a CAPTCHA with the <liferay-captcha:captcha /> tag, sample. The tag handler CaptchaTag renders the /captcha/page.jsp JSP file, which includes either simplecaptcha.jsp or recaptcha.jsp based on the CAPTCHA Engine defined in configuration.

Captcha interface defines methods to provide the CAPTCHA image and to check the CAPTCHA code, and has two implementations - SimpleCaptchaImpl (for SimpleCaptcha) and ReCaptchaImpl (for reCAPTCHA).

CaptchaUtil#check method is used to validate code entered by user.

Using these classes CAPTCHA can be also integrated to a custom widget.


SimpleCaptcha vs reCAPTCHA


SimpleCaptcha is quite simple, as it's name says: it just renders an image with generated text and visual effects to make the text less readable by automatic scripts.

reCaptcha is more secured - it renders images from Google which are easily recognizable by humans, but less readable by computer programs.


SimpleCaptcha Configuration


SimpleCaptcha has a lot of configuration options, which can be defined using the System Settings -> Security Tools -> CAPTCHA configuration menu. CAPTCHA width and height, text generation logic, visual effects (background / noise / etc.) can be customized.

The logic of CAPTCHA image generation can be found in SimpleCaptchaImpl class:

protected nl.captcha.Captcha getSimpleCaptcha() {
nl.captcha.Captcha.Builder captchaBuilder = new nl.captcha.Captcha.Builder(getWidth(), getHeight());
captchaBuilder.addText(getTextProducer(), getWordRenderer());
captchaBuilder.addBackground(getBackgroundProducer());
captchaBuilder.gimp(getGimpyRenderer());
captchaBuilder.addNoise(getNoiseProducer());
captchaBuilder.addBorder();
return captchaBuilder.build();

} 


A CAPTCHA image is generated with the defined width and height. Then CAPTCHA text is generated using Text Producers / Word Renderers. Then the background is added with Background Producers. Finally visual effects are added with Gimpy Renderers / Noise Producers.


Width and Height Configuration

CAPTCHA with and height for SimpleCaptcha can be defined in configuration:

By default it has 50x150 size, but can be adjusted.


Text Producers

Text Producers define what text is produced for the CAPTCHA image. Possible options:

  • com.liferay.captcha.simplecaptcha.DictionaryWordTextProducer - generates text as dictionary words:

  • com.liferay.captcha.simplecaptcha.PinNumberTextProducer - generates text as 4-digits number:

  • nl.captcha.text.producer.DefaultTextProducer - generates alpha-numeric text:
      
  • nl.captcha.text.producer.FiveLetterFirstNameTextProducer - generates a 5-letters text:

Note: if multiple Text Producers are defined - a random one is chosen during the CAPTCHA image generation.



Word Renderers

Word Renderers are used together with Text Producers - they define how the produced text is rendered on the generated image: text font, color, etc. There is only one possible option for the Word Renderer: nl.captcha.text.renderer.DefaultWordRenderer, nothing should be changed for this configuration option.


Background Producers

Background Producers define what background is rendered for the CAPTCHA image. Possible options:

  • nl.captcha.backgrounds.TransparentBackgroundProducer - generates white background:
  • nl.captcha.backgrounds.FlatColorBackgroundProducer - generates gray background:
     
  • nl.captcha.backgrounds.GradiatedBackgroundProducer - generates gradiated background:

  • nl.captcha.backgrounds.SquigglesBackgroundProducer - generates background with "squiggles" (line that curls and loops in an irregular way):

Note: if multiple Background Producers are defined - a random one is chosen during the CAPTCHA image generation.


Gimpy Renderers

Gimpy Renderers create different visual effects for the CAPCHA. Possible options:

  • com.liferay.captcha.simplecaptcha.gimpy.BlockGimpyRenderer - adds a "pixelate" effect:

  • com.liferay.captcha.simplecaptcha.gimpy.DropShadowGimpyRenderer - adss a dropdown shadow effect:
      
  • nl.captcha.gimpy.FishEyeGimpyRenderer - adds a "fish eye" (convex grid) effect:
  • com.liferay.captcha.simplecaptcha.gimpy.RippleGimpyRenderer - adds a "ripple" (wave) effect:

  • nl.captcha.gimpy.ShearGimpyRenderer - adds a "shear" effect (CAPTCHA text might not be readable enough with this visual effect):

Note: if multiple Gimpy Renderers are defined - a random one is chosen during the CAPTCHA image generation.


Noise Producers

Noise Producers create additional visual effects ("noise") on top of the CAPCHA image. Possible options:

  • nl.captcha.noise.CurvedLineNoiseProducer - adds a curved line on top of CAPTCHA image:

  • nl.captcha.noise.StraightLineNoiseProducer - adds a straight line on top of CAPTCHA image:

Note: if multiple Noise Producers are defined - a random one is chosen during the CAPTCHA image generation.


Customization

If out-of-the-box configuration is not enough for SimpleCaptcha effects - developers can create their own implementations, and specify them in configuration. The following interfaces should be implemented in this case:

  • Text Producer: nl.captcha.text.producer.TextProducer
  • Word Renderer: nl.captcha.text.renderer.WordRenderer
  • Background Producer: nl.captcha.backgrounds.BackgroundProducer
  • Gimpy Renderer: nl.captcha.gimpy.GimpyRenderer
  • Noise Producer: nl.captcha.noise.NoiseProducer

reCAPTCHA Configuration


Google reCAPTCHA is another CAPTCHA Engine supported by Liferay. It can be selected in the configuration (System Settings -> Security Tools -> CAPTCHA):

In order to use reCAPTCHA - a new site should be registered on the Google's reCAPTCHA service.

There are two types of reCAPTCHA: score-based - v3 and challange-based - v2. V3 is not currently supported, so v2 one should be created (leave the default "I'm not a robot" Checkbox option). Specify the label and domains for which CAPTCHA should be applicable. Once reCAPTCHA is created - site key and secret key should be generated:

Copy generated keys to reCAPTCHA Public Key / reCAPTCHA Private Key fields in CAPTCHA configuration and save the changes:

Once configuration is saved - Google's reCAPTCHA should be displayed on portal:

Note: Liferay should be accessed using the domain specified in the Goggle reCAPTCHA configuration.



Enjoy 😏

 

Comments

Post a Comment

Popular posts from this blog

Liferay Search Container Example

Or how to implement a custom search container in Liferay Overview   Search Containers are used in Liferay to display the table data. This article shows a simple example of how to implement a custom search container.  Example < liferay-portlet :renderURL varImpl ="iteratorURL" /> < liferay-ui :search-container total =" <%= ProjectLocalServiceUtil. getProjectsCount (scopeGroupId) %> "                              delta ="10"                              emptyResultsMessage ="no-projects-found"                              iterato...
Read more

Installing Blade CLI from Command Line

Installing Blade CLI from Command Line Download JPM Jar file Download biz.aQute.jpm.run.jar file using link: https://raw.githubusercontent.com/jpm4j/jpm4j.installers/master/dist/biz.aQute.jpm.run.jar Initialize JPM Run command: java -jar biz.aQute.jpm.run.jar init Install Blade Run command: jpm install -f https://releases.liferay.com/tools/blade-cli/latest/blade.jar to install blade. Update blade to make sure you have the latest version, sample:  blade update Current blade version 3.3.0.201811151753 Updating from: https://repository-cdn.liferay.com/nexus/content/repositories/liferay-public-releases/com/liferay/blade/com.liferay.blade.cli//3.8.0/com.liferay.blade.cli-3.8.0.jar Update completed successfully. Congratulations! Now you have Blade CLI installed. Sample command for mvc-portlet: blade create -t mvc-portlet -p com.demo.portlet -c DemoPortlet demo-portlet Enjoy 😏
Read more

Liferay Keycloak integration

Image
Liferay Keycloak integration using OpenID Overview This tutorial explains how to configure OpenID SSO between Liferay 7.2 and Keycloak 7.0.1 Installation instructions KeyCloak Configuration 1. Install and startup Keycloak server Download latest Keycloak server:  https://www.keycloak.org/downloads.html Unzip keycloak-7.0.1.zip folder. Run  keycloak-7.0.1/bin/standalone.sh  (or  keycloak-7.0.1/bin/standalone.bat ) file. Keycloak should be started on 8080 port:  http://localhost:8080 2. Create default admin user: and sign in to Admin Console. 3. Check OpenID configuration Click on "OpenID Endpoint Configuration": JSON configuration should appear, like this: { "issuer": "http://localhost:8080/auth/realms/master", "authorization_endpoint": "http://localhost:8080/auth/realms/master/protocol/openid-connect/auth", "token_endpoint": "http://localhost:8080/auth/realms/master/protocol/openid-con...
Read more