Integrasi GeeTest v4 di WordPress: Solusi Captcha Interaktif, Ringan, dan Anti-Bot

Captcha jaman purba sering kali menyiksa user dengan teka-teki gambar yang membingungkan. Selain merusak pengalaman pengguna, plugin captcha yang terlalu berat juga bisa memperlambat performa website wordpress Anda.

GeeTest v4 hadir sebagai solusi modern yang menggabungkan keamanan tingkat tinggi dengan interaksi yang menyenangkan. Artikel ini akan memandu Anda melakukan integrasi manual GeeTest v4 tanpa plugin tambahan, lengkap dengan dua metode: Popup Button dan Invisible (Bind).

Mengapa Integrasi Ini Sangat Solutif?

1. Stop Plugin Bloat: Mengurangi ketergantungan pada banyak plugin. Cukup satu kode snippet untuk mengamankan 3 formulir sekaligus (Login, Register, Lost Password).
2. UX Manusiawi vs Captcha Purba: Tidak ada lagi menebak teks miring atau mencari lampu merah. User cukup menggeser puzzle dalam hitungan detik. Sangat interaktif!
3. Analisis Perilaku (Biometrik): Mengamankan formulir bukan hanya dari teks, tapi dari cara user menggerakkan kursor/jari. Ini jauh lebih sulit ditembus AI bot modern dibanding captcha gambar biasa.
4. Optimasi Performa: Kode hanya akan dimuat pada halaman yang membutuhkan (Login/Register), sehingga tidak membebani kecepatan load di halaman depan website.
5. Fix Masalah Klasik (Token Expired): Menggunakan logika Static Cache untuk memastikan verifikasi tidak gagal akibat sistem WordPress yang memproses autentikasi dua kali.

Langkah 1: Logika Backend (Mesin Utama)

Apapun metode tampilan yang Anda pilih nanti, Anda wajib memasang kode backend ini terlebih dahulu. Kode ini berfungsi sebagai “satpam” yang memvalidasi token ke server GeeTest.

/**
 * GEETEST V4 BACKEND ENGINE - REUSABLE LOGIC
 * Solusi untuk validasi server-side yang aman dan anti-duplicate.
 */
function verify_geetest_v4_backend() {
    static $verification_result = null;
    if ($verification_result !== null) return $verification_result;

    $captcha_id  = 'MASUKKAN_CAPTCHA_ID_ANDA';
    $captcha_key = 'MASUKKAN_CAPTCHA_KEY_ANDA';

    $lot_number = $_POST['lot_number'] ?? '';
    if (empty($lot_number)) return false;

    $sign_token = hash_hmac('sha256', $lot_number, $captcha_key);
    $url = "https://gcaptcha4.geetest.com/validate?" . http_build_query([
        "lot_number"     => $lot_number,
        "captcha_output" => $_POST['captcha_output'] ?? '',
        "pass_token"     => $_POST['pass_token'] ?? '',
        "gen_time"       => $_POST['gen_time'] ?? '',
        "captcha_id"     => $captcha_id,
        "sign_token"     => $sign_token
    ]);

    $response = wp_remote_get($url);
    if (is_wp_error($response)) return false;

    $body = json_decode(wp_remote_retrieve_body($response), true);
    $verification_result = (isset($body['result']) && $body['result'] === 'success');
    return $verification_result;
}

// Hooks Autentikasi WordPress
add_filter('wp_authenticate_user', function($user, $password) {
    if (empty($_POST['log']) || is_wp_error($user)) return $user;
    if (!verify_geetest_v4_backend()) return new WP_Error('geetest_failed', '<strong>ERROR</strong>: Verifikasi slider gagal, Cok!');
    return $user;
}, 20, 2);

add_filter('registration_errors', function($errors) {
    if (empty($_POST['user_login'])) return $errors;
    if (!verify_geetest_v4_backend()) $errors->add('geetest_failed', '<strong>ERROR</strong>: Verifikasi slider gagal!');
    return $errors;
}, 10);

add_action('lostpassword_post', function($errors) {
    if (empty($_POST['user_login']) || (is_wp_error($errors) && $errors->get_error_code())) return;
    if (!verify_geetest_v4_backend()) wp_die('Gagal verifikasi captcha.', 'Error', ['back_link' => true]);
}, 10, 1);

Langkah 2: Pilih Metode Tampilan (Frontend)

Pilih salah satu dari dua metode di bawah ini sesuai selera desain website Anda.

Opsi A: Metode Popup Button (Interaktif)

Metode ini memunculkan tombol “Klik untuk memverifikasi” di dalam formulir. Cocok untuk memberikan kejelasan keamanan pada user.

add_action('login_form', 'geetest_v4_display_popup');
add_action('register_form', 'geetest_v4_display_popup');
add_action('lostpassword_form', 'geetest_v4_display_popup');

function geetest_v4_display_popup() {
    ?>
    <script src="https://static.geetest.com/v4/gt4.js"></script>
    <div id="geetest-captcha-box" style="margin: 15px 0;"></div>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var targetForm = document.getElementById('loginform') || document.getElementById('registerform') || document.getElementById('lostpasswordform');
            if (!targetForm) return;

            initGeetest4({
                captchaId: 'MASUKKAN_CAPTCHA_ID_ANDA',
                product: 'popup', language: 'ind', nativeButton: { width: '100%' }
            }, function (captchaObj) {
                captchaObj.appendTo("#geetest-captcha-box");
                captchaObj.onSuccess(function() {
                    var result = captchaObj.getValidate();
                    Object.keys(result).forEach(function(key) {
                        var input = document.createElement('input');
                        input.type = 'hidden'; input.name = key; input.value = result[key];
                        targetForm.appendChild(input);
                    });
                });
            });
        });
    </script>
    <style>
        #loginform, #registerform, #lostpasswordform { display: flex !important; flex-direction: column !important; }
        #geetest-captcha-box { order: 3; min-height: 44px; }
        .submit, .forgetmenot { order: 4; }
        .geetest_panel.geetest_wind { z-index: 999999 !important; }
    </style>
    <?php
}

Opsi B: Metode Invisible / Blind (Estetik)

Captcha tidak terlihat. Tantangan puzzle hanya akan muncul secara otomatis saat user menekan tombol submit.

add_action('login_form', 'geetest_v4_display_invisible');
add_action('register_form', 'geetest_v4_display_invisible');
add_action('lostpassword_form', 'geetest_v4_display_invisible');

function geetest_v4_display_invisible() {
    ?>
    <script src="https://static.geetest.com/v4/gt4.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var targetForm = document.getElementById('loginform') || document.getElementById('registerform') || document.getElementById('lostpasswordform');
            if (!targetForm) return;

            initGeetest4({
                captchaId: 'MASUKKAN_CAPTCHA_ID_ANDA',
                product: 'bind', language: 'ind'
            }, function (captchaObj) {
                targetForm.addEventListener('submit', function(e) {
                    if (!captchaObj.getValidate()) {
                        e.preventDefault();
                        captchaObj.showCaptcha();
                    }
                });
                captchaObj.onSuccess(function() {
                    var result = captchaObj.getValidate();
                    Object.keys(result).forEach(function(key) {
                        var input = document.createElement('input');
                        input.type = 'hidden'; input.name = key; input.value = result[key];
                        targetForm.appendChild(input);
                    });
                    targetForm.submit(); 
                });
            });
        });
    </script>
    <style>.geetest_panel.geetest_wind { z-index: 999999 !important; }</style>
    <?php
}

Membedah Hook WordPress yang Digunakan

Agar integrasi ini berjalan sempurna di berbagai pintu masuk WordPress, kita menggunakan tiga hook utama:

1. wp_authenticate_user (Filter)
   • Fungsi: Ini adalah gerbang utama proses Login.
   • Kenapa Solutif? Kita pasang di sini agar WordPress mengecek Captcha tepat setelah user memasukkan kredensial, tapi sebelum user benar-benar masuk ke Dashboard. Kita beri prioritas 20 agar ia berjalan sinkron dengan validasi password.
2. registration_errors (Filter)
   • Fungsi: Menangani validasi saat seseorang mencoba mendaftar akun baru.
   • Kenapa Solutif? Hook ini memungkinkan kita menyisipkan pesan error kustom (“Verifikasi slider gagal”) ke dalam daftar error registrasi bawaan WordPress jika captcha tidak valid.
3. lostpassword_post (Action)
   • Fungsi: Dieksekusi saat user mengirim permintaan reset password.
   • Kenapa Solutif? Mencegah bot membombardir server lo dengan permintaan reset password (email spam). Di sini kita menggunakan wp_die untuk memberikan proteksi keras jika verifikasi captcha gagal.
4. login_form, register_form, lostpassword_form (Actions)
   • Fungsi: Hook tampilan untuk menyuntikkan script dan elemen HTML ke dalam form.
   • Kenapa Solutif? Dengan mengikat satu fungsi ke tiga hook ini, kita memastikan script GeeTest hanya dimuat saat form tersebut muncul di layar, sehingga menghemat resource website.

Kesimpulan

Mengamankan WordPress tidak harus mengorbankan keindahan desain atau kenyamanan pengguna. Dengan integrasi manual GeeTest v4 ini, Anda mendapatkan sistem keamanan solutif yang jauh lebih modern dibanding Captcha konvensional.

Pilih metode Popup Button untuk interaksi yang jelas, atau metode Invisible untuk tampilan minimalis. Selamat mencoba dan amankan website Anda dari serangan bot sekarang juga!