首先，请确保您已包含必要的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' role='form' action='login.html'> <div class='form-group'><input type='text' name = 'fname' placeholder='First Name' required=''> </div> <div class='form-group'><input type='text' name = 'lname' placeholder='Last Name' required=''> </div> <div class='form-group'><input type='email' name = 'email' placeholder='Email' required=''> </div> <div class='form-group'><input type='password' name = 'password' placeholder='Password' required=''> </div> <div class='form-group'><input type='mobile' name = 'mobile' placeholder='Mobile No' required=''> </div> <div id='recaptcha_widget'><div class='required'> <div data-sitekey='XXXXXX_SITE-KEY_XXXXXXX'></div> <!-- End Thumbnail--></div> </div> <button type='submit' name = '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 href='https://www.6hehe.com/wenda/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 Boxto 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 文件
<?phprequire_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 processstarts from here*/// validate your email addressif(filter_var($email,FILTER_VALIDATE_EMAIL)) {//validate your passwordif(strlen($password) >= 6){//validate your mobileif(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 = 'https://www.6hehe.com/wenda/register.js'></script> <link href='https://www.6hehe.com/wenda/css/bootstrap.min.css' rel='stylesheet'> <link href='https://www.6hehe.com/wenda/font-awesome/css/font-awesome.css' rel='stylesheet'> <link href='https://www.6hehe.com/wenda/css/plugins/iCheck/custom.css' rel='stylesheet'> <link href='https://www.6hehe.com/wenda/css/animate.css' rel='stylesheet'> <link href='https://www.6hehe.com/wenda/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='https://www.6hehe.com/wenda/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' role='form' action='login.html'><div class='form-group'> <input type='text' name = 'fname' placeholder='First Name' required=''></div><div class='form-group'> <input type='text' name = 'lname' placeholder='Last Name' required=''></div><div class='form-group'> <input type='email' name = 'email' placeholder='Email' required=''></div><div class='form-group'> <input type='password' name = 'password' placeholder='Password' required=''></div><div class='form-group'> <input type='mobile' name = 'mobile' placeholder='Mobile No' required=''></div><div id='recaptcha_widget'><div class='required'> <div data-sitekey='XXXXX_site-key_XXXXXX'></div> <!-- End Thumbnail--> </div></div><button type='submit' name = '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 href='https://www.6hehe.com/wenda/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 boxto 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);} });} });});
