Chia sẻ kiến thức

Hướng dẫn tích hợp reCAPTCHA chống spam của Google

0

Một trong những công cụ chống thư rác tốt nhất, được nhiều người sử dụng nhất là sử dụng captcha. Trong đó reCAPTCHA do Google phát triển là công cụ được các lập trình viên ưa thích nhất. Hôm nay vinasupport.com sẽ hướng dẫn các bạn tích hợp nó vào một dự án web cụ thể.

Đăng ký reCAPTCHA Google

Đầu tiên truy cập vào đường dẫn sau: https://www.google.com/u/0/recaptcha/admin/create

Và thực hiện 5 bước như hình bên dưới:

  1. Nhãn mác: Nhập trang web của bạn hoặc lựa chọn của bạn
  2. loại reCAPTCHA: Chọn loại hình ảnh xác thực bạn sử dụng.
  3. Miền: Điền vào danh sách các miền cho hình ảnh xác thực này. Bạn nên sử dụng miền của mình và thêm localhost cho môi trường phát triển.
  4. Chấp nhận các điều khoản sử dụng của Google
  5. Nhấn [ Submit ] để đăng ký trang web của bạn.

Sau khi đăng ký, bạn sẽ nhận được 2 thông tin:

Tải game crack việt hoá tại: https://daominhha.com

Hãy lưu chúng để tích hợp vào trang web của chúng tôi.

Sử dụng reCAPTCHA

Giả sử tôi có một biểu mẫu như thế này:

Bạn thêm thư viện API của google

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>
</script>

Sau đó, thêm vị trí nơi Captcha xuất hiện

<div id="g-recaptcha" data-callback="recaptchaCallback"></div>

Thêm javascript render Captcha

var onloadCallback = function() {
    grecaptcha.render('g-recaptcha', {
        'sitekey' : '6Lev1BsgAAAAAOCEtZQzQOMr123456'
    });
};

Hãy nhớ thay đổi mã Key mà bạn đã đăng ký.

Sau đó, hiển thị nút gửi khi kiểm tra hộp hình ảnh xác thực.

var recaptchaCallback = function () {
    let submit = document.getElementById('submit-btn')
    submit.classList.remove('disabled');
}

Và cuối cùng, hãy kiểm tra xem hình ảnh xác thực đã được kiểm tra chưa trước khi gửi biểu mẫu

form = document.getElementById('dmca-report-form');
form.addEventListener('submit', function (e){
    if (grecaptcha && grecaptcha.getResponse().length !== 0) {
        this.submit();
    } else {
        alert('Please check captcha');
    }
    e.preventDefault();
})

Vì vậy, toàn bộ mã sẽ là:

<div class="row">
    <form class="col s12" method="post" action="" id="dmca-report-form" >
        <div class="row">
            <div class="input-field col s12">
                <input name="report_name" id="report_name" type="text" class="validate" value="<?= $fields['report_name'] ?? '' ?>">
                <label for="report_name">Your Name</label>
            </div>
        </div>
        <div class="row">
            <div class="input-field col s12">
                <input name="report_email" id="report_email" type="email" class="validate" value="<?= $fields['report_email'] ?? '' ?>">
                <label for="report_email">Your Email</label>
            </div>
        </div>
        <div class="row">
            <div class="input-field col s12">
                <input disabled value="<?= get_permalink($post->ID); ?>" id="report_url" type="text" class="validate">
                <label for="report_url">Report URL</label>
            </div>
        </div>
        <div class="row">
            <div class="input-field col s12">
                <textarea name="report_content" id="report_content" class="materialize-textarea"><?= $fields['report_content'] ?? '' ?></textarea>
                <label for="report_content">Message</label>
            </div>
        </div>
        <div class="row">
            <div class="input-field col s12">
                <div id="g-recaptcha" data-callback="recaptchaCallback"></div>
            </div>
        </div>
        <div class="row">
            <div class="input-field col s12">
                <input type="hidden" name="post_id" value="<?= $post->ID; ?>" />
                <input type="hidden" name="dmca_report_submit" value="1" />
                <button class="btn waves-effect waves-light disabled" id="submit-btn" type="submit">
                    <i class="material-icons right">send</i>Send Request
                </button>
            </div>
        </div>
    </form>
</div>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>
</script>
<script>
// For captcha
var onloadCallback = function() {
    grecaptcha.render('g-recaptcha', {
        'sitekey' : '6Lev1BsgAAAAAOCEtZQzQOMrEP123456'
    });
};
var recaptchaCallback = function () {
    let submit = document.getElementById('submit-btn')
    submit.classList.remove('disabled');
}
form = document.getElementById('dmca-report-form');
form.addEventListener('submit', function (e){
    if (grecaptcha && grecaptcha.getResponse().length !== 0) {
        this.submit();
    } else {
        alert('Please check captcha');
    }
    e.preventDefault();
})
</script>

Kết quả: Bạn đã tích hợp reCaptcha thành công.

Leave a comment