javascript - 如何对我的表单联系人使用 reCAPTCHA？

Question

当我按下表单上的“提交”按钮时，reCAPTCHA 将允许。我的表单可以发送消息而无需检查我不是机器人。我不知道这是否与包含ajax有关。如何对我的表单联系人使用 reCAPTCHA？

非常感谢您在此事上花费的时间和提供的帮助。

这是我的 HTML 代码。

<form class="callus" onSubmit="return false">
  <div id="result"></div>
  <input type="text" name="name" id="name">
  <input type="email" name="email" id="email">
  <textarea name="message" id="message"></textarea>
  <div class="g-recaptcha" data-sitekey="XXXXX"></div>
  <button id="submit_btn">Submit</button>
</form>

这是我的 JavaScript。

jQuery(document).ready(function($){
  $("#submit_btn").click(function() {
    var user_name       = $('input[name=name]').val();
    var user_email      = $('input[name=email]').val();
    var user_message    = $('textarea[name=message]').val();

    var post_data, output;
    var proceed = true;
      if(user_name==""){
        proceed = false;
      }
      if(user_email==""){
        proceed = false;
      }
      if(user_subject==""){
        proceed = false;
      }
      if(user_message==""){
        proceed = false;
      }

      if(proceed) {
        post_data = {'userName':user_name, 'userEmail':user_email, 'userMessage':user_message};

        $.post('email.php', post_data, function(response){

          if(response.type == 'error') {
            output = '<div class="alert-danger">'+response.text+'</div>';
          }else{
            output = '<div class="alert-success">'+response.text+'</div>';
            $('.callus input').val('');
            $('.callus textarea').val('');
          }
        $("#result").hide().html(output).slideDown();
      }, 'json');
    }
  });

  $(".callus input, .callus textarea").keyup(function() {
    $("#result").slideUp();
  });
});

电子邮件.php

<?php
  if($_POST) {
    $to_Email       = 'demo@localhost.com';
    $subject        = 'New Contact Inquiry';

    if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {

      $output = json_encode(
        array(
          'type'=>'error',
          'text' => 'Request must come from Ajax'
      ));
      die($output);
    }

    if(!isset($_POST["userName"]) || !isset($_POST["userEmail"]) || !isset($_POST["userMessage"])) {
      $output = json_encode(array('type'=>'error', 'text' => 'Input fields are empty!'));
      die($output);
    }

    $user_Name        = filter_var($_POST["userName"], FILTER_SANITIZE_STRING);
    $user_Email       = filter_var($_POST["userEmail"], FILTER_SANITIZE_EMAIL);
    $user_Message     = filter_var($_POST["userMessage"], FILTER_SANITIZE_STRING);

    if(strlen($user_Name)<3) {
      $output = json_encode(array('type'=>'error', 'text' => 'Name is too short or empty!'));
      die($output);
    }
    if(!filter_var($user_Email, FILTER_VALIDATE_EMAIL)) {
      $output = json_encode(array('type'=>'error', 'text' => 'Please enter a valid email!'));
      die($output);
    }

    if(strlen($user_Message)<5) {
      $output = json_encode(array('type'=>'error', 'text' => 'Too short message! Please enter something.'));
      die($output);
    }

    $message_Body = "<strong>Name: </strong>". $user_Name ."<br>";
    $message_Body .= "<strong>Email: </strong>". $user_Email ."<br>";
    $message_Body .= "<strong>Message: </strong>". $user_Message ."<br>";

    $headers = "From: " . strip_tags($user_Email) . "\r\n";
    $headers .= "Reply-To: ". strip_tags($user_Email) . "\r\n";
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";

    $sentMail = @mail($to_Email, $subject, $message_Body, $headers);

    if(!$sentMail) {
      $output = json_encode(array('type'=>'error', 'text' => 'Could not send mail! Please check your PHP mail configuration.'));
      die($output);
    }else{
      $output = json_encode(array('type'=>'message', 'text' => 'Hi '.$user_Name .' Thank you for contacting us.'));
      die($output);
    }
  }
?>

Answer 1

您必须在服务器端验证验证码。检查验证码后，它会给您验证码。

var captchaCode = this.grecaptcha.getResponse();

Re-Captcaha提供回调函数，例如

<div class="g-recaptcha" id="headerCaptcha" data-callback="recaptchaCallbackHeader" data-expired-callback="recaptchaExpiryHeader" data-sitekey="xxx"></div>

您必须将此 capthca 代码发布到 backednd 以在 recaptchaCallbackHeader 内进行验证。 (详细代码请引用下面的链接)

    $secretKey = "Put your secret key here";
    $ip = $_SERVER['REMOTE_ADDR'];
    $response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secretKey."&response=".$captcha."&remoteip=".$ip);

您将得到此 API 的响应。

  $responseKeys = json_decode($response,true);
    if(intval($responseKeys["success"]) !== 1) {
      echo '<h2>You are not a robot  @$%K out</h2>';
    } else {
      echo '<h2>Thanks for posting comment.</h2>';
    }

记住 recaptcha 提供两种类型的 key 。

1. 在服务器端用于验证验证码的私钥。
2. 站点 key ，用于在 clint 端呈现验证码。

See how reCaptcah works

和Here to validate using PHP.