implement reCaptChA functionality in MVC

Updated : Nov 05, 2019 in Articles

How to implement reCaptChA functionality in MVC

In this article, I will demonstrate how to integrate Google ReCaptcha and Validate it with ASP.Net MVC 6 v2,v3, How to implement ReCaptcha functionality in MVC

Step 1: Setup GoogleSitekey and GoogleSecretKey

if you want to implement reCaptChA in MVC you need to required GoogleSiteKey and GoogleSecretKey

Go through this link Google keys and setup reCaptChA following given steps if you are using you custom domain(like www.yourdomain.com) enter your domain name or you are using the local use domain name as localhost

How to implement reCaptChA in MVC
How to implement reCaptChA in MVC

once submitting your keys will be available at text boxes show the given below image

implement reCaptChA
implement reCaptChA

Step 2: Create a new Web Application project

Go to Visual studio → File New → project → Web → Asp.net web Application → enter your project name → OK

Inside your web.config file add your Google keys (GoogleSitekey, GoogleSecretkey) under the configuration appSettings show the given below code

<configuration>
  <appSettings>  
    <add key="GoogleSitekey" value="your keys" />
    <add key="GoogleSecretkey" value="your keys" />
  </appSettings>
</configuration>

Step 3: Implementing controller for ReCaptcha functionality

Add a new controller inside the controller folder in your application and implement login functionality for validating the google ReCaptcha

 [AllowAnonymous]
        public ActionResult Login(string returnUrl)
        {
            ViewBag.ReturnUrl = returnUrl;
            return View();
        }

[HttpPost]
        [AllowAnonymous]
        [ValidateAntiForgeryToken]
        public ActionResult Login(Login model, string returnUrl)
        {
            bool isCapthcaValid = ValidateCaptcha(Request["g-recaptcha-response"]);
            if (ModelState.IsValid)
            {
                if (isCapthcaValid)
                {
                    //some code After success
                }
                else
                {
                    ModelState.AddModelError("", "You have put wrong Captcha,Please ensure the authenticity !!!");
                    ModelState.Remove("Password");

                    //Should load sitekey again
                    return View();
                }
            }
            return View();
        }

we will implement the ValidateCaptcha functionality for validating the google ReCaptcha this method will return bool value if validate is success it will return true otherwise it will return a false

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

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

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

            return Convert.ToBoolean(captchaResponse.Success);

        }

Step 4: implementing reCaptChA at view level

Inside the login form, we will set the data-sitekey these keys we will read with the help of ConfigurationManager.AppSettings[“GoogleSitekey”]

Go through given below code you will implement view for a login action method

@model Implementingrecaptcha_in_mvc5.Models.Login
@{
    ViewBag.Title = "Login";
}
@using System.Configuration;
@{
    ViewBag.Title = "Log in";
    string _googlesitekey = ConfigurationManager.AppSettings["GoogleSitekey"];
}
<style>
    .modal-body {
        text-align: -webkit-center;
    }
</style>
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4 class="modal-title">Login</h4>
            </div>
            <div class="modal-body">
                <div class="">
                    <div class="col-md-6registrationform">
                        <section id="loginForm">
                            @using (Html.BeginForm("Login", "Home", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
                            {
                                @Html.AntiForgeryToken()

                                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                                <div class="form-group">
                                    <div class="col-md-10 input-group">
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </span>
                                        @Html.TextBoxFor(m => m.Email, new { @class = "form-control", placeholder = "Email" })

                                    </div>
                                    <div class="col-md-10">

                                        @Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })
                                    </div>

                                </div>
                                <div class="form-group">

                                    <div class="col-md-10 input-group">
                                        <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                        @Html.PasswordFor(m => m.Password, new { @class = "form-control", placeholder = "Password" })

                                    </div>
                                    <div class="col-md-10">

                                        @Html.ValidationMessageFor(m => m.Password, "", new { @class = "text-danger" })
                                    </div>
                                </div>
                                <div class="g-recaptcha" style="margin-left: -191px;" [email protected]_googlesitekey></div>
                                <div class="form-group">
                                    <div class="col-md-10 ">
                                        <div class="checkbox">
                                            @Html.CheckBoxFor(m => m.RememberMe)
                                            @Html.LabelFor(m => m.RememberMe)
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-md-10 input-group" style="text-align: left;">
                                        <button type="submit" class="btn btn-default" aria-label="Left Align">
                                            <span class="fa fa-sign-in" aria-hidden="true"> </span> Log in
                                        </button>
                                    </div>
                                </div>
                            }
                        </section>
                    </div>

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
}


Run your application

output:

implement reCaptChA functionality in MVC
implement reCaptChA functionality in MVC

Summary

In this article, we learned step by step completely how to integrate Google ReCaptcha and Validate it with ASP.Net MVC functionality if you want a video for this article go through this link how to integrate Google ReCaptcha and Validate