Question

Can anyone explain how to have reCaptcha functionality like stackoverflow in my MVC3 application.

And how can you customize that?

Answer 1

I use the Google ReCaptcha and it works very well and is very simple to implement.

Note that if you are using Https be sure you have the current version of the dll (1.0.5.0 at this time)

You need to create an account on the Google Recaptcha site and get a set of public and private keys. Add the keys to your web project main web.config file:

<appSettings>
    <add key="webpages:Version" value="1.0.0.0"/>
    <add key="ClientValidationEnabled" value="true"/>
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
    <add key="ReCaptchaPrivateKey" value="put your private key value here" />
    <add key="ReCaptchaPublicKey" value="put your public key value here" />
</appSettings>

Now use NuGet and install the reCAPTCHA plugin for .NET

Then, go to your web.config file inside of your VIEWS folder. Add this line:

<namespaces>
  <add namespace="System.Web.Mvc" />
  <add namespace="System.Web.Mvc.Ajax" />
  <add namespace="System.Web.Mvc.Html" />
  <add namespace="System.Web.Routing" />
  <add namespace="Recaptcha"/>
</namespaces>

Then, in your view that you want to show the captcha, add the using statement at the top of your file

@using Recaptcha;

then add this to your view:

<div class="editor-label">
    Are you a human?
</div>
<div class="editor-field">
    @Html.Raw(Html.GenerateCaptcha("captcha", "clean"))
    @Html.ValidationMessage("captcha")
</div>

In your controller action you will need to modify the signature to accept the captcha results:

[HttpPost]
[RecaptchaControlMvc.CaptchaValidator]
public ActionResult ForgotPassword(CheckUsernameViewModel model, bool captchaValid, string captchaErrorMessage) {
    if (!Membership.EnablePasswordReset)
        throw new Exception("Password reset is not allowed\r\n");
    if(ModelState.IsValid) {
        if(captchaValid) {
            return RedirectToAction("AnswerSecurityQuestion", new { username = model.Username });
        }
        ModelState.AddModelError("", captchaErrorMessage);
    }
    return View(model);
}

Following those steps have allowed me to implement captcha on several pages and it works smoothly. Note that the parameter names on the controller action MUST BE NAMED CORRECTLY:

bool captchaValid, string captchaErrorMessage

If you changed these parameter names you WILL get an error at runtime when your form posts back to the controller action.