Cara Pasang Google reCAPTCHA di Laravel (Step-by-step)

Saat membangun sebuah aplikasi web, salah satu tantangan terbesar yang seringkali membuat kita mengelus dada adalah serangan spam bot. Bayangkan, Kamu baru saja meluncurkan fitur formulir kontak atau registrasi, namun keesokan harinya kotak masuk email kamu sudah penuh dengan ribuan pesan sampah (spam) yang dikirimkan secara otomatis oleh bot. Tidak hanya mengganggu, tumpukan data sampah ini bisa membebani database dan menurunkan performa server kamu.

Untungnya, teknologi punya solusinya. Google reCAPTCHA hadir sebagai “satpam” digital yang bertugas membedakan mana pengunjung manusia asli dan mana program komputer jahat. Bagi kamu pengguna framework Laravel, mengintegrasikan fitur ini sebenarnya cukup mudah jika kita tahu langkah-langkah yang tepat.

Dalam panduan kali ini, saya akan membimbing kamu langkah demi langkah untuk memasang Google reCAPTCHA di Laravel. Mari kita buat website kamu menjadi benteng yang kokoh namun tetap ramah bagi pengguna asli!

Persiapan

Sebelum kita masuk ke pengkodean atau coding, ada beberapa hal yang perlu Sahabat Qwords siapkan terlebih dahulu agar proses instalasi berjalan lancar tanpa kendala:

1. Project Laravel: Pastikan kamu sudah memiliki proyek Laravel yang berjalan (versi 8, 9, atau 10/11 tetap relevan dengan metode ini).
2. Akun Google: Digunakan untuk mengakses panel admin reCAPTCHA.
3. Akses Terminal/CMD: Untuk menjalankan perintah Composer.
4. Akses File Editor: Seperti VS Code untuk mengedit file .env, view, dan controller.

Jika semua sudah siap, mari kita mulai langkah pertamanya!

Langkah 1: Mendapatkan API Key dari Google

Langkah pertama tetap sama, kita butuh “kunci akses” resmi dari Google.

1. Buka Google reCAPTCHA Admin Console.
2. Daftarkan situs Anda. Pilih tipe reCAPTCHA v2 (“I’m not a robot” Checkbox).
3. Masukkan domain Anda (masukkan localhost jika masih dalam tahap pengembangan).
4. Setelah klik Submit, Anda akan mendapatkan Site Key dan Secret Key.

Buka file .env di proyek Laravel Anda dan tambahkan kedua kunci tersebut di bagian paling bawah:

RECAPTCHA_SITE_KEY=isi_dengan_site_key_milikmu
RECAPTCHA_SECRET_KEY=isi_dengan_secret_key_milikmu

Catatan Penting Sahabat Qwords: Secret Key adalah rahasia dapur Anda. Jangan pernah mengeksposnya di file JavaScript atau membagikannya ke publik.

Langkah 2: Menampilkan Editor di Blade (Tampilan)

Tanpa library, kita akan memanggil skrip JavaScript Google secara manual. Kelebihannya, Anda bisa menentukan kapan skrip ini dimuat agar tidak memperlambat loading halaman secara keseluruhan.

Buka file Blade Anda (misalnya contact.blade.php), lalu sesuaikan formulir Anda seperti ini:

<form action="/contact" method="POST">
    @csrf

    <div class="mb-3">
        <label>Email</label>
        <input type="email" name="email" class="form-control" required>
    </div>

    <div class="mb-3">
        <div class="g-recaptcha" data-sitekey="{{ env('RECAPTCHA_SITE_KEY') }}"></div>
        
        @error('g-recaptcha-response')
            <small class="text-danger">{{ $message }}</small>
        @enderror
    </div>

    <button type="submit" class="btn btn-primary">Kirim Pesan</button>

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

Langkah 3: Validasi di Controller (Back-End)

Inilah bagian inti dari metode tanpa library. Saat pengguna mencentang captcha dan mengklik tombol submit, Google akan mengirimkan sebuah token panjang bernama g-recaptcha-response.

Tugas kita di Controller adalah mengirimkan token tersebut kembali ke Google untuk ditanyakan: “Apakah token ini valid dan benar-benar dari manusia?”

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Http; // Penting untuk HTTP Request

class ContactController extends Controller
{
    public function store(Request $request)
    {
        // 1. Validasi awal untuk memastikan token captcha ada
        $request->validate([
            'email' => 'required|email',
            'g-recaptcha-response' => 'required',
        ], [
            'g-recaptcha-response.required' => 'Mohon centang verifikasi Captcha.'
        ]);

        // 2. Kirim permintaan verifikasi ke API Google menggunakan Http Client Laravel
        $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(),
        ]);

        $responseData = $response->json();

        // 3. Cek hasil respon dari Google
        if ($response->successful() && $responseData['success']) {
            // JIKA BERHASIL: Lanjutkan proses simpan data atau kirim email
            return back()->with('success', 'Verifikasi berhasil! Pesan Anda telah terkirim.');
        }

        // JIKA GAGAL: Kembalikan pengguna dengan pesan error
        return back()
            ->withErrors(['g-recaptcha-response' => 'Verifikasi Captcha gagal, silakan coba lagi.'])
            ->withInput();
    }
}

Langkah 4: Testing

Pastikan Anda mencoba beberapa skenario:

1. Skenario Normal: Isi form dan centang captcha. Pesan harus terkirim.
2. Skenario Lupa: Jangan centang captcha. Sistem harus menolak dan menampilkan pesan error.
3. Skenario Timeout: Biarkan halaman terbuka lama tanpa submit, lalu coba submit. Biasanya token captcha akan kedaluwarsa dan sistem harus meminta verifikasi ulang.

Penutup

Selamat! Sahabat Qwords baru saja berhasil memasang Google reCAPTCHA di Laravel secara manual. Dengan metode ini, Anda telah menghemat beban aplikasi dari penggunaan library pihak ketiga yang mungkin tidak Anda butuhkan seluruh fiturnya.

Kesimpulannya, integrasi manual memberikan Anda tiga keuntungan utama:

• Efisiensi: Aplikasi lebih ringan.
• Kontrol: Anda bisa menyesuaikan pesan error dan logika verifikasi dengan bebas.
• Keamanan: Mengurangi risiko celah keamanan dari dependensi luar.

Membangun website yang aman adalah langkah awal untuk menjadi pengembang profesional. Agar performa website Laravel Anda semakin melesat dan selalu aman. Gunakan Cloud Server Qwords dengan Performa High-End untuk hosting Laravel kamu. Nikmati infrastruktur yang dioptimalkan khusus untuk framework modern, sehingga proses deploy lebih cepat dan aplikasi tetap responsif meskipun trafik sedang tinggi!