Amankan Form di Laravel-mu dari Bot dengan Implementasi Googgle reCAPTCHA Menggunakan Package anhskohbo/no-captcha

Image Source: https://blog.andreas-stricker.at/wp-content/uploads/2022/01/google-recaptcha-v3.jpg

Halo gais, kali ini aku mau bawain topik seputar web development. Jadi bagi kalian yang sedang bingung mau pake apa nge-amanin form website kalian dari bot, apalagi website kalian punya fitur penting seperti login dan register, kalian bisa memakai reCAPTCHA dari Google buat memvalidasi pengunjung website kalian apakah dia manusia atau robot.

reCAPTCHA ini memiliki 2 tipe yaitu reCAPTCHA v2 dan v3. Nah pada pembahasan kali ini, aku bakal memakai yang v2. reCAPTCHA v2 ini memiliki 3 jenis yaitu checkbox, background checking, dan versi Android. Untuk makin mempermudah implementasi reCAPTCHA dan validasi user, jika kalian memakai framework Laravel di website kalian, kalian bisa menggunakan package anhskohbo/no-captcha. Okay, langsung saja menuju ke pembahasan pertama yaitu setup Google reCAPTCHA.

1. Setup Google reCAPTCHA

Hal pertama yang harus kalian lakukan adalah melakukan setup Google reCAPTCHA. Untuk mengakses console admin Google reCAPTCHA, kalian menuju halaman https://www.google.com/recaptcha/about/, lalu tekan menu v3 Admin Console.

Halaman Google reCAPTCHA

Setelah itu, kita switch dulu ke mode classic key. Pada halaman console admin Google reCAPTCHA di bagian card “Now enterprise ready!”, kalian tekan text button “Switch to create a classic key” dan akan diarahkan menuju halaman Register a new site.

Card “Now enterprise ready!”

Di halaman Register a new site, kalian pilih reCAPTCHA v2 dengan jenis “I’m not a robot” Checkbox, lalu sisanya kalian bisa isi dengan data sesuai kebutuhan kalian. Contohnya bisa dilihat di bawah ini.

Form Register a New Site

Jika sudah, kalian tinggal klik tombol “Submit” dan kalian akan diarahkan ke halaman “Adding reCAPTCHA to your site”. Di halaman ini akan ditampilkan site key dan secret key kalian.

Halaman Adding reCAPTCHA to your site

Kalian bisa simpan site key dan secret key untuk kita pakai di pembahasan selanjutnya. Next kita akan menuju project Laravel dan melakukan instalasi dan implementasi package anhskohbo/no-captcha.

2. Melakukan Installasi dan Implementasi Package anhskohbo/no-captcha

Untuk instalasi package ini, caranya cukup simple. Kalian tinggal buka terminal di project Laravel dan jalankan command di bawah ini.

composer require anhskohbo/no-captcha

Jika versi project Laravel kalian di atas 5.5, kalian tidak memerlukan setup lanjutan setelah menginstall package anhskohbo/no-captcha. Next, kalian copy paste site key dan secret key reCAPTCHA kalian, dan tambahkan variabel ini di file.env kalian.

NOCAPTCHA_SECRET=ganti-dengan-secret-key-kalian
NOCAPTCHA_SITEKEY=ganti-dengan-site-key-kalian

Okay, next kita akan menampilkan reCAPTCHA di halaman yang kita inginkan. Caranya cukup simple, kalian tinggal include kode di bawah ini di file blade kalian.

{!! NoCaptcha::renderJs() !!}
{!! NoCaptcha::display() !!}

Lalu tampilannya akan menjadi seperti ini (aku mengimplementasikan reCAPTCHA ini di halaman login).

Tampilan reCAPTCHA

Okeh, reCAPTCHA-nya sudah terinstall dan berhasil ditampilkan, tapi apakah ini sudah bekerja? Tentu belum WKKWKW. Masih ada satu hal lagi yang kita perlu tambahkan, yaitu validasi reCAPTCHA. Pada kasusku, jika aku ingin memastikan bahwa user sudah centang kolom “I’m not a robot” saat melakukan submit credential mereka, maka saat validasi credential user perlu menambahkan satu buah parameter lagi yang perlu di cek yaitu parameter g-recaptcha-response.

Pada file form request yang kalian gunakan untuk memvalidasi data yang di submit di halaman yang ada reCAPTCHA nya (pada kasusku, di file form request untuk login), kalian tinggal tambahkan satu rules lagi untuk divalidasi. Contohnya bisa dilihat di bawah ini.

public function rules()
{
    return [
        ...
        // kode di bawah ini yang kalian tambahkan
        'g-recaptcha-response' => ['required', 'captcha']
    ];
}

// atau jika kalian tidak menggunakan form request 
// dan langsung melakukan validasi di controller 
// menggunakan Validator class, bisa lihat kode di bawah ini

$validate = Validator::make(Input::all(), [
    ...
     // kode di bawah ini yang kalian tambahkan
    'g-recaptcha-response' => 'required|captcha'
]);

Jika kalian sudah menerapkan hal diatas, maka implementasi reCAPTCHA harusnya sudah jalan dan pada kasusku, jika user tidak centang kolom “I’m not a robot” saat melakukan submit credential mereka, maka akan menampilkan error message seperti ini.

Tampilan User Tidak Centang Kolom “I’m not a robot” Saat Melakukan Submit Credential

Mantap, reCAPTCHA-nya sudah jalan gais. Sekarang tinggal kita modif sedikit untuk error message reCAPTCHA-nya biar lebih proper. Caranya gampang banget apalagi jika kalian sudah menerapkan form request.

Bagi kalian yang belum baca blog sebelumnya tentang form request, kalian bisa cek di bawah ini ya hehe

Membuat Validasi Server Side Form Request di Laravel dengan Laravel Form Request

Kalian tinggal tambahkan kode di bawah ini di file form request kalian.

public function messages()
{
    $messages = [
        ...
        //messagenya bebas sesuai keperluan kalian
        'g-recaptcha-response.required' => 'Please verify that you are not a robot.',
        'g-recaptcha-response.captcha' => 'Captcha error! try again later or contact site admin.',
    ];

    return $messages;
}

Jika sudah di modif, maka tampilan error message-nya akan menjadi seperti di bawah ini.

Tampilan Error Message Setelah di Modifikasi

Oke gais, sekian dulu untuk pembahasan implementasi reCAPTCHA pada Laravel dengan package anhskohbo/no-captcha. Terimakasih sudah membaca dan semoga bermanfaat!

Reference:
[1] https://github.com/anhskohbo/no-captcha
[2] https://www.sahretech.com/2021/04/cara-menggunakan-google-captcha-pada.html