What is reCAPTCHA ?

A reCAPTCHA is a program that protects websites against bots by generating and grading tests that humans can pass but current computer programs cannot. For example, humans can read distorted text as the one shown below, but current computer programs can’t. Know more…

img intro

Step 1 – Create a Recaptcha Key

The first thing you need to do is retrieve your public and private keys from reCAPTCHA, these can easily be retrieved by signing up here.

On signup, you will be asked to enter a domain where you intend to use reCAPTCHA, fill in your domain name and press the ‘Create Key’ button.

Note: By default, all keys work on “localhost” (or “127.0.0.1”) so you can always develop and test on your local machine.

img signup

Once done with this,you will get your public key and private key for your registered application. Keep it safe with you for now, we will be need them later.

Step 2 – Install Recaptcha for .NET

Now go to your ASP.NET MVC application and open your NuGet Package Manager by right clicking on your project and selecting the “Manage NuGet Packages…” option. Search for recaptcha for .NET and install it. Make sure you download the one shown in the screenshot below as there were plenty others with the same name.

img nuget install

As soon as the installation is complete, you will notice that a change is made to your web.config file, the following fields gets added to your <appSetting> section. Enter the public and private key you had got by registering your app at google.com/recaptchaā€ˇ.

<appSettings>

    <add key="recaptchaPublicKey" value="" />
    <add key="recaptchaPrivateKey" value="" />
</appSettings>

Step 3 – Add the Recaptcha Control to Your MVC View

Open your Views/Account/Register view and add this to the top of the page

@using Recaptcha.Web.Mvc

and include the recaptcha form using the following razor code

<li>
    @Html.Label("Recaptcha")
    @Html.Recaptcha()
</li>

Step 4 – Verify User’s Response to Recaptcha Challenge in your Controller/Action

Next step is to configure recaptcha in your controller/action, start with importing the following namespaces in your controller file (AccountController for this example)

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

Next, go to your Register method and use the following code

RecaptchaVerificationHelper recaptchaHelper = this.GetRecaptchaVerificationHelper();

if (String.IsNullOrEmpty(recaptchaHelper.Response))
{
    ModelState.AddModelError("", "Captcha answer cannot be empty.");
    return View(model);
}

RecaptchaVerificationResult recaptchaResult = recaptchaHelper.VerifyRecaptchaResponse();

if (recaptchaResult != RecaptchaVerificationResult.Success)
{
    ModelState.AddModelError("", "Incorrect captcha answer.");
}

Ready To TEST ?

enter image description here

Run your application and go to your Register page and you now can see the recaptcha form on your register form.

Hope this helps. Any suggestions/feedback/queries if any are welcomed using the comments section below. Cheers!

References