A long time ago we discussed the use of hCaptcha as an alternative to the built-in version. In this article we return to the subject and look at using the Google transparent recaptcha.

The basic idea, as always, is the same. Firstly, register with Google and get your site set up. Then, from your interview there will be two specific things you need to do

1) Call the recaptcha library and when it is loaded you can add your recaptcha to the screen – probably you can handle all of this from a custom Label, just load the code library using the url (probably something like :

https://www.google.com/recaptcha/api.js?onload=myFunction&render=XXXXXX

to get your token using your public key and execute your function if it was successful. Thus you generate your token with the execute method of the google library.

2) When all that is finished, you now have a token which you can pass to your back-end validation code. In the demonstration, a back-end PHP file calls Google with the token you generated in step 1, and uses the secret key for your site to call the siteverify function, passing the token you got in the browser and the secret key you got when you opened your account with Google recaptcha. The PHP file parses the response from Google and hands the response back to your JavaScript code.

Based on the response, you can decide what to do (display a message, set an attribute value, redirect to somewhere else, it’s entirely up to you). In the demonstration example, the back-office call is made using interview.fetch and is in fact loaded when you arrive on the Screen. It is easy to imagine therefore a Custom Next extension, to block the user from advancing once the response is received (or redirecting them, or whatever).

3) If there is a problem with the various steps, show the default out of the box captcha so the user can at least progress.

So in total you are likely to see 4 elements

a) The custom label which will load the JS and display the recaptcha logo, as well as generate the client-side token
b) A call to the PHP file (either in the background or on a button or control click)
c) The PHP code which calls google, gets the response and passes it back to the Interview JavaScript
d) The JavaScript code deciding what to do based on the response from the PHP file.

In these respects it is very similar to hCaptcha. These are not the only ways to handle this, just some ideas. You may wish to use a custom Error rule to block the user from going forward for example, or use some other controls to handle the call to the PHP. You may choose to use ajax or interview fetch depending on your scenario.

Have fun. A simple example is in the Online Store.