首先，请确保您已包含必要的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>
这是参考：
- 显示小部件
现在是用户的响应。用户验证码质询的响应可以三种方式获取。可以是
- g-recaptcha-response- 提交表单中的POST参数
- grecaptcha.getResponse（widget_id） -在用户完成验证码输入后将提供响应。
- 传递给render方法的config对象中指定的回调函数的字符串参数。
这是参考：
- 验证用户的响应
出于您的目的，请使用 grecaptcha.getResponse（） 获取用户的响应。
作为旁注，请使用 grecaptcha.reset（） 要求最终用户再次使用reCAPTCHA进行验证。从手册中：
如果您的网站使用AJAX请求执行服务器端验证，则应该只验证一次用户的reCAPTCHA响应令牌（ g-recaptcha-response
）。如果使用特定令牌进行了验证尝试，则无法再次使用它。您将需要调用 grecaptcha.reset（）
来要求最终用户再次使用reCAPTCHA进行验证。
这是您的 HTML 代码：
<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>
您的 jQuery 应该是这样的：
$(document).ready(function(){ //execute's the function on click $("#submit").click(function(e){ var recaptchaResponse = grecaptcha.getResponse(); var status = $('form')[0].checkValidity(); if(status){ $.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", 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 应该是这样的：
<?php // your pre //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_depre($verifyResponse); if($responseData->success){ // success }else{ // failure } } // your pre?>
