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
once submitting your keys will be available at text boxes show the given below image
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}&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:
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
I like to share my work experience, research, and knowledge through my blog.
I love developing the applications in Microsoft technologies including asp.net mvc,c#.net, windfarms, SQL server,entityfrawork,Ajax,Jquery,WEbApi,Asp.net core, SEO, WordPress, UI..more
- dtoptions in angular10 datatable - April 29, 2021
- Angular 11 Crud Operation - April 14, 2021
- How to create dynamic form fields using jQuery - January 4, 2021