ReCaptcha in ASP.NET MVC3

As a web developer we know what is captcha is. It’s way to confirm users as they are human.Following is captcha definition per WikiPedia.

A CAPTCHA ( /ˈkæptʃə/) is a type of challenge-response test used in computing as an attempt to ensure that the response is generated by a person. The process usually involves one computer (a server) asking a user to complete a simple test which the computer is able to generate and grade. Because other computers are assumed to be unable to solve the CAPTCHA, any user entering a correct solution is presumed to be human. Thus, it is sometimes described as a reverse Turing test, because it is administered by a machine and targeted to a human, in contrast to the standard Turing test that is typically administered by a human and targeted to a machine. A common type of CAPTCHA requires the user to type letters or digits from a distorted image that appears on the screen.

You can find more details about that on following link.

http://en.wikipedia.org/wiki/CAPTCHA.

Google ReCaptcha Service:

Google provide Recaptcha service free of charge to confirm users whether they are human or computer. We can directly use the recaptcha service with there api. You have to create a private key for that and that key will validate domains against it. Even we can create the global key for all the keys. You can find more information about it from below link.

http://www.google.com/recaptcha/learnmore

ReCaptcha Web helpers in ASP.NET MVC 3:

As per I have also written in my previous post. ASP.NET Web helpers from Microsoft comes inbuilt with tools update. If you not installed it then you have to download NuGet package for it. You can refer my previous post for this.

Now we have all things ready its time to write ReCaptcha code in ASP.NET MVC. First we have create key for recaptcha service. I have created it via following link. It’s very easy.

https://www.google.com/recaptcha

Now let’s start coding. Recaptcha web helper renders a captcha control in your web form so you can validate this. Following is code which will render captcha control.
@ReCaptcha.GetHtml(theme: "red")
It's take four argument

1. Theme- theme specify the color and look for ReCaptcha control. You can have to put theme name over there
2. Language- You need to specify the captcha challenge language
3. TabIndex- Tab Index for this control
4. PublicKey- A unique public key which we have created for our domain.

Following is a code how to use above code in real time. I have updated standard logon control template for ASP.NET MVC.

@model CodeSimplifiedTest.Models.LogOnModel

@{
    ViewBag.Title = "Log On";
    ReCaptcha.PublicKey=@"6LedqMcSAAAAAJgiIjKlyzzV2czbGOPvij1tc39A";
}

<h2>Log On</h2>
<p>
    Please enter your user name and password. @Html.ActionLink("Register", "Register") if you don't have an account.
</p>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
@Html.ValidationSummary(true, "Login was unsuccessful. Please correct the errors and try again.")

@using (Html.BeginForm()) {
    <div>
        <fieldset>
            <legend>Account Information</legend>

            <div class="editor-label">
                @Html.LabelFor(m => m.UserName)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(m => m.UserName)
                @Html.ValidationMessageFor(m => m.UserName)
            </div>

            <div class="editor-label">
                @Html.LabelFor(m => m.Password)
            </div>
            <div class="editor-field">
                @Html.PasswordFor(m => m.Password)
                @Html.ValidationMessageFor(m => m.Password)
            </div>

            <div class="editor-label">
                @Html.CheckBoxFor(m => m.RememberMe)
                @Html.LabelFor(m => m.RememberMe)
            </div>

            <p>
               @ReCaptcha.GetHtml(theme: "red")
            </p>
           
        </fieldset>
    </div>
}

As you can see in above code for recaptcha public key and Recaptcha.GetHtml part. Now its time to captcha validation in server side code in controller. As I have used standard logon template for this.I have modified Logon Action Result in Account controller like following.

[HttpPost]
public ActionResult LogOn(LogOnModel model, string returnUrl)
{
    if(!ReCaptcha.Validate(privateKey:"6LedqMcSAAAAAJgiIjKlyzzV2czbGOPvij1tc39A"))
    {
        return Content("Failed");
    }
  
    if (ModelState.IsValid)
    {
        if (Membership.ValidateUser(model.UserName, model.Password))
        {
            FormsAuthentication.SetAuthCookie(model.UserName, model.RememberMe);
            if (Url.IsLocalUrl(returnUrl) && returnUrl.Length > 1 && returnUrl.StartsWith("/")
                && !returnUrl.StartsWith("//") && !returnUrl.StartsWith("/\\"))
            {
                return Redirect(returnUrl);
            }
            else
            {
                return RedirectToAction("Index", "Home");
            }
        }
        else
        {
            ModelState.AddModelError("", "The user name or password provided is incorrect.");
        }
    }

    // If we got this far, something failed, redisplay form
    return View(model);
}

Here I have validated the captcha control with public key and if validation failed then it will sent failed message. Now it’s time to run that in browser and let’s see output.



That’s it. Its easy to integrate. Hope you like it..Stay tuned for more.. Till then Happy Programing..Namaste!!