How to Impliment Recaptcha

Recaptcha is for stopping the spam. This web service is given by google.
 
There are different ways to implement Recaptcha, but If we have to implement the Recaptcha on Ajax PopUp, there Normal Recaptcha code will not work.

My scenario is - When I click on email button, an Ajax Pop Up opens and there I have to implement recaptcha.

Steps to implement re captcha in Ajax Pop Up

1. Make account in re captcha(http://www.google.com/recaptcha)

2. Re captcha will provide you 1 dll which you have to include in your project.

3. <script type="text/javascript" src=http://www.google.com/recaptcha/api/js/recaptcha_ajax.js ></script>

<script type="text/javascript">

$(document).ready(function ()

CreateCaptcha();

});

function CreateCaptcha() {

Recaptcha.create('Key Provided by ReCaptcha', 'recaptcha_div',

{

theme:"white",

callback: Recaptcha.focus_response_field

});

}

$.ajax({

url: 'http://www.google.com/recaptcha/api/js/recaptcha_ajax.js',

dataType: 'script',

success: function (result){

CreateCaptcha();

},

error: function (xmlhttprequest, status, error) {function (xmlhttprequest, status, error) {

$('#recaptcha_div').html('Cannot create captcha'

);

} });

 </script>


Include above code in head of your cshtml page and also include one div

<div id="recaptcha_div">
</div>

Above div is created to show the recaptcha in that  div which we will get after ajax pop up.

4. In your .cs file where you are calling the controller, on top of that add this:

[HttpPost]
[RecaptchaControlMvc.CaptchaValidatorAttribute]


and also include
Recaptcha namespaces in your .cs file

Pass one variable in the function bool captchaValid and handle that.

This captchaValid will tell you whether a person wrote the matching letters or not.

If yes then it will return true automatically else false.
 

 [HttpPost]

[RecaptchaControlMvc.CaptchaValidatorAttribute]

public ActionResult SendMobileMail(SendEmailViewModel model, bool captchaValid)

{

if (!captchaValid)

 

{

return Json(new { Success = false, Msg = "Please enter correct verification code" },

JsonRequestBehavior.AllowGet);

}

}
 
Note - There are different themes available in Recaptcha 

  • red (default theme)

  • white

  • blackglass

  • clean

Next Recommended Reading How to Impliment Google Analytics