Question

reCAPTCHA

是否可以将Google's incredible reCAPTCHA和Matias Meno的令人难以置信的dropzone.js结合起来，以防止攻击并阻止垃圾邮件机器人？

Answer 1

使用wordpress。这是我在几个教程后提出的：

SO answer
codeforgeek

还有一些我不记得了

// Dropzone.autoDiscover = false; //I use Autodiscover
Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element

// The configuration we've talked about above
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 100,
previewsContainer: '.fileupload',

// The setting up of the dropzone
init: function() {
    var myDropzone = this;

    // First change the button to actually tell Dropzone to process the queue.
    this.element.querySelector("input[type=submit]").addEventListener("click", function(e) {
        // Make sure that the form isn't actually being sent.
        e.preventDefault();
        e.stopPropagation();
        // myDropzone.processQueue();

        var valid = true;
        $('[data-required]').each(function(i,ele){
            if(ele.value == ''){
                $(this).parent().parent().addClass('alert');
                valid = false;
            }
        });
        if (!valid){
            e.preventDefault();
            scrollTop();
            return false;
        }

        // Get the recaptcha input
        var cap_input = grecaptcha.getResponse();
        $.ajax({
            url: homeUrl+'/wp-admin/admin-ajax.php',
            type: "POST",
            dataType: "JSON",
            data: {
                "action": "verifyReCaptcha",
                "g-recaptcha-response": cap_input
            },
            success: function(response){
                console.log(response);

                if(response == 'Good captcha'){


                    if (myDropzone.getQueuedFiles().length > 0) {
                        myDropzone.processQueue();
                    }
                    else {
                        // Upload anyway without files
                        if (wantToUpload == 'unknown') {
                            $('#noFiles').modal();
                            e.preventDefault();
                            return false;
                        }
                        else if (wantToUpload == false) {
                            myDropzone.uploadFiles([ ]);
                        }
                        else {
                            myDropzone.uploadFiles([ ]);
                        }
                    }
                }
                else{
                    console.log('Spammer go away');
                    $('.g-recaptcha').addClass('alert');
                }
            }
        });
    });

    // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
    // of the sending event because uploadMultiple is set to true.
    this.on("sendingmultiple", function() {
    // Gets triggered when the form is actually being sent.
    // Hide the success button or the complete form.
    console.log('sending');
});
    this.on("successmultiple", function(files, response) {
    // Gets triggered when the files have successfully been sent.
    // Redirect user or notify of success.
    console.log('success');
});
    this.on("errormultiple", function(files, response) {
    // Gets triggered when there was an error sending the files.
    // Maybe show form again, and notify user of error
    console.log('error');
});
}
}

还有一些html / php

<form name="" action="<?=get_permalink();?>" method="post" id="my-awesome-dropzone" class="dropzone" enctype="multipart/form-data">
    <label class="label" for="text-435">
        <?=__('Name*','gt_domain');?>
    </label>
    <input type="text" name="client-name" value="" size="40" class="input__field--manami" id="text-435" data-required="true">

    <!-- Lots of input fields -->

    <div class="col-md-8 col-xs-12 fileupload dropzone-previews dz-message">
        <h2 class="text-center" id="fileuploadtext">
            <?=__('Click or drag and drop your file here <br>(Max 60mb)','gt_domain');?>
        </h2>
    </div>
    <div class="g-recaptcha" data-sitekey="MY_PUBLIC_KEY"></div>
    <input class="dangerzone-submit" type="submit" value="<?=__('Request quote','gt_domain');?>" name="dangerzone-submit">
</form>

在提交表单之前进行ajax验证：

function verifyReCaptcha(){
        $email;
        $comment;
        $captcha = false;
        if(isset($_POST['g-recaptcha-response'])){
          $captcha=$_POST['g-recaptcha-response'];
        }
        if(!$captcha){
          echo json_encode('Please check the the captcha form.');
          exit;
        }
        $response=json_decode(file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=MY_SUPER_SECRET_GOOGLE_RECAPTCHA_KEY&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']), true);
        if($response['success'] == false){
          echo json_encode('You are spammer ! Get the @$%K out');
        }
        else{
          echo json_encode('Good captcha');
        }
        exit;
}
add_action( 'wp_ajax_nopriv_verifyReCaptcha', 'verifyReCaptcha' );
add_action( 'wp_ajax_verifyReCaptcha', 'verifyReCaptcha' );

并且finnaly收到表单输入和图片：

<?php
if (isset($_POST['dangerzone-submit'])) {
    // print_r($_POST);
    $client = $_POST['client-name'];
    $email = $_POST['email'];
    $company = $_POST['company'];
    $phone = $_POST['phone'];
    $comments = $_POST['comments'];



    if ($_FILES) {
        foreach ($_FILES as $file => $array) {
            // print_r($array);
            if ($_FILES[$file]['error'] !== UPLOAD_ERR_OK &&  $_FILES[$file]['error'][0] !== 0) {
                echo "upload error : \n";
                print_r($_FILES[$file]['error']);
                print_r($_FILES);
                die();
            }
            $uploads_dir = ABSPATH . 'wp-content/uploads/dropzone/';
            $external_link = get_home_url().'/wp-content/uploads/dropzone/';

            foreach ($array['name'] as $key => $val) {
                print_r($key);
                $name = $array['name'][$key];
                $tmp_name = $array['tmp_name'][$key];
                $newfilename = wp_unique_filename( $uploads_dir, $name );

                $movefile = move_uploaded_file($tmp_name, $uploads_dir.$newfilename);
                $uploaded_files[] = $external_link.$newfilename;
            }
        }
    }


    sendMail( //My func for sending mail
            $client,
            $email,
            $company,
            $phone,
            $comments,
            $uploaded_files
        );

}
?>

reCAPTCHA和Dropzone JS

1 个答案: