My goal was to put a reCAPTCHA onto my registration page. I’m building the site using ASP.MVC using the Razor view engine.
This is a holy hellish bitch to figure out how to get working the first time with all the conflicting posts from people on it and then of course some of it just straight up doesn’t work because of bugs in how the packages are installed.
Obviously you could just use Javascript and roll your own reCAPTCHA with MVC, but since all these folks have gone to great lengths to figure out how to do this within the MVC Framework using HtmlHelpers and what not you would think I could just throw a few references in and a couple of lines of code and get it going. Why reinvent the wheel right? No, it’s not that simple.
The first page you might have found is this one.
Now it all looks great and probably worked fine with ASP.NET MVC 2, but with Razor all the HTML elements that are output are escaped. So you end up with <script> instead of an actual script tag. I could not for the life of me figure out how to get around this and I’m sure it is something really simple, but there are few detailed syntax references for Razor out there.
So, now I found another page indicating that Microsoft has their own set of Helpers for this and the library can be added using NuGet.
Of course he highlights the System.Web.Helpers library as the one that is added by this package installer when in reality the library doing the work is Microsoft.Web.Helpers so don’t try looking for your helper method in System.Web.Helpers.
The other issue is that the NuGet package installer for microsoft-web-helpers is messed up (as of this writing) and doesn’t install all the references that are required to use it so if you try to run your web site after installing this package you get a lovely yellow screen error.
To solve this you need to follow this fellow’s instructions to add the missing references.
Once you have that done, you can then add
@using Microsoft.Web.Helpers
to the top of your view and then your call to
@ReCaptcha.GetHtml(publicKey:"YOUR KEY", theme: "red")
should work. At least it did for me.
Also, once you get this all done it’s fairly trivial to make this work properly with jQuery. All you need to do is submit the two recaptcha fields to your controller method that is doing your validation along with the rest of your form fields.
$('#FORMID').submit(function (event) {
if ($(this).valid()) {
event.preventDefault();
$.post('/CONTROLLER/ACTION', { recaptcha_challenge_field: $("input#recaptcha_challenge_field").val(), recaptcha_response_field: $("input#recaptcha_response_field").val()},
function (data) {
$('#result').html(data);
});
}
});
Edit: Today (March 1) I found this page that describes the syntax for outputting raw HTML in Razor. Looks like it just got posted a day before I was working on this. Syntax is below in case you wanted to use the code embedded in the ReCaptcha DLL from Google Code.
@Html.Raw(Html.GenerateCaptcha())
I didn’t actually try this out yet, so YMMV.