What is reCAPTCHA?

Here is what google has to say about reCAPTCHA:

"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."

Find out more on their website.

How does it work?

The basic premise is that you tick a box to say you are not a robot. reCAPTCHA works out whether or not it needs to test you further. If it trusts you, it will allow you to just tick the box. If it wants more proof that you are not a robot, it will ask you to click on some images that match the description i.e. click on all images which have a river. If you get them correct it will agree you are not a robot. In your server side code you can then check if the reCAPTCHA control was valid or not.

Is it easy to set up?

It's easy when you know how. This blog post makes it easy for you to set up reCAPTCHA on your MVC website. It also works with Umbraco. You install a NuGet package, add the control the form and add some server side code to validate the success of the control.

Registering for reCAPTCHA

Go to https://www.google.com/recaptcha/ Click on get reCAPTCHA
Register a new site, giving your local, staging and production urls

When it is created, you will be able to go into the record and click on Keys to get your Site key and Secret key.

Configuring reCAPTCHA in your web project

Install the NuGet Package RecaptchaNet into your Web project

Install-Package RecaptchaNet

Now go to the web.config file at the root of your web project and update the following appSettings with your Site Key and Secret Key. Also set the ApiVersion to 2:

<add key="recaptchaPublicKey" value="YourSiteKeyHere" />
<add key="recaptchaPrivateKey" value="YourSecretKeyHere" />
<add key="recaptchaApiVersion" value="2" />

Rendering the reCAPTCHA control in your View

Inside your form partial view:

Add this using statement at the top

@using Recaptcha.Web.Mvc

Add this helper where you want the reCAPTCHA to show

@Html.Recaptcha(theme: Recaptcha.Web.RecaptchaTheme.Clean)

Validating the reCAPTCHA response in your Controller

In your controller, at the top add the following using statements:

using Recaptcha.Web;
using Recaptcha.Web.Mvc;

Now we want to ensure the reCAPTCHA was completed successfully.

So in the submit form method before you call the if(ModelState.IsValid) method, add this code:

RecaptchaVerificationHelper recaptchaHelper = this.GetRecaptchaVerificationHelper();
if (string.IsNullOrEmpty(recaptchaHelper.Response))
    ModelState.AddModelError("reCAPTCHA", "Please complete the reCAPTCHA");
    return CurrentUmbracoPage();
    RecaptchaVerificationResult recaptchaResult = recaptchaHelper.VerifyRecaptchaResponse();
    if (recaptchaResult != RecaptchaVerificationResult.Success)
        ModelState.AddModelError("reCAPTCHA", "The reCAPTCHA is incorrect");
        return CurrentUmbracoPage();

if (ModelState.IsValid)
    //Process the valid form

Did you get the Newtonsoft.Json error?

If you got an error saying:

Could not load file or assembly 'Newtonsoft.Json, Version=

You will need to install or upgrade Newtonsoft.Json in your web project.

A simple way to do this is to update it in NuGet Package Manager Console:

Update-Package Newtonsoft.Json -Version 7.0.1

Or if you don't yet have it installed

Install-Package Newtonsoft.Json -Version 7.0.1

Still stuck?

If you are still stuck after following these instructions, please comment below and I will try to help you.

Want to thank me?

If I've helped you out and you want to thank me, why not buy me a coffee?

Buy me a coffee

About the author

Paul Seal

Umbraco MVP and .NET Web Developer from Derby (UK) who specialises in building Content Management System (CMS) websites using MVC with Umbraco as a framework. Paul is passionate about web development and programming as a whole. Apart from when he's with his wife and son, if he's not writing code, he's thinking about it or listening to a podcast about it.

Related Posts

How to search by picked multi node tree picker values in Umbraco v8

This post shows you how you can use examine to search for articles which have the category picked in…

Read Post

How to enable AMP in Umbraco 7 Websites

This post shows you how I set up AMP in my Umbraco 7 website

Read Post

How to render the actual document type icons in the tree in Umbraco

This post gives you the code to be able to see the icons for your document types in the tree view ra…

Read Post

How to animate tree icons in Umbraco v8

This post shows you how you can change the colour and animate tree icons in Umbraco based on a prope…

Read Post