In this first post on security with DataFlex WebApp we are looking at hardening the login of our webapp using Googles reCaptcha technology.

Googles reCaptcha is a free service that allows us to tell humans apart from bots and use that information to keep our site more secure.

We are going to implement both reCaptcha V2, the more commonly known reCaptcha with the ‘I am not a robot’ checkbox as well as reCaptcha V3.

reCaptcha V3 is completely invisible to the user and returns a score that can be used to control the use of additional security features such as Two Factor Authentication

To use Googles reCaptcha technology we will use the reCaptcha web control from StarZen Technologies. It is a simple wrapper control that allows use to easily incorporate the reCaptcha technology into our webapp

Add StarZen’s reCaptcha control

To add the reCaptcha control to the webapp we have to copy the javascript files to our AppHtml folder. We also have to add the package files for the control to our source folders.

In addition we have to reference these files in our index.html file as follows

The Google reCaptcha service requires us to register and then use a sitekey and a secret phrase. The best way to supply these values to the control is to build a subclass

the code for the reCaptcha V2 class is as follows

A Similar class is needed for the V3 reCaptcha button class

We also want settings to control the use of the reCaptcha control in our application so we will add a few properties to our webapp object

First we add the pbUseReCaptcha property. Setting it to true will enable reCaptcha while setting it to false will completely disable it.

We also add the psUseCaptchaVersion property that will allow us to select the version of Recaptcha to use. Currently either “V2” or “V3”

Now on to the login screen to add the reCaptcha control and use it

After adding a use statement at the top for our reCaptcha V2 class we will add a reCaptcha V2 object just before the login button

To implement the switch to turn reCaptcha functionality on and off we modify the OnLoad procedure as follows

Based on the pbUseRecaptcha property we either render or hide the reCaptcha V2 control

to use the reCaptcha V2 we need to modify the login buttons OnClick method as follows

when the login button is clicked we call the VerifyToken method of the reCaptcha control. This will validate our reCaptcha token with google.

if the validation is ok we will simply call the DoLogin method. If the validation fails we will show a message box to the user alerting them to check the ‘I am not a robot’ checkbox.

reCaptcha V3

The recaptcha V2 service requires a visual element the user has to interact with. The new reCaptcha V3 service does not need any interaction with the user at all. It is fully transparent to the end user

The reCaptcha V3 control returns a score between 0.0 and 1.0, 1 being most likely to be human and 0 being most likely a bot.

We wrapped the reCaptcha V3 functionality into a button class for WebApp making it very easy to be added to for example a login page by replacing the login button

Because we want to be able to switch reCaptcha versions we will add the V3 login button and control the use with our properties

after adding a use statement for our reCaptcha V3 class we created earlier we can add the following button right after the existing login button

this will add another login button to our login screen. Instead of a regular OnClick procedure this control as a OnCaptchaVerified event that fires when the captcha token us verified after the user clicks the button.

The event has two parameters a boolean indicating success and a number containing the reCaptcha score. The score ranges from 0.0 to 1.0 with 1.0 showing a strong indication of the user being human while a score of 0 showing a strong indication of the user being a bot.

The application can then take steps based on these scores. For this first example we will simply only allow login with scores above a certain number. We will add a property do define that value as well

So lets add our property to our webapp object

and then in our OnCaptchVerified event we will use that value

This code will now check the score and if the score is at least the score in our setting will allow the login otherwise will show an error to the user

In our next installment to this series we will look at using the score from the recaptcha service to control the use of Two Factor Authentication.

Michael Salzlechner is the CEO of StarZen Technologies, Inc.

He was part of the Windows Team at Data Access Worldwide that created the DataFlex for Windows Product before joining StarZen Technologies. StarZen Technologies provides consulting services as well as custom Application development and third party products specifically for DataFlex developers