Google reCAPTCHA là gì? Cách thêm reCAPTCHA và form đăng nhập và đăng ký wordpress

Xin chào các bạn, ở bài viết này mình sẽ giới thiệu về Google reCaptcha và cách chèn nó vào Form đăng nhập đăng ký của 1 website WordPress nhé. Với các site làm bằng mã nguồn khác, bạn cũng có thể tham khảo bài viết này để thực hiện. Nếu có gì khó khăn, hay liên hệ tôi sẵn sàng trợ giúp.

Google reCAPTCHA là gì?

Google reCAPTCHA là một dịch vụ Captcha miễn phí có khả năng chống spam, chống bot tự động thực hiện hành động trên form của website. Google reCAPTCHA với giao diện đơn giản, độ bảo mật cao và có thể dễ dàng tích hợp vào blog hoặc website của bạn.

Google reCAPTCHA đã trải qua 3 phiên bản chính thức:

Bản reCAPTCHA v1: là các ký tự được bóp méo mó khó nhìn
Bản reCAPTCHA v2: là những hình ảnh như biển báo, đèn giao thông, cửa hàng, … hoặc check box vào ô reCaptcha
Bản reCAPTCHA v3: phiên bản mới nhất hiện tại cực kỳ thông mình, nó hoạt động ngầm và ngăn chặn gần như tuyệt đối các bot spam

Để tìm hiểu kỹ hơn về Google reCAPTCHA hãy truy cập https://www.google.com/recaptcha/intro/

Trước khi thực hiện việc chèn Google reCAPTCHA cho form, phải chắc chắn rằng bạn đã biết cách đăng ký. Tham khảo bài viết này của tôi nhé 🙂 Hướng dẫn cách đăng ký Google reCAPTCHA 2020

Chèn Google reCAPTCHA cho form

Thêm javascript của Google vào trang đăng nhập, đăng ký của wordpress

Ta sử dụng add_action() của wordpress để thêm bằng cách dán đoạn code sau vào file functions.php của theme đang sử dụng. Nên sử dụng Child-theme để có thể còn update theme chính được. Nên đọc: Cách tạo Child Theme WordPress

add_action('login_enqueue_scripts', function () {
    wp_enqueue_script('google-recaptcha', 'https://www.google.com/recaptcha/api.js?hl=vi');
});

Google sẽ tự nhận ngôn ngữ để hiển thị, nhưng bạn muốn cố định 1 ngôn ngữ nào đó có thể thêm ?hl= vào cuối như đoạn code mình viết ở trên. Google reCAPTCHA hỗ trợ hơn 40 ngôn ngữ khác nhau. Xem thêm các ngôn ngữ khác tại đây

Thêm field mới vào cho form đăng nhập, đăng ký

Sử dụng action hook “login_form” để thêm cho form đăng nhập và “register_form” để thêm cho form đăng ký. Thêm code như sau vào fle functions.php.

if (!is_user_logged_in()) {
    add_action('login_form', 'hkt_recaptcha_field');
    add_action('register_form', 'hkt_recaptcha_field');
}
function hkt_recaptcha_field()
{
    $sitekey = '--Your site key--';
    echo '<div class="g-recaptcha" data-sitekey="' . $sitekey . '"></div>';
}

Thay –Your site key– bằng Site key của bạn.

Viết function và móc function này vào xử lý kết quả cho Form

Code như sau:

if (!is_user_logged_in()) {
    add_filter('wp_authenticate_user', 'hkt_verify_recaptcha_on_login_register', 10, 3);
    add_filter('registration_errors', 'hkt_verify_recaptcha_on_login_register', 10, 3);
}
function hkt_verify_recaptcha_on_login_register($user = null, $password = null)
{
    $secretkey = "--Your secret key--";
    if (isset($_POST['g-recaptcha-response'])) {
        $response = wp_remote_get('https://www.google.com/recaptcha/api/siteverify?secret=' . $secretkey . '&response=' . $_POST['g-recaptcha-response'] . '&remoteip=' . $_SERVER['REMOTE_ADDR']);
        
        $response = json_decode($response['body'], true);
        if (true == $response['success']) {
            return $user;
        } else {
            return new WP_Error('Captcha Invalid', __('ERROR: You are a bot'));
        }
    } else {
        return new WP_Error('Captcha Invalid', __('ERROR: You are a bot. If not then enable JavaScript.'));
    }
}

Hãy thay –Your secret key– thành mã Secret của bạn nhé.

Giải thích:

https://www.google.com/recaptcha/api/siteverify: đây chính là API Request của Google cho bạn.
secret,response,remoteip: các tham số giúp google xác định được có đúng là người dùng hay không hay Boot.
true == $response[‘success’] {}: Nếu xác định là người dùng trả về là đúng thì tiếp tục form xử lý đăng nhập, đăng ký.
else{}: Nếu xác định là người dùng trả về là sai thì dừng xử lý form.
add_action() và add_filter(): Các hook của wordpress
if (!is_user_logged_in()): để kiểm tra xem người dùng đăng nhập chưa.

Kết quả đạt được:

Chúc các bạn thành công!

Google reCAPTCHA là gì?

Chèn Google reCAPTCHA cho form

Kết quả đạt được:

Bài viết khác