Captcha for MVC

I was working on a MVC4 project in my requirements – use captcha to validate the human vs Robots/spam.

I researched a lot to find the better solution and here are the things I came across that are better.

1) Visual Captcha – unique design which you never seen Demo
2) No Captcha Recaptcha by Google – Read more

Previously google had reCaptcha V1.0 which has some security threats. Their team really put some efforts on that gave us the better outcome out of it with API v2.0

Click here to see the implemetation/example on Visual Captcha.

I looked for ASP.NET MVC implementation for Google reCaptcha API 2.0, but couldn’t find any.

How to implement??

1) Lets create an API key pair for your site at https://www.google.com/recaptcha/intro/index.html and click on Get reCAPTCHA at top of the page and follow the below steps to create an application.

2) Once you have done with registration, the following keys will be generated

Site key : used to display the widget in your page.
Secret key: used as communication between your site and Google to verify the user’s response whether the reCAPTCHA is valid or not.

3) As per google documentation we can display widget in 2 different ways.
a.Automatically render the widget
b.Explicitly render the widget

Display Widget

Your code in Index.cshtml view page will look like below

4) Verify User’s Response
Once reCAPTCHA is generated and solved by a user, a field with g-recaptcha-response will be populated in the html. When ever user submit the form on your site, you can POST the parameter g-recaptcha-response to verify the user response. The following API url is used to verify the user response.

https://www.google.com/recaptcha/api/siteverify?secret=your_secret&response=response_string&remoteip=user_ip_address

In above API url the secret and response parameters are required and where as remoteip is optional. Here secret represents the Secret Key that was generated in the key pair and the repsonse is the g-recaptcha-response that was submitted during the form post. The following is the API JSON response object that we get once the response is submitted.

{
"success": true|false,
"error-codes": [...] // optional
}

Lets create an response class to verify the user response
public class UserResponse
{
[JsonProperty("success")]
public string Success { get; set; }

[JsonProperty("error-codes")]
public List Codes { get; set; }
}

We will create a POST method in Index action in the Accountcontroller to verify the user response.

[HttpPost]
public ActionResult Validate()
{
var response = Request["g-recaptcha-response"];
//secret that was generated in key value pair
const string secret = "6Lc2bgATAAAAAJG6_OII3tRKH6oLoax";

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(reply);

//when response is false check for the error message
if (!captchaResponse.Success)
{
if (captchaResponse.ErrorCodes.Count <= 0) return View(model);

var error = captchaResponse.ErrorCodes[0].ToLower();
switch (error)
{
case ("missing-input-secret"):
ModelState.AddModelError("","Missing User input secret"));
break;
case ("invalid-input-secret"):
ModelState.AddModelError("", "Invalid User input secret"));
break;
case ("missing-input-response"):
ModelState.AddModelError("", "Missing User input response");
break;
case ("invalid-input-response"):
ModelState.AddModelError("", "Invalid User input response");
break;
default:
ModelState.AddModelError("", "Error occured. Please try again");
break;
}
return View(model);
}
else
{ //For Valid
return RedirectToAction("Index", "Account");
}


If you coded right you will see something like below:

Hope it helps…….