jQuery:使用AJAX验证Recaptcha'

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery:使用AJAX验证Recaptcha'相关的知识,希望对你有一定的参考价值。

I was asked to add Recaptcha' to an already existing form. I didn't want to interfere with the code so I decided to search for some sort of AJAX solution. Here's my implementation of DarkSideOfTheCarton.com. This form needs to have a form with
  1. <script type="text/javascript" charset="utf-8" src="/location/to/jquery.1.3.1.min.js"></script>
  2. <script type="text/javascript" charset="utf-8">
  3. //Validate the Recaptcha' Before continuing with POST ACTION
  4. function validateCaptcha()
  5. {
  6. challengeField = $("input#recaptcha_challenge_field").val();
  7. responseField = $("input#recaptcha_response_field").val();
  8. //console.log(challengeField);
  9. //console.log(responseField);
  10. //return false;
  11. var html = $.ajax({
  12. type: "POST",
  13. url: "/location/to/ajax.recaptcha.php",
  14. data: "recaptcha_challenge_field=" + challengeField + "&recaptcha_response_field=" + responseField,
  15. async: false
  16. }).responseText;
  17.  
  18. //console.log( html );
  19. if(html == "success") {
  20. //Add the Action to the Form
  21. $("form").attr("action", "http://action/to/the/form_handler");
  22. //Indicate a Successful Captcha
  23. $("#captchaStatus").html("Success!");
  24. // Uncomment the following line in your application
  25. return true;
  26. } else {
  27. $("#captchaStatus").html("The security code you entered did not match. Please try again.");
  28. Recaptcha.reload();
  29. return false;
  30. }
  31. }
  32. </script>
  33.  
  34. <?php
  35. /*
  36. ** @Title: Recaptcha Validation
  37. ** @Date Modified: 6/01/09
  38. ** Instructions: This code lives within the form. Generally above the <SUBMIT> button
  39. */
  40.  
  41. //A.This div notifies the user whether the Recaptcha was Successful or not
  42. echo " " . '<div id="captchaStatus" style="color:red;font-size:12px"></div>';
  43.  
  44. //B. This script provides Recaptcha with a Theme
  45. echo " " .'<script type="text/javascript" charset="utf-8">';
  46. echo " " .'var RecaptchaOptions = { theme: "clean" };';
  47. echo " " . '</script>' . " ";
  48.  
  49. //C. Require the Recaptcha Library
  50. require_once('/location/to/recaptchalib.php');
  51.  
  52. //D. READ ME!
  53. $publickey = "RECAPTCHA_PUBLIC_KEY"
  54. recaptcha_get_html( $publickey );
  55. ?>
  56.  
  57.  
  58. <?php
  59. /*
  60. ** @Title: Recaptcha Validation
  61. ** @Date Modified: 6/01/09
  62. ** Instructions: Place this code in a file called "ajax.recaptcha.php"
  63. */
  64.  
  65. //A. Load the Recaptcha Libary
  66. require_once('/location/to/recaptchalib.php');
  67.  
  68. $privatekey = "RECAPTCHA_PRIVATE_KEY";
  69.  
  70. //B. Recaptcha Looks for the POST to confirm
  71. $resp = recaptcha_check_answer ($privatekey,
  72. $_SERVER["REMOTE_ADDR"],
  73. $_POST["recaptcha_challenge_field"],
  74. $_POST["recaptcha_response_field"]);
  75.  
  76. //C. If if the User's authentication is valid, echo "success" to the Ajax
  77. if ($resp->is_valid) {
  78. echo "success";
  79. } else {
  80. die ("The reCAPTCHA wasn't entered correctly. Go back and try it again." .
  81. "(reCAPTCHA said: " . $resp->error . ")");
  82. }
  83. ?>

以上是关于jQuery:使用AJAX验证Recaptcha'的主要内容,如果未能解决你的问题,请参考以下文章

ASP.Net MVC Recaptcha Jquery Ajax 问题

通过 jQuery + Ajax 将带有 Google reCaptcha v2 令牌的图像文件发送到 PHP

如何修复谷歌不可见 reCAPTCHA 验证后未提交的 Ajax 表单

当单个页面上存在 2 个表单时,如何使用 jQuery 表单验证插件验证 reCaptcha?

新的 Google ReCaptcha 实施和提交前检查

jQuery AJAX 登录问题(JSON 解析失败)