Question

我是Web开发的新手，我正在尝试以HTML形式实现reCaption。我尝试了许多在线教程，但无法在代码中正确实现它。

头：

<script src="https://www.google.com/recaptcha/api.js?render=6LfRQZ4UAAAAAAuMMBQhrBVmyjkVsD"></script>
<script>
    grecaptcha.ready(function () {
        grecaptcha.execute('6LfRQZ4UAAAAAAuMMBhzvMWVmyjkVsD', { action: 'contact' }).then(function (token) {
            var recaptchaResponse = document.getElementById('recaptchaResponse');
            recaptchaResponse.value = token;
        });
    });
</script>

表格：

      <form id="ajax-contact" method="post" action="mailer.php">
            <fieldset>

            <div class="form-field">
            <input type="text" id="name" name="name" placeholder="Full Name" value="" required="" aria-required="true" class="full-width">
            </div>

            <div class="form-field">
            <input type="email" id="email" name="email" placeholder="Email" value="" required="" aria-required="true" class="full-width"placeholder="Telephone Number" value="" required="" aria-required="true" class="full-width">
            </div>

            <div class="form-field">
            <input name="telno" type="text" id="telno" placeholder="Telephone Number" value="" required="" aria-required="true" class="full-width">
            </div>
            <div class="form-field">
            <input name="subj" type="text" id="subj" placeholder="Subject" value="" class="full-width">
            </div>

            <div class="form-field">
            <textarea id="message" name="message" placeholder="Leave Message" value="" required="" aria-required="true" class="full-width"></textarea>
            </div>
          <div class="form-field">
            <input type="hidden" name="recaptcha_response" id="recaptchaResponse">
        </div>
            <div class="form-field">
                <button id="submit" type="submit" name="submit" class="full-width btn--primary">SEND</button>
                <div class="submit-loader">
                    <div class="text-loader">Sending...</div>
                    <div class="s-loader">
                        <div class="bounce1"></div>
                        <div class="bounce2"></div>
                        <div class="bounce3"></div>
                    </div>
                </div>
            </div>

mailer.php：

<?php // Check if form was submitted:
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['recaptcha_response'])) {

    // Build POST request:
    $recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
    $recaptcha_secret = '6LfRQZ4UAAAAAJhdTvqgZyMJB-HO4XL_';
    $recaptcha_response = $_POST['recaptcha_response'];

    // Make and decode 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->score >= 0.5) {
        // Verified - send email
    } else {
        // Not verified - show form error
    }

} ?>
?>
<?php
    if ($_SERVER["REQUEST_METHOD"] == "POST") {
        $name = strip_tags(trim($_POST["name"]));
        $name = str_replace(array("\r","\n"),array(" "," "),$name);
        $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
        $message = trim($_POST["message"]);
        $telno = trim($_POST["telno"]);
        $subj = trim($_POST["subj"]);

        if ( empty($name) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
            http_response_code(400);
            echo "Oops! There was a problem with your submission. Please complete the form and try again.";
            exit;
        }


        $recipient = "user@mail.com";

        $subject = "New contact from $name";

        $email_content = "Name: $name\n";
        $email_content .= "Email: $email\n";
        $email_content .= "Telephone Number: $telno\n";
        $email_content .= "Subject : $subj\n\n";
        $email_content .= "Message:\n$message\n";


        $email_headers = "From: $name <$email>";


        if (mail($recipient, $subject, $email_content, $email_headers)) {

            http_response_code(200);
            echo "Thank You! Your message has been sent.";
        } else {

            http_response_code(500);
            echo "Oops! Something went wrong and we couldn't send your message.";
        }

    } else {

        http_response_code(403);
        echo "There was a problem with your submission, please try again.";
    }

?>

app.js：

$(function() {

    var form = $('#ajax-contact');

    var formMessages = $('#form-field');

    $(form).submit(function(e) {
        e.preventDefault();


        var formData = $(form).serialize();

        $.ajax({
            type: 'POST',
            url: $(form).attr('action'),
            data: formData
        })
        .done(function(response) {

            $(formMessages).removeClass('error');
            $(formMessages).addClass('success');

            $(formMessages).text(response);

            $('#name, #email, #telno, #subj, #message').val('');
        })
        .fail(function(data) {

            $(formMessages).removeClass('success');
            $(formMessages).addClass('error');

            if (data.responseText !== '') {
                $(formMessages).text(data.responseText);
            } else {
                $(formMessages).text('Oops! An error occured and your message could not be sent.');
            }
        });

    });

});

我想以这种形式添加reCatcha以避免垃圾邮件发送者。我也尝试了官方的google文档，但无法在代码中正确实现。预先感谢您提供任何解决方案。

无法以HTML形式实现reCaptcha

0 个答案: