Friday, August 9, 2019

Google new reCAPTCHA using asp.net mvc

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
  1. public ActionResult Index()
  2. {
  3. return View();
  4. }

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 
  1. @{
  2. ViewBag.Title = "Index";
  3. }
  4. <h2>Index</h2>
  5. <div>
  6. @using (Html.BeginForm("FormSubmit", "Home", FormMethod.Post))
  7. {
  8. <div class="g-recaptcha" data-sitekey="Your sitekey here"></div>
  9. <input type="submit" value="Submit" />
  10. }
  11. </div>
  12. <span style="display:inline-block; font-size:20px;margin:20px 0;padding:20px;border:1px solid #D3D3D3">
  13. @ViewBag.Message
  14. </span>
  15. <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


  1. [HttpPost]
  2. public ActionResult FormSubmit()
  3. {
  4. //Validate Google recaptcha here
  5. var response = Request["g-recaptcha-response"];
  6. string secretKey = "Your secret here";
  7. var client = new WebClient();
  8. var result = client.DownloadString(string.Format("https://www.google.com/recaptcha/api/siteverify?secret={0}&response={1}", secretKey, response));
  9. var obj = JObject.Parse(result);
  10. var status = (bool)obj.SelectToken("success");
  11. ViewBag.Message = status ? "Google reCaptcha validation success" : "Google reCaptcha validation failed";
  12.  
  13. //When you will post form for save data, you should check both the model validation and google recaptcha validation
  14. //EX.
  15. /* if (ModelState.IsValid && status)
  16. {
  17.  
  18. }*/
  19.  
  20. //Here I am returning to Index page for demo perpose, you can use your view here
  21. return View("Index");
  22. }

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















No comments:

Post a Comment

How to register multiple implementations of the same interface in Asp.Net Core?

 Problem: I have services that are derived from the same interface. public interface IService { } public class ServiceA : IService { ...