Cara Menambahkan Google reCAPTCHA di Laravel

Melanjutkan panduan sebelumnya tentang cara mengaktifkan 2FA di Laravel, kali ini kami akan membahas tips penting untuk melindungi form login website Anda dari serangan brute force yang dilakukan oleh bot otomatis. Caranya adalah dengan menambahkan Google reCAPTCHA di Laravel.

Seperti yang sudah banyak diketahui, reCAPTCHA merupakan salah satu solusi efektif untuk mencegah aktivitas mencurigakan dari bot, sekaligus menjaga keamanan data pengguna.

Agar implementasinya berjalan lancar, mari ikuti langkah-langkah pada artikel ini secara berurutan sampai selesai.

Apa itu Google reCAPTCHA?

Google reCAPTCHA adalah layanan gratis dari Google yang berfungsi untuk melindungi situs web dari SPAM, serangan brute force, dan penyalahgunaan yang dilakukan oleh bot. Fitur ini bekerja dengan cara membedakan apakah pengakses situs adalah manusia atau mesin, sehingga formulir seperti login, registrasi, maupun komentar tetap aman dari aktivitas mencurigakan.

Selain melindungi dari SPAM, reCAPTCHA juga membantu mengurangi beban server akibat permintaan palsu yang dilakukan bot. Ada beberapa versi reCAPTCHA yang bisa digunakan, misalnya:

• reCAPTCHA v2 (klik “Saya bukan robot”)
• reCAPTCHA v3 (berjalan di background tanpa interaksi pengguna).

Menariknya, layanan seperti ini juga disediakan oleh Cloudflare melalui fitur Turnstile. Jika Anda ingin mempelajari opsi ini, kami juga punya panduan terkait di artikel: Cara Menambahkan reCAPTCHA di Contact Form CodeIgniter 4.

Persiapan Sebelum Integrasi reCAPTCHA di Laravel

Sebelum mulai menambahkan Google reCAPTCHA di Laravel, ada beberapa hal yang perlu Anda siapkan agar proses integrasi berjalan lancar. Pertama, pastikan framework Laravel sudah terinstal dan berjalan normal di server atau localhost Anda. Lalu, Anda juga memiliki akun Gmail untuk men-generate Google reCAPTCHA.

Selain itu, pastikan juga Anda sudah memiliki akses ke file konfigurasi Laravel seperti .env untuk menyimpan API key secara aman, serta editor kode untuk melakukan penyesuaian pada form login.

Cara Menambahkan Google recapctha

Pada panduan ini kami akan berikan langkah-langkah mudahnya, sehingga pastikan laravel yang Anda miliki tidak terdapat kendala sebelumnya.

Step 1. Edit form Login

Silahkan Edit form login laravel Anda, umumnya adalah resources/views/auth/login.blade.php

Tambahkan script dibawah (diatas tombol Forgot your password):

<div class="mt-4 w-full">
    <div class="flex justify-center">
        <div class="g-recaptcha" data-sitekey="{{ env('RECAPTCHA_SITE_KEY') }}"></div>
    </div>

    @error('g-recaptcha-response')
        <div class="mt-2 text-sm text-red-600 dark:text-red-400 text-center">
            {{ $message }}
        </div>
    @enderror
</div>

Pada bagian data-sitekey=”{{ env(‘RECAPTCHA_SITE_KEY’), Anda tidak perlu menambahkan site-key karena akan menggunakan milik file .ENV.

Kemudian tambahkan script berikut, tepat diatas “x-guest-layout“

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Step 2. Edit Config Laravel dan .ENV

Langkah berikutnya dengan mengedit script /config/services.php dan tambahkan config dibawah:

'recaptcha' => [
    'key' => env('RECAPTCHA_SITE_KEY'),
    'secret' => env('RECAPTCHA_SECRET_KEY'),
],

Sama seperti sebelumnya, bagian ini Anda tidak perlu mengisi site-key dan secret-key. Selanjutnya, tambahkan config dibawah pada file .ENV dengan format berikut:

RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY
RECAPTCHA_SECRET_KEY=RECAPTCHA_SECRET_KEY

Sesuaikan site-key dan secret-key yang Anda peroleh saat membuat Google reCAPTCHA. Anda dapat mengikuti panduan berikut untuk membuat site-key dan secret-key: create recaptcha.

Step 3. Perbarui Controller Auth Laravel

Ini merupakan langkah terakhir, yaitu memperbarui script controller /app/Http/Controllers/Auth/AuthenticatedSessionController.php

Pada header script AuthenticatedSessionController, silahkan tambahkan: use Illuminate\Support\Facades\Http;

Kemudian, pada body script – tepat dibawah public function store(): RedirectResponse

   $response = Http::asForm()->post('https://www.google.com/recaptcha/api/siteverify', [
        'secret' => env('RECAPTCHA_SECRET_KEY'),
        'response' => $request->input('g-recaptcha-response'),
        'remoteip' => $request->ip(),
    ]);
  
    if (!($response->json()['success'] ?? false)) {
        return back()->withErrors([
            'g-recaptcha-response' => 'Verifikasi reCAPTCHA gagal. Coba lagi.'
        ])->withInput();
    }

Bagian ‘secret’ => env(‘RECAPTCHA_SECRET_KEY’), Anda tidak perlu mengisi secret key karena fungsi tersebut akan menggunakan milik file .ENV yang telah ditambahkan sebelumnya pada step 2.

Setelah ketiga langkah singkat diatas Anda lakukan semua, silahkan jalankan perintah dibawah lalu testing akses halaman form loginnya:

php artisan config:clear
php artisan cache:clear

Jika berhasil, maka akan tampil sebuah widget milik Google reCAPTCHA seperti gambar dibawah:

Selain form login, Anda juga dapat menambahkan widget reCAPTCHA tersebut di form pendaftaran atau form kontak dengan mengambil script yang ada di langkah step 1.

Penutup

Menambahkan Google reCAPTCHA di Laravel merupakan langkah penting untuk meningkatkan keamanan website, terutama pada form login yang sering menjadi target serangan bot dan brute force. Dengan reCAPTCHA, Anda bisa memastikan hanya pengguna asli yang dapat mengakses sistem, sehingga kepercayaan dan kenyamanan pengunjung tetap terjaga.

Jika Anda ingin website Laravel berjalan lebih optimal, pastikan juga menggunakan layanan hosting terbaik dari Rumahweb Indonesia. Dengan Litespeed web server, Monarx Security, dan dukungan teknis 24 jam, aplikasi Laravel Anda tidak hanya lancar tapi juga lebih aman.

Itu dia panduan kami tentang cara menambahkan Google reCAPTCHA di Laravel dengan mudah pada form login. Semoga bermanfaat.