How to use reCAPTCHA in MVC applications?

In this post I will show how to use reCAPTCHA in your ASP.Net MVC applications. Microsoft makes this very easy if you use Web Helper package. It is as simple as writing one line of code in your razor view and you are good to go. Following code snippet shows what I mean by this.

@ReCaptcha.GetHtml(ConfigurationManager.AppSettings["recaptcha_pubkey"], "white", Model.RequestContext.CultureCode)
    
best offer best price example

reCAPTCHA is very service provided by Google. As with use of any third party services there are some pre-requisites like registration, use of keys etc. So before I show some actual code and implementation, I will list the pre-requisites and how to go about it.

Register your web site with reCAPTCHA

Click here to get started. You will need to register your application with Google to use this service. It is totally free to use. After you finish registering your application, you will be given two keys, public and private, to use in your application. As you can see from the code snippet that I showed above, the method is using public key as first argument to GetHtml method. As the names of the keys suggest that public key is what you use in client code. Private key is to be kept private and only used on server side to validate reCAPTCHA input from your input form.

Store public key in configuration file

Since you may be using reCAPTCHA on multiple pages of your MVC application, therefore I will recommend that you store this key in configuration file or database. To keep things simple, I have stored our key in appSettings section of web.config file. As you can see from code snippet above, I am reading recaptcha_pubkey key value from appSettings section.

Add reCAPTCHA to your MVC view

In the past people wrote their own helper code to add reCAPTCHA related code on the pages. Microsoft has made it simple by including reCAPTCHA helper implementation in Web Helper package. You can add reference to this NuGet package in your MVC application to take advantage of these helpers. After you have added reference to this helper package, you will need to write just one line of code in razor view, as shown below.

 @ReCaptcha.GetHtml(ConfigurationManager.AppSettings["recaptcha_pubkey"], "white", Model.RequestContext.CultureCode)
webhelper nuget package

This method allows you to pass various parameters to control look and feel of reCAPTCHA view. For example in the example above, second parameter tells that I want to use "white" theme. Third parameter is passing culture code. You can find more details about various customization parameters at Customizing the Look and Feel of reCAPTCHA. Microsoft helper library allows you to pass all the settings in method used to render reCAPTCHA view.

It is very important that you enclose the rendering code in a form. When you submit information to server, there are two values related to reCAPTCHA that needs to be passed in FORM. Without enclosing reCAPTCHA view in a FORM the validation will not work.

Verify reCAPTCHA input on server

There will no use of adding reCAPTCHA view on your pages if you are not verifying if the user has filled the correct string or not. Following code shows very simple implementation of this check in MVC application.

if (!ReCaptcha.Validate(ConfigurationManager.AppSettings["recaptcha_privkey"]))
{
  model.AddError((int)HttpStatusCode.BadRequest, 
     "Type the words as shown in image", string.Empty);
  return View(model);
}

It is as simple as calling Validate method and passing private key that is assigned to your application by Google for using reCAPTCHA.

And that is pretty much you need to use reCAPTCHA in your MVC application. You can see this all in action at Best Offer Best Price web portal that we are implementing.

Search

Social

Weather

9.7 °C / 49.4 °F

weather conditions Clear

Monthly Posts

Blog Tags