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();
}
else
{
    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=7.0.0.0

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.