如何解决验证码不在jquery端进行验证
首先，请确保您已包含必要的JavaScript资源以正确呈现reCAPTCHA小部件，如下所示：
<html>
<head>
<title>reCAPTCHA demo: Simple page</title>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<form action="?" method="POST">
<div class="g-recaptcha" data-sitekey="your_site_key"></div>
<br/>
<input type="submit" value="Submit">
</form>
</body>
</html>
这是参考：
现在是用户的响应。用户验证码质询的响应可以三种方式获取。可以是
- 提交表单中的POST参数
- -在用户完成验证码输入后将提供响应。
- 传递给render方法的config对象中指定的回调函数的字符串参数。
这是参考：
出于您的目的，请使用 获取用户的响应。
作为旁注，请使用 要求最终用户再次使用reCAPTCHA进行验证。从手册中：
如果您的网站使用AJAX请求执行服务器端验证，则应该只验证一次用户的reCAPTCHA响应令牌（ ）。如果使用特定令牌进行了验证尝试，则无法再次使用它。您将需要调用 来要求最终用户再次使用reCAPTCHA进行验证。
这是您的 代码：
<form method = "POST" name = "register" id = "register" class="m-t" role="form" action="login.html">
<div class="form-group">
<input type="text" name = "fname" id = "fname" class="form-control" placeholder="First Name" required="">
</div>
<div class="form-group">
<input type="text" name = "lname" id = "lname" class="form-control" placeholder="Last Name" required="">
</div>
<div class="form-group">
<input type="email" name = "email" id = "email" class="form-control" placeholder="Email" required="">
</div>
<div class="form-group">
<input type="password" name = "password" id = "password" class="form-control" placeholder="Password" required="">
</div>
<div class="form-group">
<input type="mobile" name = "mobile" id = "mobile" class="form-control" placeholder="Mobile No" required="">
</div>
<div class="form-group" id="recaptcha_widget">
<div class="required">
<div class="g-recaptcha" data-sitekey="XXXXXX_SITE-KEY_XXXXXXX"></div>
<!-- End Thumbnail-->
</div>
</div>
<button type="submit" name = "submit" id = "submit" class="btn btn-primary block full-width m-b">Register</button>
</form>
<p class="text-muted text-center"><small>Already have an account?</small></p>
<a class="btn btn-sm btn-white btn-block" href="login.html">Login</a>
您的 应该是这样的：
$(document).ready(function(){
//execute's the function on click
$("#submit").click(function(e){
var recaptchaResponse = grecaptcha.getResponse();
var status = $('form')[0].checkValidity();
if(status){
/*jquery to call the url requested
and parse the data in json*/
$.ajax({
url: "process.php",
type: "POST",
data: {
fname: $("#fname").val(),
lname: $("#lname").val(),
email: $("#email").val(),
password: $("#password").val(),
mobile: $("#mobile").val(),
recaptchaResponse: recaptchaResponse
},
async: false,
dataType: "JSON",
/*Give out the alert box
to display the results*/
success: function (json){
if(json.error){
alert(json.error_msg);
grecaptcha.reset();
e.preventDefault();
}else{
alert("Registeration successful!",json.user.email);
$('#register').submit();
}
},
error: function(jqXHR, textStatus, errorThrown){
alert(errorThrown);
}
});
}
});
});
最后，您的 应该是这样的：
<?php
// your code
//your site secret key
$secret = 'XXXXXXX_Secret-key_XXXXXXX';
if(isset($_POST['recaptchaResponse']) && !empty($_POST['recaptchaResponse'])){
//get verified response data
$param = "https://www.google.com/recaptcha/api/siteverify?secret=".$secret."&response=".$_POST['recaptchaResponse'];
$verifyResponse = file_get_contents($param);
$responseData = json_decode($verifyResponse);
if($responseData->success){
// success
}else{
// failure
}
}
// your code
?>
解决方法
我正在使用php来验证google REcaptcha
..就后端验证而言，如果验证码未提交并且完成的用户存储在数据库中，但是当我将其与jquery连接时出现主要问题，则会给出错误提示。
..问题是，即使验证码在后端经过验证，每次也总是发出错误“您缺少的验证码”，请帮帮我，如果有错，请原谅我.. !!
这里gose .php 文件
<?php
require_once 'DB_Functions.php';
$db = new DB_Functions();
// json response array
$response = array("error" => false);
if (!empty($_POST['fname']) && !empty($_POST['lname']) && !empty($_POST['email']) && !empty($_POST['password']) && !empty($_POST['mobile'])){
/*
if required include seperate validation
*/
// receiving the post params
$fname = trim($_POST['fname']);
$lname = trim($_POST['lname']);
$email = trim($_POST['email']);
$password = $_POST['password'];
$mobile = trim($_POST['mobile']);
/*
validation process
starts from here
*/
// validate your email address
if(filter_var($email,FILTER_VALIDATE_EMAIL)) {
//validate your password
if(strlen($password) >= 6){
//validate your mobile
if(strlen($mobile) == 12){
//validate captcha
//your site secret key
$secret = 'XXXX_secret-key_XXXX';
if(isset($_POST['recaptchaResponse']) && !empty($_POST['recaptchaResponse'])){
//get verified response data
$param = "https://www.google.com/recaptcha/api/siteverify?secret=".$secret."&response=".$_POST['recaptchaResponse'];
$verifyResponse = file_get_contents($param);
$responseData = json_decode($verifyResponse);
if($responseData->success){
//Check for valid email address
if ($db->isUserExisted($email)) {
// user already existed
$response["error"] = true;
$response["error_msg"] = "User already existed with " . $email;
echo json_encode($response);
}elseif($db->isMobileNumberExisted($mobile)) {
//user already existed
$response["error"] = true;
$response["error_msg"] = "user already existed with" . $mobile;
echo json_encode($response);
}else{
// create a new user
$user = $db->storeUser($fname,$lname,$email,$password,$mobile);
if ($user) {
// user stored successfully
$response["error"] = false;
$response["uid"] = $user["id"];
$response["user"]["fname"] = $user["fname"];
$response["user"]["lname"] = $user["lname"];
$response["user"]["email"] = $user["email"];
$response["user"]["created_at"] = $user["created_at"];
$response["user"]["updated_at"] = $user["updated_at"];
echo json_encode($response);
} else {
// user failed to store
$response["error"] = true;
$response["error_msg"] = "Unknown error occurred in registration!";
echo json_encode($response);
}
}
}else{
//failed to submit captcha
$response["error"] = true;
$response["error_msg"] = "Sorry this application is not for bots";
echo json_encode($response);
}
}else{
//failed to submit captcha
$response["error"] = true;
$response["error_msg"] = "your missing captcha";
echo json_encode($response);
}
}else{
//invalid mobile number
$response["error"] = true;
$response["error_msg"] = "Mobile number is invalid!";
echo json_encode($response);
}
}else{
//min of 6-charecters
$response["error"] = true;
$response["error_msg"] = "password must be of atleast 6-characters!";
echo json_encode($response);
}
}else{
// invalid email address
$response["error"] = true;
$response["error_msg"] = "invalid email address";
echo json_encode($response);
}
}else{
//missing the required fields
$response["error"] = true;
$response["error_msg"] = "Please fill all the required parameters!";
echo json_encode($response);
}
?>
这是引导中的gose .html 文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>MiiSKy | Register</title>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src = "register.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">
<link href="css/plugins/iCheck/custom.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body class="gray-bg">
<div class="middle-box text-center loginscreen animated fadeInDown">
<div>
<div>
<!--<h3 class="logo-name">MiiSky</h3>-->
<img src="img/landing/mii-logo.png">
</div>
<!--<h3>Register to MiiSky</h3>-->
<p>Create account to see it in action.</p>
<form method = "POST" name = "register" id = "register" class="m-t" role="form" action="login.html">
<div class="form-group">
<input type="text" name = "fname" id = "fname" class="form-control" placeholder="First Name" required="">
</div>
<div class="form-group">
<input type="text" name = "lname" id = "lname" class="form-control" placeholder="Last Name" required="">
</div>
<div class="form-group">
<input type="email" name = "email" id = "email" class="form-control" placeholder="Email" required="">
</div>
<div class="form-group">
<input type="password" name = "password" id = "password" class="form-control" placeholder="Password" required="">
</div>
<div class="form-group">
<input type="mobile" name = "mobile" id = "mobile" class="form-control" placeholder="Mobile No" required="">
</div>
<div class="form-group" id="recaptcha_widget">
<div class="required">
<div class="g-recaptcha" data-sitekey="XXXXX_site-key_XXXXXX"></div>
<!-- End Thumbnail-->
</div>
</div>
<button type="submit" name = "submit" id = "submit" class="btn btn-primary block full-width m-b">Register</button>
<p class="text-muted text-center"><small>Already have an account?</small></p>
<a class="btn btn-sm btn-white btn-block" href="login.html">Login</a>
</form>
这里是主要的 .js 文件
$(document).ready(function(){
//execute's the function on click
$("#submit").click(function(e){
var recaptchaResponse = grecaptcha.getResponse();
var status = $('form')[0].checkValidity();
if(status){
/*jquery to call the url requested
and parse the data in json*/
$.ajax({
url: "process.php",type: "POST",data: {
fname: $("#fname").val(),lname: $("#lname").val(),email: $("#email").val(),password: $("#password").val(),mobile: $("#mobile").val(),recaptchaResponse: recaptchaResponse
},async: false,dataType: "JSON",/*Give out the alert box
to display the results*/
success: function (json){
if(json.error){
alert(json.error_msg);
grecaptcha.reset();
e.preventDefault();
}else{
alert("Registeration successful!",json.user.email);
$('#register').submit();
}
},error: function(jqXHR,textStatus,errorThrown){
alert(errorThrown);
}
});
}
});
});
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。