I don’t know about you, but I find the built-in Intelligent Advisor captcha control is a bit, well, old-fashioned. Here it is, in all it’s monochrome splendour:
It certainly feels to me as if it has been forgotten in the many User Experience updates and extensions that have been given to us in the last few years. This thing has not changed since the first release, I think. Maybe I’m exaggerating but it is pretty drab as captchas go.
The other thing that disturbs me about it is the lack (at least, the visible, or verifiable lack) of any server-side verification. Modern captchas rely not only on the user selecting the correct images, but also on a server-side check to make sure that it is really OK.
For example, in more modern captcha scenarios you might be shown an image like this one:
When you select the images correctly, that’s the first level of control. But usually some sort of coded string is generated, using a public site key that identifies yourdomain.com, and it is passed back to the server for checking and decoding. Just in case someone tries to programmatically hack the captcha itself, or tries to leverage it on another site.
Google reCaptcha takes it even further, in version 3 there is no image in many cases – the server simply responds to a request from the website, and using all manner of impressive bells and whistles Google simply responds with a number between 0 and 1, where 1 is completely confident that you are a human and 0 means you are a bot or similar.
So how could we implement these captcha in Intelligent Advisor? Well, we certainly could implement a captcha system to replace the current one. Based on the two choices I mentioned above (hCaptcha and Google reCaptcha) the implementation is remarkably similar. Your own decision can be based on the approach (frictionless with Google, where there is no user interaction, or traditional with hCaptcha) or on the constraints of your organization (Google reCaptcha is often mentioned as being less interested in security than other solutions, make of that what you will, hCaptcha is actually not only free but can earn you credits).
Down to the mechanics of a Captcha. In Intelligent Advisor we will need several items – probably something simple for the display of the image – like a Label extension – and a bit of code for the button click when you leave the Screen, so that we can send a server-side request when you try and navigate. More sophisticated versions could use Input extensions if needed. For the purposes of this article, let us assume we will implement the hCaptcha variant. This assumes you have created an account on their website and registered the website where your Intelligent Advisor interviews are hosted (public cloud or private cloud but visible on the internet (otherwise how will people get to your Interviews?).
The label control in this demonstration would be primarily used to load the captcha library and to insert the <div> that will hold the content.
Note that the div has a number of properties that need to be set correctly, most notably the site key (specific to your website) and the class. The Submit button will need to handle the delivery of the captcha code to the server.
The important things here are the sending of the response from the client side – an encoded string held in the data-hcaptcha-response attribute – to the server for verification. If there is no data available, the Next button does nothing, so the bot is stuck. Let’s assume that the captcha is completed and sent to the server – is it some sort of impersonation attempt coming from a different server?
So we push it to a PHP file on our server, which will then send it on to the hcaptcha server for checking. Notice that this is an asynchronous call. In real life therefore, you will need a strategy to handle when this value is returned to Intelligent Advisor – perhaps through an update key somewhere, or by maintaining everything as not visible until the verification has succeeded, or to redirect the user to a dead-end bot-trap.
In this simple version, an attribute is updated to either true or false depending on the server-side validation. In this simplified version, the PHP simply returns either 1 or 0 for success or failure. And that’s what the Submit button above is checking for. If a 1 is supplied, then all is well and the flag is set to true in the interview.
Of course you don’t have to trigger the validation on the Next button at all – you could do it on any suitable update key, and then handle it before making the Next button available. There are many ways to manage it. This is just for demonstration.
Here is a bit of PHP:
This means that the value of the attribute is updated thanks to a server-side call and the interview can continue (or not).
Here is a demonstration of the basic concept. There are three scenarios – a valid captcha with a good server response, and a valid captcha with a bad server response. The third scenario does not even require any server-side commitment – the bot simply does not respond to the captcha, so there is not client-side data attribute, so nothing is sent and the Next button does nothing.
You can see just how similar the concepts are between hCaptcha and reCaptcha, even though they look very different.
The example hCaptcha project is in the OPA Hub Shop.