验证码不在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 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" role="form" action="login.html">
<div>
<input type="text" name = "fname" id = "fname" placeholder="First Name" required="">
</div>
<div>
<input type="text" name = "lname" id = "lname" placeholder="Last Name" required="">
</div>
<div>
<input type="email" name = "email" id = "email" placeholder="Email" required="">
</div>
<div>
<input type="password" name = "password" id = "password" placeholder="Password" required="">
</div>
<div>
<input type="mobile" name = "mobile" id = "mobile" placeholder="Mobile No" required="">
</div>
<div id="recaptcha_widget">
<div>
<div data-sitekey="XXXXXX_SITE-KEY_XXXXXXX"></div>
<!-- End Thumbnail-->
</div>
</div>
<button type="submit" name = "submit" id = "submit">Register</button>
</form>
<p><small>Already have an account?</small></p>
<a 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>
<div>
<div>
<div>
<!--<h3>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" role="form" action="login.html">
<div>
<input type="text" name = "fname" id = "fname" placeholder="First Name" required="">
</div>
<div>
<input type="text" name = "lname" id = "lname" placeholder="Last Name" required="">
</div>
<div>
<input type="email" name = "email" id = "email" placeholder="Email" required="">
</div>
<div>
<input type="password" name = "password" id = "password" placeholder="Password" required="">
</div>
<div>
<input type="mobile" name = "mobile" id = "mobile" placeholder="Mobile No" required="">
</div>
<div id="recaptcha_widget">
<div>
<div data-sitekey="XXXXX_site-key_XXXXXX"></div>
<!-- End Thumbnail-->
</div>
</div>
<button type="submit" name = "submit" id = "submit">Register</button>
<p><small>Already have an account?</small></p>
<a 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);
}
});
}
});
});