Introduction

In one of my previous article, I have explained how to implement Google reCaptcha in asp.net MVC without API , but it was the old Google reCAPTCHA where google asks user to read distorted text and type it into a box for confirming they aren’t robots, like this:


But now Google introduced new API (“No CAPTCHA reCAPTCHA”) that simplifies the reCAPTCHA experience. The tagline of Google reCAPTCHHA is "Tough on bots Easy on humans".
The new Google reCAPTCHA is really very Easy on humans, with just a single click they’ll confirm they are not a robot.


AS it's very easy to human, we should implement the new Google reCAPTCHA for our customer. Right?

Now I am going to show you, how we can implement Google new reCAPTCHA using asp.net MVC just following a few very simple steps.

Just follow the following steps in order implement Google new reCAPTCHA using asp.net MVC 

Step-1: Create New Project.

Go to File > New > Project > ASP.NET  Web Application (under web) > Entry Application Name > Click OK > Select Basic > Select view engine Razor > OK

Step-2: Sign up & Generate Google reCAPTCHA API

Go to http://www.google.com/recaptcha then click on the top right corner Get reCAPTCHA button. Here you will get a form for Register a new site, fill the form and complete your registration. After complete your registration you will get Site key and Secret key those we will use in our application.

Step-3: Create a Controller.

Go to Solution Explorer > Right Click on Controllers folder form Solution Explorer > Add > Controller > Enter Controller name > Select Templete "empty MVC Controller"> Add.

Here I have created a controller "HomeController"

Step-4: Add new action into the controller to get the view, where we will implement Google reCAPTCHA

Here I have added "Index" Action into "Home" Controller. Please write this following code

public ActionResult Index()
{
    return View();
}

Step-5: Add view for the action (here "Index") & design.

Right Click on Action Method (here right click on Index action) > Add View... > Enter View Name > Select View Engine (Razor) > Add.

Complete HTML code

@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>
<div>
    @using (Html.BeginForm("FormSubmit", "Home", FormMethod.Post))
{
    <div class="g-recaptcha" data-sitekey="Your sitekey here"></div>
    <input type="submit" value="Submit" />
}
</div>
<span style="display:inline-block; font-size:20px;margin:20px 0;padding:20px;border:1px solid #D3D3D3">
    @ViewBag.Message
</span>
<script src='https://www.google.com/recaptcha/api.js' type="text/javascript"></script>

Step-6: Add reference of Newtonsoft.Json (if not already added in your project)

Here I have added Newtonsoft.Json reference from NuGet packages
Go to Solution Explorer > Right click on References > Manage NuGet packages > Search with "System.Linq.Dynamic" > Install.

Step-7: Add another action (here "FormSubmit") for form submit, where we will check google reCAPTCHA validity

[HttpPost]
public ActionResult FormSubmit()
{
    //Validate Google recaptcha here
    var response = Request["g-recaptcha-response"];
    string secretKey = "Your secret here";
    var client = new WebClient();
    var result = client.DownloadString(string.Format("https://www.google.com/recaptcha/api/siteverify?secret={0}&response={1}", secretKey, response));
    var obj = JObject.Parse(result);
    var status = (bool)obj.SelectToken("success");
    ViewBag.Message = status ? "Google reCaptcha validation success" : "Google reCaptcha validation failed";

    //When you will post form for save data, you should check both the model validation and google recaptcha validation
    //EX.
    /* if (ModelState.IsValid && status)
    {

    }*/

    //Here I am returning to Index page for demo perpose, you can use your view here
    return View("Index");
}

Step-8: Run Application (before run, make sure you have added your site key & secret key)