Menambahkan reCAPTCHA V3 dalam Form WordPress

Untuk mencegah spam maka biasanya ada mekanisme penangkal yang harus di pasang pada form yang akan mengirimkan email, salah satu yang tersedia dan banyak dipakai adalah recaptcha dari google.

Langkah awal

• Daftar untuk kode API keys di reCAPTCHA buka https://www.google.com/recaptcha/admin/create
• Login menggunakan akun google
• isi Label contoh wp.lokal
• isi domain , contoh saya pakai wp.lokal

Integrasi Google reCAPTCHA pada website letak kan pada client-side dan the server-side. Pada kasus saya akan meletakan html nya pada functions.php dengan memasukan script API recaptcha ke header tag menggunakan

wp_enqueue_script('recaptcha','https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key', array(), null, false );

Google reCAPTCHA v3 tidak menampikan form recaptcha, berbeda dengan v2 yang akan menampilkan form challenge, jadi diperlukan sebuah script yang akan menangkap google captcha token pada theme yang saya buat ini saya taruh di file reservation-form.js

let captcha = document.getElementById('recaptchaToken');
grecaptcha.ready(() => {
            grecaptcha.execute('reCAPTCHA_site_key', {action: 'submit_reservation_form'})
            .then((token) => {
                this.$refs.recaptchaToken.value = token;
            });
            // refresh token every minute to prevent expiration
            setInterval(() => {
            grecaptcha.execute('reCAPTCHA_site_key', {action: 'submit_reservation_form'})
            .then((token) => {
                this.$refs.recaptchaToken.value = token;
            });
            }, 60000);
        });

Lalu di sisi form html nya yang ada di file reservation-form.php ditambahkan input hidden dengan menambahkan atribute x-ref milik alpine js

<input type="hidden" id="recaptchaToken" name="recaptchaToken" x-ref="recaptchaToken" />

value input ini akan terisi oleh token yang sudah di ambil dari API recaptcha yg dimasukan di header tag, lalu dibaca oleh script grecaptcha , yang valuenya dimasukan kedalam input recaptchaToken memakai $refs alpine js kita akan mengetahui bahwa API script recaptcha sudah ter load pada halaman kita dibagian bawah akan muncul badge recaptcha

token ini akan dikirimkan ke server side php untuk diproses, pada kasus saya ini saya tambahkan +’&captcha=’+captcha.value dalam parameter yg dikirim melalui fetch ke admin-ajax.php milik WP

fetch( SiteParameters.ajax_url, {
 ------------
body: 'action=submit_reservation_form&nonce='+ nonce +'&formdata='+ JSON.stringify( this.formData )+'&captcha='+captcha.value  , 
 })

variabel ini lebih lanjut akan di proses di file utilities.php melalui

function submit_reservation_form() {
        $captcha = filter_input(INPUT_POST, 'captcha', FILTER_SANITIZE_STRING);

        if(!$captcha){
            echo 'please check captcha form';
        }       

        $secretKey='-----taruh secretkey------';
        $url = 'https://www.google.com/recaptcha/api/siteverify?secret='.urlencode($secretKey).'&response='.urlencode($captcha);
        $response = file_get_contents($url);
        $responseKey = json_decode($response, true);