How To Add A Recapture Within Your Umbraco Website

Spam is annoying, wasting hours deleting spam is also annoying; if you want to make your life a little easier then read on. CAPTACHAS were introduced to try and stop magic robots from taking over the world... well your inbox at least. If you have ever managed or run a wordpress site that has a comment form enabled, then you will be very familiar with the amount of garbage and junk - buy viagra, meet the girl of your dreams.. the first few might be funny... the ten thousand one isn't. At the time of writing the most user friendly CAPTCHA is one developed by Google, called Recaptcha. In today's tutorial I will cover all the steps required for you to implement this within Umbraco.

How To Implement ReCaptcha Within Umbraco

There are two ways of intergrating RECAPTURE in your website, the quick and easy way, or the slightly more long winded and complicated way. Personally, I'm not a big fan of re-inventing the wheel, so I'm going quick and easy. As we are working with a .NET application, we can use Nuget to import all of the files and and code we need. After the files have installed, you'll need to add in your ReCaptcha Token and password. If you haven't got one yet, you'll need to visit Google here to get one. All you need to do is create a new site, add in your domain (and don't forget localhost for dev). In your app settings section within your web.config, you should see two new reCaptcha settings. Add your details in. Next, we need to add the capture onto a form:
@using reCAPTCHA.MVC

@Html.TextAreaFor(x => Model.Message)

@Html.ValidationSummary(true)
@Html.Recaptcha()

<input type="submit" value="Submit" class=" button_medium" id="submit-contact" />
The code above is pretty simple. Create a form as you normally would, and then use the '@Html.Recaptcha()' HTML helper to render the capture. In the controller that the form posts back, you will need to decorate it with the [CaptchaValidator] attribute.
        [HttpPost]
        [CaptchaValidator]
        public ActionResult ProcessForm(Model model, bool captchaValid)
        {
            if (!ModelState.IsValid)
                return RedirectToCurrentUmbracoPage();

            // DO STUFF
            return RedirectToCurrentUmbracoPage();
        } 
To get the status of the captcha, you will also need to include a boolean input parameter to your action, as seen above. Asides from that, everything else within the controller is just your usual business rules. That really is all there is to it! Obviously, you'll probably want to display an error message if the captcha fails to validate. To display an error is exactly the same process you would use as a normal MVC form/controller, so I'll skip it as it's nearly home time :) If everything has gone according to plan, then when you load your web page, you should be greeted with the Recaptcha form. If you're not too sure about using the Nuget feed and want to do it manually, then I'd receommend looking at this tutorial.

submit to reddit

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

Back to top