Integration of Google ReCaptcha With MVC4 Application

It is in trend these days to verify that a user is a human or not and the easiest and most used option to do this is to have Google ReCaptcha in your application. This article elaborates how to integrate Google reCaptcha in a MVC4 application. After going through with this article you may get the benefit of this rich feature.

ReCaptcha

To understand what reCaptcha is we first need to define the term “Captcha“.

Captcha is a test made of an image and distorted text that must be solved by human users when they want to subscribe to websites that want to ensure the user is a human being and not a bot or a computer (= preventing spam). Excerpt taken from link.

The initial step to integrate Google reCaptcha is to register your site/domain to receive public/private keys. To reach that level merely paste this URL in a browser.

As soon as you hit the preceding given URL it gives you given the following screen.



I have registered mine as shown in the following screen shot:



This is how it looks after registering this feature and provides public/private keys along with a reference file and API to use further.



You have registered and now ready to use this excellent feature.

Step 1

Kindly put you public key and private key in the web.config file as shown in the following image:



Step 2

Kindly ensure a few points in order to integrate Google reCaptcha on the .cshtml page as shown in the following image:


Source Code Create.cshtml page is given below:

@model MVCSample.Models.EmpRegistration
@{
    ViewBag.Title = "Create";
}
<h2>
    Create</h2>
<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 type="text/javascript" src='https://www.google.com/recaptcha/api.js'></script>

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>EmpRegistration</legend>
        <div class="editor-label">
            @Html.LabelFor(model => model.Id)
        </div>
        <div class="editor-field">
          @*  @Html.EditorFor(model => model.Id)
            @Htm*@l.ValidationMessageFor(model => model.Id)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Address)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Address)
            @Html.ValidationMessageFor(model => model.Address)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.City)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.City)
            @Html.ValidationMessageFor(model => model.City)
        </div>
        <div class="g-recaptcha"  data-sitekey=@System.Configuration.ConfigurationManager.AppSettings["recaptchaPublicKey"]></div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}
<div>
    @Html.ActionLink("Back to List", "Index")
</div>

Step 3

Verify that the user response as reCAPTCHA is generated and resolved by a user. The following API URL is used to verify the user response.

In the preceding API URL the secret and response parameters are required and whereas the remoteip is optional. We have a response class to verify the user response.



I have created a POST method in the Index action in the RegisterController to verify the user response.

Here the code segment is shown below:

[HttpPost]
public ActionResult Create(EmpRegistration modelEmpRegistration)
{
    bool isCapthcaValid = ValidateCaptcha(Request["g-recaptcha-response"]);

    try
    {
        if (isCapthcaValid)
        {
            if (ModelState.IsValid)
            {
                //dbContext.AddToEmpRegistrations(modelEmpRegistration);
                //dbContext.SaveChanges();

            }
            return RedirectToAction("Create");
        }
        else
        {
            return Content("You have put wrong Captcha,Please ensure the authenticity !!!");
        }
        //return RedirectToAction("Index");
    }
    catch
    {
        return View();
    }
}

public static bool ValidateCaptcha(string response)
{
    //secret that was generated in key value pair
    string secret = WebConfigurationManager.AppSettings["recaptchaPrivateKey"];

    var client = new WebClient();
    var reply =  client.DownloadString(string.Format("https://www.google.com/recaptcha/api/siteverify?secret={0}&response={1}", secret, response));

    var captchaResponse = JsonConvert.DeserializeObject<CaptchaResponse>(reply);

    return Convert.ToBoolean(captchaResponse.Success);

}

Step 4

Run the application and press F5. It'll open a page as shown in the image below:



Click on “Create New” => It will open a page as depicted below:



Case 1

Fill in the desired details and check the checkbox. Just prefix the I'm not a robot. It will open the popup to select the choice.



If you have provide the correct details it will consider you to be a human and shows the following screen as confirmation.



Click on the Create button and it reaches the code segment and executes the code.



As you can see from the image above it has returned “success” from the server meaning it worked perfectly.

Note: After executing successfully it returns to the create page again. I've used this page for demonstration purposes only.

Case 2

If you don't check the checkbox prefix to the message “I'm not a robot” and press Enter. It goes to the code and verifies the authenticity and it returns false. It means you are not a valid user.





Please find the source code as an attachment.

Integration of Google ReCaptcha with MVC4 Application - Running Application.

I hope it will help to resolve your issue.

Thanks.