Description:
In this example
we explain that how to create GoogleRECaptcha in Asp.Net MVC Razor view. Or how
to implement Google Captcha with code in MVC Razor view. Or how to implement Captcha
in MVC.or or to generate Google Captcha in MVC Razor view dynamically to
validate the user is not robot or machine.
Here we demonstrate
that how to validate the Captcha response at client side in MVC Razor View.
Model:
public class RECaptcha
{
public string Key = "<RECaptcha
Site Key>";
public string Secret = "<RECaptcha
Secret Key>";
public string Response { get;
set; }
}
Controller:
public class EmployeeController
: Controller
{
public ActionResult Index()
{
return
View((new RECaptcha()));
}
[HttpPost]
public
JsonResult AjaxMethod(string response)
{
RECaptcha
recaptcha = new RECaptcha();
string
url = "https://www.google.com/recaptcha/api/siteverify?secret="
+ recaptcha.Secret + "&response="
+ response;
recaptcha.Response = (new WebClient()).DownloadString(url);
return
Json(recaptcha);
}
}
View:
@model
RECaptcha_MVC.Models.RECaptcha
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Google
RECaptcha implementation with Code and Example in ASP.Net MVC</title>
<style type="text/css">
body
{
font-family:
Arial;
font-size:
10pt;
}
.error
{
color:
red;
}
</style>
</head>
<body>
<div id="dvCaptcha">
</div>
<input type="hidden" id="hfCaptcha"/>
<span id="rfvCaptcha" class="error" style="display:none">Captcha validation is required.</span>
<br/>
<input type="button" id="btnSubmit" value="Submit"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
asyncdefer></script>
<script type="text/javascript">
var
onloadCallback = function () {
grecaptcha.render('dvCaptcha', {
'sitekey':
'@Model.Key',
'callback':
function (response) {
$.ajax({
type: "POST",
url: "/Employee/AjaxMethod",
data: "{response: '" + response + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var captchaResponse = jQuery.parseJSON(r.Response);
if (captchaResponse.success) {
$("#hfCaptcha").val(captchaResponse.success);
$("#rfvCaptcha").hide();
} else
{
$("#hfCaptcha").val("");
$("#rfvCaptcha").show();
var error = captchaResponse["error-codes"][0];
$("#rfvCaptcha").html("RECaptcha error. " + error);
}
}
});
}
});
};
$(function
() {
$("#btnSubmit").click(function () {
$("#rfvCaptcha").hide();
if
($("#hfCaptcha").val() == "") {
$("#rfvCaptcha").show();
}
});
});
</script>
</body>
</html>
0 comments:
Post a Comment