Google
reCaptcha
Introduction
Google reCaptcha is a popular tool to help secure our forms against spam bots. Often email services will check our forms to ensure we have one present and you may be asked for one to be added. That happened to me. Sitefinity has its own forms and reCaptcha tools but often I find myself creating my own custom form widgets to quickly get the requirement that I have been asked to develop. In this post I look at how to get one added to a custom form you may have created in Sitefinity.
First of all you need to register with Google and get an API key which is assigned to a domain(s). Once you have that, you can then apply it to your custom form. Do consider that if you are using this for a client, it is best to get them to register and get their own API key rather than use your own. The number of times I have been on a project and we find API keys in use that are owned or managed by a past developer... Ugh!
Razor Page
Let start with a form declaration.
@using (Html.BeginForm("ContactMeRequest", "Forms", FormMethod.Post, new { id= "jsFormContactMeRequest", role="form" }))
Inside our form we want to add a hidden form field which our reCaptcha code will use.
<div class="small-12 medium-8 medium-offset-4 cell"> <input type="hidden" name="completed_captcha" id="completed_captcha" data-parsley-required="true" /> <div class="g-recaptcha" data-sitekey="6LeCowsTAAAAAK129629i_6KEOcI7PlsHLc5g8It" data-callback="captchaCallback"></div> </div>
In this markup you will add your API key. You will also notice that my form validation, (in this case parsleyJs), also marks the field as required so the field must be filled in before the form will be submitted.
Add a reference to the reCaptcha script.
@Html.Script("https://www.google.com/recaptcha/api.js", "bottom")
Next we need add our reCaptcha callback function. You will see the reference to this in our markup above.
function captchaCallback() { if (grecaptcha.getResponse() !== '') { $("#completed_captcha").val("valid"); } }
What is Happening?
We want to ensure the form can not be submitted before our reCaptcha process is complete. We use our client side form validation to check a hidden field has a valid entry to prevent submission. We use the reCaptcha callback to run some JavaScript to fill in that field after the user has completed the reCaptcha task. With these two functions we ensure that our form is valid and the reCaptcha process has passed before the form is submitted to our controller.
To further enhance the security you may want to make the validation of the hidden reCaptcha field against something more unique. The ability to validate this may depend on your client side validation scripts ability.
Hopefully this helps further secure your custom forms against the bots.
Thanks for reading and feel free to comment - Darrin Robertson
If I was really helpful and you would buy me a coffee if you could, yay! You can.
Leave a comment Load more commentsMake a Comment