我正在使用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); } }); } }); });
首先,请确保您已包含必要的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>
这是参考:
现在是用户的响应。用户验证码质询的响应可以三种方式获取。可以是
出于您的目的,请使用 grecaptcha.getResponse() 获取用户的响应。
作为旁注,请使用 grecaptcha.reset() 要求最终用户再次使用reCAPTCHA进行验证。从手册中:
如果您的网站使用AJAX请求执行服务器端验证,则应该只验证一次用户的reCAPTCHA响应令牌( g-recaptcha-response )。如果使用特定令牌进行了验证尝试,则无法再次使用它。您将需要调用 grecaptcha.reset() 来要求最终用户再次使用reCAPTCHA进行验证。
这是您的 HTML 代码:
<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>
您的 jQuery 应该是这样的:
最后,您的 PHP 应该是这样的:
<?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 ?>