Cara Menambahkan reCaptcha di Contact Form CodeIgniter 4

Pada panduan sebelumnya, kita telah mempelajari cara membuat contact form di CodeIgniter 4. Dalam artikel ini, kita akan melanjutkan langkah tersebut dengan menambahkan reCaptcha di contact form CodeIgniter 4.

Daftar Isi hide

1 Apa itu Cloudflare Turnstile?

2 Generate Key Cloudflare Turnstile

3 Menambahkan reCaptcha di Contact Form CodeIgniter

3.1 Step 1. Edit Controller Contact

3.2 Step 2. Edit View Contact

Pada panduan sebelumnya, kita hanya mempelajari cara membuat formulir kontak sederhana. Namun, tanpa perlindungan tambahan, kotak masuk email Anda rentan terhadap serangan SPAM. Untuk mengatasinya, Anda dapat menggunakan reCaptcha sebagai solusi efektif.

Dalam panduan ini, kita akan mempelajari cara menambahkan reCaptcha di contact form CodeIgniter 4 dengan menggunakan Cloudflare Turnstile. Pastikan Anda mengikuti panduan ini hingga selesai, agar reCaptcha dapat berfungsi dengan optimal.

Apa itu Cloudflare Turnstile?

Cloudflare Turnstile adalah tool untuk memvalidasi pengunjung yang akan mengakses situs Anda, dengan menentukan apakah pengunjung tersebut adalah manusia atau robot melalui challenge.

Untuk menggunakan Cloudflare Turnstile, Anda perlu membuat sitekey dan secret key yang kemudian akan diintegrasikan dengan aplikasi web Anda.

Generate Key Cloudflare Turnstile

Pastikan Anda memiliki akun Cloudflare, jika belum maka silahkan daftar terlebih dulu. Kemudian ikuti langkah-langkahnya dibawah:

Login akun Cloudflare Anda.
Masuk ke menu Turnstile.
Klik Add Widget, selanjutnya masukan nama dan klik Add Hostnames.
Centang nama domain yang telah terdaftar di Cloudflare dan klik Add, kemudian klik Add kembali di menu Add Hostnames.

Dalam menu Turnstile, Anda bisa melanjutkan penyetingan dan menentukan mode widget dalam melakukan challenge.

Jika semua persiapan sudah ditentukan, silahkan klik tombol Create agar sitekey dan secret key muncul.

Menambahkan reCaptcha di Contact Form CodeIgniter

Untuk menambahkan Cloudflare Turnstile pada kode yang sudah ada disini, kami akan memberikan bagian yang penting di bawah ini.

Step 1. Edit Controller Contact

Edit file Contact.php yang berada dalam folder Controllers dan ubah menjadi script berikut:

class Contact extends Controller
{ 
    public function index()
    {
        // site key - Cloudflare Turnstile 
        $data['site_key'] = 'xxxxxxxxxxxx'; 
        return view('contact_form', $data);
    }

    public function send()
    {
        // secret key - Cloudflare Turnstile 
        $secret_key = 'xxxxxxxxxxxxx'; 

        // Respon validasi Turnstile
        $response = $this->request->getPost('cf-turnstile-response');
        $verification = $this->verify_turnstile($secret_key, $response);

        if (!$verification->success) {
            // Jika gagal verifikasi, tampil error
            return redirect()->to('/contact')->with('error', 'Turnstile verification failed.');
        }

        $email = \Config\Services::email();
...

Masih di file yang sama, tambahkan function private berikut:

...
    private function verify_turnstile($secret_key, $response)
    {
        $url = 'https://challenges.cloudflare.com/turnstile/v0/siteverify';

        $data = [
            'secret' => $secret_key,
            'response' => $response,
        ];

        $ch = curl_init($url);
        curl_setopt($ch, CURLOPT_POST, true);
        curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($data));
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

        $result = curl_exec($ch);
        curl_close($ch);

        return json_decode($result);
    }
}

Full script bisa Anda klik disini.

Step 2. Edit View Contact

Pada bagian ini, Anda perlu menambahkan widget Cloudflare Turnstile. Silahkan edit file contact_form.php yang ada di folder Views dan tambahkan script widget dibawah:

        <!-- Turnstile widget -->
        <div class="cf-turnstile" data-sitekey="<?= $site_key ?>"></div>

Hasilnya seperti form dibawah:

    <form action="<?= base_url('contact') ?>" method="post">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
        <br>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <br>

        <label for="telp">Phone:</label>
        <input type="text" id="telp" name="telp" required>
        <br>

        <label for="message">Message:</label>
        <textarea id="message" name="message" required></textarea>
        <br>

        <!-- Turnstile widget -->
        <div class="cf-turnstile" data-sitekey="<?= $site_key ?>"></div>
        <br>

        <button type="submit">Send</button>
    </form>

Jika semua step sudah dilakukan dengan benar, Anda akan menemukan widget capcha milik Cloudflare seperti gambar dibawah.