如何将reCAPTCHA v3添加到PHP表单并使用Ajax提交

<form id="contact-form" method="post">
   <p class="label">Full Name *</p>
   <input type="text" name="name" placeholder="Full Name" required>
   <p class="label">Email *</p>
   <input type="email" name="email" placeholder="Email" required>
   <p class="label">Message *</p>
   <textarea name="message" rows="6" placeholder="Type your message here" required></textarea>
   <!-- A hidden div “alert” below to display the message received from server once form is submitted-->
   <div id="alert"></div>
   <button id="submit-button" type="submit">Send Message</button>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
   $('#contact-form').submit(function(event) {
       event.preventDefault(); // Prevent direct form submission
       $('#alert').text('Processing...').fadeIn(0); // Display "Processing..." to let the user know that the form is being submitted
       $.ajax({
           url: 'contact.php',
           type: 'post',
           data: $('#contact-form').serialize(),
           dataType: 'json',
           success: function( _response ){
               // The Ajax request is a success. _response is a JSON object
               var error = _response.error;
               var success = _response.success;
               if(error != "") {
                   // In case of error, display it to user
                   $('#alert').html(error);
               }
               else {
                   // In case of success, display it to user and remove the submit button
                   $('#alert').html(success);
                   $('#submit-button').remove();
               }
           },
           error: function(jqXhr, json, errorThrown){
               // In case of Ajax error too, display the result for demo purpose
               var error = jqXhr.responseText;
               $('#alert').html(error);
           }
       });
   });
</script>

<?php

// Server side validation
function isValid() {
   // This is the most basic validation for demo purposes. Replace this with your own server side validation
   if($_POST['name'] != "" && $_POST['email'] != "" && $_POST['message'] != "") {
       return true;
   } else {
       return false;
   }
}

$error_output = '';
$success_output = '';

if(isValid()) {
   $success_output = "Your message sent successfully";
} else {
   // Server side validation failed
   $error_output = "Please fill all the required fields";
}

$output = array(
   'error'     =>  $error_output,
   'success'   =>  $success_output
);

// Output needs to be in JSON format
echo json_encode($output);

?>

<script async src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY_HERE"></script>

<input type="hidden" name="recaptcha_response" id="recaptchaResponse">

grecaptcha.ready(function () {
   grecaptcha.execute('YOUR_SITE_KEY_HERE', { action: 'contact' }).then(function (token) {
      var recaptchaResponse = document.getElementById('recaptchaResponse');
      recaptchaResponse.value = token;
      // Make the Ajax call here
   });
});

// Build POST request to get the reCAPTCHA v3 score from Google
$recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
$recaptcha_secret = 'YOUR_SECRET_KEY_HERE'; // Insert your secret key here
$recaptcha_response = $_POST['recaptcha_response'];

// Make the POST request
$recaptcha = file_get_contents($recaptcha_url . '?secret=' . $recaptcha_secret . '&response=' . $recaptcha_response);

$recaptcha = json_decode($recaptcha);
// Take action based on the score returned
if ($recaptcha->success == true && $recaptcha->score >= 0.5 && $recaptcha->action == 'contact') {
   // This is a human. Insert the message into database OR send a mail
   $success_output = "Your message sent successfully";
} else {
   // Score less than 0.5 indicates suspicious activity. Return an error
   $error_output = "Something went wrong. Please try again later";
}

This site is protected by reCAPTCHA and the Google
   <a href="https://policies.google.com/privacy">Privacy Policy</a> and
   <a href="https://policies.google.com/terms">Terms of Service</a> apply.

.grecaptcha-badge {
   visibility: hidden;
}