Integrate Google ReCaptcha And Validate It With ASP.NET MVC 5 And Entity Framework

Introduction

 

In this article, I will demonstrate how to integrate Google Recaptcha and Validate it with ASP.Net MVC5. After going through with this article you may get the benefit of this rich feature. In this modern world, many of the hackers, robotics, and spam are available so we need to ensure the user is a human and not a bot or a computer. Okay! let's move forward. 

 

Prerequisite 

• Visual Studio
• SQL Server
• Google Account(Gmail Id)
• Basic knowledge of ASP.NET MVC

Article Flow 

• Use of Captcha and ReCaptcha?
• Create ASP.Net MVC Application
• Register Site(s)/Domain(s) and Generate Key's in Google
• Integrate Google ReCaptcha with Application
• Validate Google ReCaptcha

 Use of Captcha and ReCaptcha?

 

A CAPTCHA is a challenge-response system wherein typically a dynamically generated image consisting of random letters and numbers is displayed to the users and the users are asked to re-enter the text in an attempt to verify that both of them match. CAPTCHA stands for "Completely Automated Public Turing Test to Tell Computers and Humans Apart ".

 

reCAPTCHA is a free service that protects your site from spam and abuse. It uses advanced risk analysis techniques to tell humans and bots apart. With the new API, a significant number of your valid human users will pass the reCAPTCHA challenge without having to solve a CAPTCHA. reCAPTCHA comes in the form of a widget that you can easily add to your blog, forum, registration form, etc.

 

Create ASP.Net MVC Application

 

One of my articles discussed how to do the Scaffolding process with ASP.Net MVC5 and Entity Framework Implements scaffolding with Entity Framework   Once you followed those steps just copy a content folder which contains predefined CSS file from another new ASP.Net Web Application because we have created the empty project. Once you followed those steps it will gives you the following screen

 

 

 

And the result as below

 

Register Site(s)/Domain(s) and Generate Key's in Google

 

The initial step to integrate Google reCaptcha is to register your site/domain to receive public/private keys. To reach that level merely click here. As soon as you hit the preceding given URL it gives you given the following screen

 

I have registered mine as the following screenshot

 

 

I am running my ASP.Net MVC application in localhost so I have mentioned to register it with localhost. After successful registration, it will provide this ReCaptcha feature to your localhost and provides public/private keys along with a reference file and API to use further.

 

 

We got enough things and completed everything on google. Now move to the Application

 

Integrate Google ReCaptcha with Application

 

To integrate Google ReCaptcha with an application, follow the below steps one by one.

 

Step 1 Add public and private key in web.config

 

Kindly paste your public and private key in the web.config file as shown in the following screen

<add key="recaptchaPublickey" value="6LdHcTwUAAAAAIFoGNGSjl_daxhYsQUWVV9PKWWW"/>
lt;add key="recaptchaPrivatekey" value="6LdHcTwUAAAAAD_al4p9Zp7qMDvyZy6cCXW51hKEr"/>

 

 

Step 2 Refer ReCaptcha API Js 

 

Here I referred a Javascript file to shared layout page

<script src='https://www.google.com/recaptcha/api.js'></script>

Step 3 Add ReCaptcha widget to view 

 

Now add the Google ReCaptcha widget to your view, here I added to create.cshtml view

<div class="g-recaptcha" data-sitekey="6LdHcTwUAAAAAIFoGNGSjl_daxhYsQUWVV9PKWWW"></div>

Now run your application, you can see that we got the Google ReCaptcha widget in our application.

 

 

 

 Validate Google ReCaptcha

 

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. To validate captcha include following method in your controller

/// <summary>
/// Validate Captcha
/// </summary>
/// <param name="response"></param>
/// <returns></returns>
public static CaptchaResponse ValidateCaptcha(string response)
{
    string secret = System.Web.Configuration.WebConfigurationManager.AppSettings["recaptchaPrivateKey"];
    var client = new WebClient();
    var jsonResult = client.DownloadString(string.Format("https://www.google.com/recaptcha/api/siteverify?secret={0}&response={1}", secret, response));
    return JsonConvert.DeserializeObject < CaptchaResponse > (jsonResult.ToString());
}

The following API URL is used to verify the user response. It will return two type of parameter in JSON result. A result such as success,error-codes for that I have created a model class which holds two property to hold the response. success parameter returns true if  captcha is valid else returns false. error-codes parameter returns a list of error.

using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace GoogleReCaptchaInMVC5.Models {
    public class CaptchaResponse {
        [JsonProperty("success")]
        public bool Success {
            get;
            set;
        }
        [JsonProperty("error-codes")]
        public List < string > ErrorMessage {
            get;
            set;
        }
    }
}

To Deserialize JSON result we need to use the Newtonsoft.Json, to get clear picture visit JSON Serialization And Deserialization In C# ,  to get a server-side response we need to use the 'g-recaptcha-response' in controller request. The below method will be the post action to create an employee. Before creating employee we validating the captcha with the help of ValidateCaptcha method.

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "ID,Name,Designation,Location")] Employee employee) {
    CaptchaResponse response = ValidateCaptcha(Request["g-recaptcha-response"]);
    if (response.Success && ModelState.IsValid) {
        db.Employees.Add(employee);
        db.SaveChanges();
        return RedirectToAction("Index");
    } else {
        return Content("Error From Google ReCaptcha : " + response.ErrorMessage[0].ToString());
    }
}

Run your application, As you can see from the image below it has returned “true” in success parameter from the server meaning it worked perfectly.After executing successfully it returns to the employee list page again with added employee "Ramar A". I've used this page for demonstration purposes only.

 

 

 

Now we will go with important negative scenario

 

Scenario 1: Invalid Private Key 

 

for that, I just made a wrong private key in web config as below

<add key="recaptchaPrivatekey" value="6LdHcTwUAAAAAD_al4p9Zp7q"/>

 

 

Now run your application

 

 

 

Scenario 2 Invalid User or robot

 

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.

 

 

Complete Web.config 

<?xml version="1.0" encoding="utf-8"?>
<!--
For more information on how to configure your ASP.NET application, please visit
http://go.microsoft.com/fwlink/?LinkId=301880
-->
<configuration>
    <configSections>
        <!-- For more information on Entity Framework configuration, visit http://go.microsoft.com/fwlink/?LinkID=237468 -->
        <section name="entityFramework" type="System.Data.Entity.Internal.ConfigFile.EntityFrameworkSection, EntityFramework, Version=6.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" requirePermission="false" /> </configSections>
    <appSettings>
        <add key="webpages:Version" value="3.0.0.0" />
        <add key="webpages:Enabled" value="false" />
        <add key="ClientValidationEnabled" value="true" />
        <add key="UnobtrusiveJavaScriptEnabled" value="true" />
        <add key="recaptchaPublickey" value="6LdHcTwUAAAAAIFoGNGSjl_daxhYsQUWVV9PKWWW" />
        <add key="recaptchaPrivatekey" value="6LdHcTwUAAAAAD_al4p9Zp7qMDvyZy6cCXW51hKE" />
        <!--<add key="recaptchaPrivatekey" value="6LdHcTwUAAAAAD_al4p9Zp7q"/>-->
    </appSettings>
    <system.web>
        <compilation debug="true" targetFramework="4.5" />
        <httpRuntime targetFramework="4.5" /> </system.web>
    <connectionStrings>
        <add name="CSharpCornerEntities" connectionString="metadata=res://*/Models.Model1.csdl|res://*/Models.Model1.ssdl|res://*/Models.Model1.msl;provider=System.Data.SqlClient;provider connection string="data source=.;initial catalog=CSharpCorner;integrated security=True;MultipleActiveResultSets=True;App=EntityFramework"" providerName="System.Data.EntityClient" /> </connectionStrings>
    <entityFramework>
        <defaultConnectionFactory type="System.Data.Entity.Infrastructure.SqlConnectionFactory, EntityFramework" />
        <providers>
            <provider invariantName="System.Data.SqlClient" type="System.Data.Entity.SqlServer.SqlProviderServices, EntityFramework.SqlServer" /> </providers>
    </entityFramework>
</configuration>

Complete Controller

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Mvc;
using GoogleReCaptchaInMVC5.Models;
using Newtonsoft.Json;
namespace GoogleReCaptchaInMVC5.Controllers {
    public class CRUDController: Controller {
        private CSharpCornerEntities db = new CSharpCornerEntities();
        // GET: /CRUD/
        public ActionResult Index() {
            return View(db.Employees.ToList());
        }
        // GET: /CRUD/Details/5
        public ActionResult Details(long ? id) {
            if (id == null) {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            Employee employee = db.Employees.Find(id);
            if (employee == null) {
                return HttpNotFound();
            }
            return View(employee);
        }
        // GET: /CRUD/Create
        public ActionResult Create() {
            return View();
        }
        // POST: /CRUD/Create
        // To protect from overposting attacks, please enable the specific properties you want to bind to, for
        // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create([Bind(Include = "ID,Name,Designation,Location")] Employee employee) {
            CaptchaResponse response = ValidateCaptcha(Request["g-recaptcha-response"]);
            if (response.Success && ModelState.IsValid) {
                db.Employees.Add(employee);
                db.SaveChanges();
                return RedirectToAction("Index");
            } else {
                return Content("Error From Google ReCaptcha : " + response.ErrorMessage[0].ToString());
            }
        }
        /// <summary>
        /// Validate Captcha
        /// </summary>
        /// <param name="response"></param>
        /// <returns></returns>
        public static CaptchaResponse ValidateCaptcha(string response) {
            string secret = System.Web.Configuration.WebConfigurationManager.AppSettings["recaptchaPrivateKey"];
            var client = new WebClient();
            var jsonResult = client.DownloadString(string.Format("https://www.google.com/recaptcha/api/siteverify?secret={0}&response={1}", secret, response));
            return JsonConvert.DeserializeObject < CaptchaResponse > (jsonResult.ToString());
        }
        // GET: /CRUD/Edit/5
        public ActionResult Edit(long ? id) {
            if (id == null) {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            Employee employee = db.Employees.Find(id);
            if (employee == null) {
                return HttpNotFound();
            }
            return View(employee);
        }
        // POST: /CRUD/Edit/5
        // To protect from overposting attacks, please enable the specific properties you want to bind to, for
        // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Edit([Bind(Include = "ID,Name,Designation,Location")] Employee employee) {
            if (ModelState.IsValid) {
                db.Entry(employee).State = EntityState.Modified;
                db.SaveChanges();
                return RedirectToAction("Index");
            }
            return View(employee);
        }
        // GET: /CRUD/Delete/5
        public ActionResult Delete(long ? id) {
            if (id == null) {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            Employee employee = db.Employees.Find(id);
            if (employee == null) {
                return HttpNotFound();
            }
            return View(employee);
        }
        // POST: /CRUD/Delete/5
        [HttpPost, ActionName("Delete")]
        [ValidateAntiForgeryToken]
        public ActionResult DeleteConfirmed(long id) {
            Employee employee = db.Employees.Find(id);
            db.Employees.Remove(employee);
            db.SaveChanges();
            return RedirectToAction("Index");
        }
        protected override void Dispose(bool disposing) {
            if (disposing) {
                db.Dispose();
            }
            base.Dispose(disposing);
        }
    }
}

Complete View (Create.cshtml) 

@model GoogleReCaptchaInMVC5.Models.Employee
@ {
    ViewBag.Title = "Create";
} < h2 > Create < /h2>
@using(Html.BeginForm()) {
    @Html.AntiForgeryToken() < div class = "form-horizontal" > < h4 > Employee < /h4> < hr / > @Html.ValidationSummary(true) < div class = "form-group" > @Html.LabelFor(model => model.Name, new {
        @class = "control-label col-md-2"
    }) < div class = "col-md-10" > @Html.EditorFor(model => model.Name)
    @Html.ValidationMessageFor(model => model.Name) < /div> < /div> < div class = "form-group" > @Html.LabelFor(model => model.Designation, new {
        @class = "control-label col-md-2"
    }) < div class = "col-md-10" > @Html.EditorFor(model => model.Designation)
    @Html.ValidationMessageFor(model => model.Designation) < /div> < /div> < div class = "form-group" > @Html.LabelFor(model => model.Location, new {
        @class = "control-label col-md-2"
    }) < div class = "col-md-10" > @Html.EditorFor(model => model.Location)
    @Html.ValidationMessageFor(model => model.Location) < /div> < /div> < div class = "form-group" > < div class = "g-recaptcha"
    data - sitekey = "6LdHcTwUAAAAAIFoGNGSjl_daxhYsQUWVV9PKWWW" > < /div> < /div> < div class = "form-group" > < div class = "col-md-offset-2 col-md-10" > < input type = "submit"
    value = "Create"
    class = "btn btn-default" / > < /div> < /div> < /div>
} < div > @Html.ActionLink("Back to List", "Index") < /div> < script src = "~/Scripts/jquery-1.10.2.min.js" > < /script> < script src = "~/Scripts/jquery.validate.min.js" > < /script> < script src = "~/Scripts/jquery.validate.unobtrusive.min.js" > < /script>

_Layout.cshtml 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Google ReCaptcha</title>
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src='https://www.google.com/recaptcha/api.js'></script>
</head>

<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> @Html.ActionLink("Google ReCaptcha with ASP.Net MVC5", "Index", "Home", null, new { @class = "navbar-brand" }) </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav"> </ul>
            </div>
        </div>
    </div>
    <div class="container body-content"> <br /> @RenderBody()
        <hr /> </div>
</body>

</html>

Refer the attached project for reference and I did attach the demonstrated project without package for Entity Framework 6.0 due to the size limit.

Summary 

 

In this Article, you learnt how to integrate Google ReCaptcha and validate it with ASP.Net MVC5 Web Application. 

 

I hope it will help you out. Your valuable feedback and comments about this article are always welcome.