Showcase: Google ReCAPTCHA & K2

 

 

Have you ever been to a website, and before you can submit or view information, you have had to verify that you are not a robot?

While this might be a bit annoying (of course you are not a robot!) there is a very good reason for doing this – to stop automated software, or “bots” from abusing the website. There is any number of “bad actors” out there who would like to exploit weaknesses in your site.

To try and sort the humans from the bots, CAPTCHA was invented as a way of testing who you were: man or a machine. CAPTCHA is an acronym that stands for Completely Automated Public Turing Test to Tell Computers and Humans Apart.

In the bad old days CAPTCHAs were usually images of squiggly text or numbers that you had to read and type into a text box, like the image below. They were not very friendly or pretty.

In 2009 Google acquired one of the CAPTCHA systems called reCaptcha. In the words of Google:

reCAPTCHA is a free service that protects your website from spam and abuse. reCAPTCHA uses an advanced risk analysis engine and adaptive CAPTCHAs to keep automated software from engaging in abusive activities on your site. It does this while letting your valid users pass through with ease.

reCaptcha is more user-friendly, asking users to verify you are not a robot by showing the user squares of images, and asking the user to select ones that meet a criterion, such as those having a street sign in them. You first tick the “I’m not a robot” box and then complete the test.

So, if you have a public facing website that allows users to view or submit information, you will probably be interested in stopping bots from running amok by using something like reCaptcha. What if your publicly facing form is using K2. Not to worry, you can quite easily add reCaptcha to your K2 forms.

The first thing you will need is a google account. If you don’t have one, visit Google and create one.

Then visit the reCaptcha site and click on the Get reCaptcha button and enter your Google login details.

Once you have logged in you will need to register your site. Give it a label and select the reCaptcha V2 option. You will need to enter the domain name for your K2 site (e.g. denallix.com) 

Once you have done this you will be shown the information needed to add reCaptcha to your site.

To add reCaptcha to your K2 form follow these steps:

  1. Create a new view (e.g. named “Google.Recaptcha.Verify.Item”)
  2. Add a data label to the view named “Recaptcha Script Data Label”
  3. Add an expression to your data label and add the following script to the expression, taking care to replace the highlighted value with your site key obtained above

<script type=”text/javascript”>var recaptchaCallback = function(response) {$(‘span[name=”Result Data Label”]’).SFCLabel(“option”, “text”, response);};</script><script src=’https://www.google.com/recaptcha/api.js’ ></script> <div class=”g-recaptcha” data-sitekey=”<your site key>” data-callback=”recaptchaCallback”></div>

  1. Make sure you mark your data label as a literal
  2. Add another data label called “Result Data Label”

At this point you can run your view, and you should be able to verify you are not a robot. When you are verified your Result Data Label should have a long string in it:

Great! You have verified you are not a robot, however, this is only half the story. Even though Google has returned a response (that long string), you have not fully verified. This is because you need to send that response off to Google now and get back a final confirmation.  To do this you will need to call Googles https://www.google.com/recaptcha/api/siteverify URL. The best and easiest way to do this is via a K2 REST service.

To create a reCaptcha REST service instance you will need a swagger file. A swagger file describes the service and is used by K2 for it to create the Service Instance and related Service Objects. The quickest and easiest way to create this is by using a service like REST United.

There is only one endpoint needed –  the following images describe the steps to create it in Rest UNITED.

Once you have the swagger file (you can export this from RESTUnited, go to Test & Export, select Swagger and then Export) place it on a location (i.e. file share or website) accessible by K2.

You can now create a new REST Service Instance and add this location to the “Descriptor Location” setting for your service instance.

Once your Google reCaptcha service is created, you can generate the SmartObject you need to perform the verification. The Service Object you need will be called “ValidationResponse” if you followed the steps above for creating the swagger file in RESTUnited. You can ask K2 to create the SmartObject for you by using the “Generate SmartObjects” button on the Service Instances page in Management.

This SmartObject will have a single “Verify” method that you need to call. This method takes two parameters: secret and response. The secret parameter maps to the “secret key” that was generated for you by Google when you registered your site. The response parameter is the long string that was returned to your “Result Data Label”

Instead of having to add the “secret” parameter in every time you call this “Verify” SmartObject method, you can add it in as a specific value in the SmartObject method definition. Edit the SmartObject method and choose to bind “secret” to a specific value, and paste your secret key in (don’t worry if K2 reports the value as “undefined” as per the image below, it will retain the value).

Now when you call this method on your form you do not need to pass the secret key in.

So now you can complete the final piece of the puzzle, and send Google your response and secret and get verification that the user is not a robot!

  1. Add a new data label to your view called “Recaptcha Valid Data Label”. Optionally you can add another data label to hold any error codes returned by the verify call (e.g. add an “Error Codes Data Label”)
  2. Add a new unbound rule to your view called “Verify Recaptcha Response” and add an action to call a SmartObject method
  3. Select your “Validation Response” SmartObject created above and the “Verify” method.
  4. Configure the action and map the “Result Data Label” to the “response” input parameter, and the “Success” property to the “Recaptcha Valid Data Label” in the output mappings.

  1. You can now finish this view and add it to a form. On your form you can now call the “Verify reCaptcha Response” rule in response to an event on your form, such as a button click. You will first want to check that the “Result Data Label” has a value, so that you can tell if the user has tried the reCaptcha verification. Once you have called the rule to verify the response you can check the value in “Recaptcha Valid Data Label” to see if is true (passed) or false (failed), and then act accordingly.

You now have a re-usable view and pattern for implementing Google reCaptcha on any of your K2 forms!

Leave a Reply

Your email address will not be published. Required fields are marked *