ReCaptcha Web Helper in ASP.NET MVC 3 RC

Posted by: Malcolm Sheridan , on 11/25/2010, in Category ASP.NET MVC
Views: 170576
Abstract: The following article demonstrates how to use the ReCaptcha web helper in ASP.NET MVC 3 RC

ASP.NET MVC 3 RC contains a full suite of web helpers that Microsoft have made available through the Microsoft Web Helpers library. This can be downloaded through NuGet (formerly NuPack). NuGet is a free open source package manager that makes it easy for you to find, install, and use .NET libraries in your projects. One web helpers that is long overdue is the ReCaptcha web helper. Captcha is a type of challenge-response test used in computing to ensure that the response is not generated by a computer. This article will show you how to download the library and start using this web helper. This code also works in WebMatrix if you're using it.

Before moving on, you need to download ASP.NET MVC 3 RC. Click here to download and install them using the Microsoft Web Platform Installer.

Open studio 2010 and create a new ASP.NET MVC 3 Web Application (Razor) project. The new MVC 3 dialog can be seen below:

Empty Template Razor 

Choose Razor as the view engine and click OK.

The next step is to download the Microsoft Web Helpers library through NuGet. Follow these steps to do this:

Step 1: Right click the website and choose Add Package Reference.


MvcAdd Package Reference 

Step 2: The Add Package Reference dialog will open. Search for Microsoft in the search box in the top right corner. Upon completion you'll see microsoft-web-helpers option. Select that option and click Install.


Microsoft Web Helpers 

Step 3: Click Close to return to the project

Check the references and you'll see that the library has been added to the project.

System Web Helpers


Now it's time to start coding! The web helper I’m focusing on today is the ReCaptcha web helper. This web helper renders a captcha control in your form so you can validate that this, to the best of your knowledge, a human submitting the form. The code below demonstrates how to include the ReCaptcha web helper:

@ReCaptcha.GetHtml(theme: "red")

All of the GetHtml parameters are optional. You can use the new optional parameters in C# 4.0 to pass all or single parameters. The list below outlines the parameters:

• theme – the theme that will be used by the website
• language – the language to display the captcha challenge
• tabIndex – the tab index of this control
• publicKey – a unique identifier for your domain

The following screen-shot demonstrates how to use the ReCaptcha web helper: 

Recaptch Get Html

Before moving on you must generate a public and private key. This is outside the bounds of this article, but it’s a unique identifier for your domain. You can go
here to generate these keys. Once the keys have been generated, you must add the public key to the ReCaptcha web helper that will be rendered in the browser. The private key will be used in the server side code to verify the incoming captcha request. I’m adding the public key value to the _ViewStart page. _ViewStart is a page that will be executed before any view is rendered. This ensures that whatever common code I put in there will be available to all the views. Add a new page to the Views folder and call it _ViewStart.cshtml. Add the following code: 

Recaptcha Public Key

The public key in this article is for demonstration purposes only. To validate the user has entered the correct value when submitting the form, you will use the ReCaptcha.Validate method. The following code demonstrates how to validate the ReCaptcha code in an action method: 

Recaptch Validate

You must pass the private key to the ReCaptcha.Validate method. This will ensure the validation between the client and server are correct. If you build the application now and enter in the incorrect captcha, you'll see a Failed message returned, otherwise it'll be Ok.

The ReCaptcha web helper is a welcome addition to the framework. It certainly takes the pain out of adding captcha controls/widgets to your website.

The entire source code of this article can be downloaded over
here

Give a +1 to this article if you think it was well written. Thanks!
Recommended Articles
Malcolm Sheridan is a Microsoft awarded MVP in ASP.NET, a Telerik Insider and a regular presenter at conferences and user groups throughout Australia and New Zealand. Being an ASP.NET guy, his focus is on web technologies and has been for the past 10 years. He loves working with ASP.NET MVC these days and also loves getting his hands dirty with jQuery and JavaScript. He also writes technical articles on ASP.NET for SitePoint and other various websites. Follow him on twitter @malcolmsheridan


Page copy protected against web site content infringement by Copyscape


User Feedback
Comment posted by nicholas on Tuesday, November 30, 2010 4:43 AM
Hi Malcolm,
I just download your the source code of this article, and run it in VS2010, there is a error :
Attempt by method 'Microsoft.Web.Helpers.ReCaptcha.GetHtmlWithOptions(System.String, System.Object)' to access method 'System.Web.WebPages.WebPageContext.get_HttpContext()' failed.

What's wrong ? Did I miss something ?
Comment posted by Malcolm Sheridan on Wednesday, December 1, 2010 4:35 PM
@nicholas
Check that you have the correct version installed
Comment posted by Albert on Monday, December 6, 2010 4:26 PM
Hi! I`m new in the world of mvc , and I am having the same problem of nick, in the index view it doesn´t recognize reCapcha,
could you be more especific with the solution? I have install the microsoft.web.helper package.

Thank you !!
Comment posted by Albert on Tuesday, December 7, 2010 10:47 AM
Hi just get the latest version package installed at my project,at now it´s renders perfectly,
the problem is that when I submit the entered text, and i check it, validate function is always false(even the text is correct)

  if (ReCaptcha.Validate(privateKey:"XXXXXXXXXXXXXXXXXXXXXXXXXXXX" ))//this is always false!

Any idea what´s wrong?? i have put the html code in a layout.cshtml page.. (razor engine..)

Comment posted by Malcolm Sheridan on Wednesday, December 8, 2010 11:43 PM
@Albert
Glad you solved your issue.  As far as the key goes, I beleive you'll have to generate a unique key for your website.  Try that out and let me know.
Comment posted by Paul on Tuesday, December 21, 2010 11:09 AM
Can this be validated client side?
Comment posted by Malcolm Sheridan on Wednesday, December 22, 2010 9:59 PM
@Paul
Good question.  I haven't tried that.  If you try it, let me know the result.
Comment posted by Kurt on Tuesday, May 17, 2011 11:28 AM
The recaptcha box renders well in IE9, IE9 and Chrome, but not in Firefox.  Any thoughts?
Comment posted by Alexander Beletsky on Monday, August 8, 2011 5:06 AM
Excelent article, helped me a lot :)
Comment posted by Ranjeet Ray on Thursday, August 25, 2011 6:06 AM
helpless article, this will give error
'Microsoft.Web.Helpers.ReCaptcha.GetHtmlWithOptions(System.String, System.Object)' to access method 'System.Web.WebPages.WebPageContext.get_HttpContext()' failed
Comment posted by Steve Knight on Tuesday, September 13, 2011 5:46 PM
Great article and works great too
Comment posted by Jessica Janiuk on Thursday, September 22, 2011 5:09 PM
About two weeks ago I used your method, and it worked perfectly.  However, today, I installed the same Microsoft.Web.Helpers library, and Recaptcha is no longer included in the library.  I'm not sure why, but unfortunately now it's a bit harder to do recaptcha with ASP.NET MVC3 with Razor.
Comment posted by howardsteph on Monday, December 5, 2011 9:15 AM
Wow! This can be one of the most helpful blogs we've ever come across on thesubject. Basically wonderful info! http://onlinecanadianpharmacynorx.com
Comment posted by zeeshan on Saturday, February 4, 2012 10:50 AM
i got the following when i run your provided source code.

Attempt by method 'Microsoft.Web.Helpers.ReCaptcha.GetHtmlWithOptions(System.String, System.Object)' to access method 'System.Web.WebPages.WebPageContext.get_HttpContext()' failed.
Comment posted by Brendan on Friday, February 24, 2012 2:35 AM
How could I get the validation precedure to register as an attribute, for example

In the View Model

[CaptchaInvalid(ErrorMessage = "Recaptcha validation failed")]

Thanks!
Comment posted by Mark Salon on Wednesday, March 21, 2012 9:09 PM
I'm curious to find out what blog platform you happen to be working with? I'm having some small security problems with my latest website and I'd like to find something more secure. Do you have any suggestions?  
Comment posted by Louis on Tuesday, May 22, 2012 5:21 AM
Brilliant stuff! This recaptcha stuff was driving me crazy until I found this guide.
Comment posted by Sheila Wood on Monday, June 18, 2012 7:07 AM
Useful information like this one must be kept and maintained so I will put this one on my bookmark list! Thanks for this wonderful post and hoping to post more of this!
http://buyprozac.in
Comment posted by Sheila Wood on Sunday, June 24, 2012 1:56 PM
http://insurevictoria.com

All the contents you mentioned in post are too good and can be very useful. This one is great and is really a good post. I think it will help me a lot in the related stuff and is very much useful for me. I will keep it in mind, thanks for sharing the information keep updating, looking forward for more posts.
Comment posted by Rikin Patel on Monday, August 27, 2012 7:48 AM
Thanks a lot...nice working....

I downloaded this code i m facing some error so solved it and any one download source code then download from hear...
http://sdrv.ms/SHvEQT
Comment posted by James Croft on Thursday, October 4, 2012 5:33 AM
I am having a problem which I wonder if someone could help me fix.

When I debug my MVC site on my local machine, ReCaptcha will detect if it hasn't been filled in and will return the view with the model and display the error message.

However, when I host the site on my server, if I leave the captcha empty or even fill it in, when I click submit the page is directed to the "Error" page in the Shared folder in the solution. This is confusing and I can't seem to replicate the problem on my local machine.

Can anyone help?
Comment posted by Preveen on Thursday, November 15, 2012 8:55 AM
Will this work in ASP.NET MVC4
Comment posted by Naimish Dave on Thursday, June 13, 2013 8:51 AM
Getting following exception!
Attempt by method 'Microsoft.Web.Helpers.ReCaptcha.GetHtmlWithOptions(System.String, System.Object)' to access method 'System.Web.WebPages.WebPageContext.get_HttpContext()' failed.

Any suggestions please?
Comment posted by online pharmacy on Saturday, August 31, 2013 10:03 PM
Check this canada pharmacy no prescription here http://www.euromedarea.org/
Comment posted by ecig review on Wednesday, October 16, 2013 9:24 AM
Get more information about buy ecigarettes online in this link now. http://www.inamcfp.org
Comment posted by Ranjit Panigrahi on Friday, June 6, 2014 12:39 AM
Is there any way we can validate the captcha on client side, without making a postback?

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel