{"id":51764,"date":"2024-12-12T16:18:15","date_gmt":"2024-12-12T09:18:15","guid":{"rendered":"https:\/\/www.rumahweb.com\/journal\/?p=51764"},"modified":"2024-12-12T16:18:17","modified_gmt":"2024-12-12T09:18:17","slug":"cara-menambahkan-recaptcha-di-codeigniter-4","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/cara-menambahkan-recaptcha-di-codeigniter-4\/","title":{"rendered":"Cara Menambahkan reCaptcha di Contact Form CodeIgniter 4"},"content":{"rendered":"\n

Pada panduan sebelumnya, kita telah mempelajari cara membuat contact form<\/a> di CodeIgniter 4. Dalam artikel ini, kita akan melanjutkan langkah tersebut dengan menambahkan reCaptcha di contact form CodeIgniter 4. <\/p>\n\n\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Apa itu Cloudflare Turnstile?<\/h2>\n\n\n\n

Cloudflare Turnstile adalah tool untuk memvalidasi pengunjung yang akan mengakses situs Anda, dengan menentukan apakah pengunjung tersebut adalah manusia atau robot melalui challenge<\/em>.<\/p>\n\n\n\n

Untuk menggunakan Cloudflare Turnstile, Anda perlu membuat sitekey <\/em>dan secret key<\/em> yang kemudian akan diintegrasikan dengan aplikasi web Anda.<\/p>\n\n\n\n

Generate Key Cloudflare Turnstile<\/h2>\n\n\n\n

Pastikan Anda memiliki akun Cloudflare, jika belum maka silahkan daftar terlebih dulu. Kemudian ikuti langkah-langkahnya dibawah:<\/p>\n\n\n\n

    \n
  1. Login akun Cloudflare<\/a> Anda.<\/li>\n\n\n\n
  2. Masuk ke menu Turnstile<\/strong>.<\/li>\n\n\n\n
  3. Klik Add Widget<\/strong>, selanjutnya masukan nama dan klik Add Hostnames<\/strong>.<\/li>\n\n\n\n
  4. Centang nama domain yang telah terdaftar di Cloudflare dan klik Add<\/strong>, kemudian klik Add <\/strong>kembali di menu Add Hostnames<\/strong>.<\/li>\n<\/ol>\n\n\n
    \n
    \"Generate<\/a><\/figure>\n<\/div>\n\n\n

    Dalam menu Turnstile, Anda bisa melanjutkan penyetingan dan menentukan mode widget <\/em>dalam melakukan challenge<\/em>.<\/p>\n\n\n\n

    Jika semua persiapan sudah ditentukan, silahkan klik tombol Create agar sitekey<\/span> dan secret key<\/span> muncul.<\/p>\n\n\n

    \n
    \"menentukan<\/a><\/figure>\n<\/div>\n\n\n

    Menambahkan reCaptcha di Contact Form CodeIgniter<\/h2>\n\n\n\n

    Untuk menambahkan Cloudflare Turnstile pada kode yang sudah ada disini<\/a>, kami akan memberikan bagian yang penting di bawah ini.<\/p>\n\n\n\n

    Step 1. Edit Controller Contact<\/h3>\n\n\n\n

    Edit file Contact.php<\/strong> yang berada dalam folder Controllers <\/strong>dan ubah menjadi script <\/em>berikut:<\/p>\n\n\n\n

    class Contact extends Controller\n{ \n    public function index()\n    {\n        \/\/ site key - Cloudflare Turnstile \n        $data['site_key'] = 'xxxxxxxxxxxx'; \n        return view('contact_form', $data);\n    }\n\n    public function send()\n    {\n        \/\/ secret key - Cloudflare Turnstile \n        $secret_key = 'xxxxxxxxxxxxx'; \n\n        \/\/ Respon validasi Turnstile\n        $response = $this->request->getPost('cf-turnstile-response');\n        $verification = $this->verify_turnstile($secret_key, $response);\n\n        if (!$verification->success) {\n            \/\/ Jika gagal verifikasi, tampil error\n            return redirect()->to('\/contact')->with('error', 'Turnstile verification failed.');\n        }\n\n        $email = \\Config\\Services::email();\n...<\/code><\/pre>\n\n\n\n
    Masih di file yang sama, tambahkan function private <\/em>berikut:<\/p>\n\n\n\n
    ...\n    private function verify_turnstile($secret_key, $response)\n    {\n        $url = 'https:\/\/challenges.cloudflare.com\/turnstile\/v0\/siteverify';\n\n        $data = [\n            'secret' => $secret_key,\n            'response' => $response,\n        ];\n\n        $ch = curl_init($url);\n        curl_setopt($ch, CURLOPT_POST, true);\n        curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($data));\n        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);\n\n        $result = curl_exec($ch);\n        curl_close($ch);\n\n        return json_decode($result);\n    }\n}<\/code><\/pre>\n\n\n\n
    Full script bisa Anda klik disini<\/a>.<\/p>\n\n\n\n
    Step 2. Edit View Contact<\/h3>\n\n\n\n
    Pada bagian ini, Anda perlu menambahkan widget <\/em>Cloudflare Turnstile. Silahkan edit file contact_form.php<\/strong> yang ada di folder Views<\/strong> dan tambahkan script widget dibawah:<\/p>\n\n\n\n
            <!-- Turnstile widget -->\n        <div class=\"cf-turnstile\" data-sitekey=\"<?= $site_key ?>\"><\/div><\/strong><\/code><\/pre>\n\n\n\n
    Hasilnya seperti form dibawah:<\/p>\n\n\n\n
        <form action=\"<?= base_url('contact') ?>\" method=\"post\">\n        <label for=\"name\">Name:<\/label>\n        <input type=\"text\" id=\"name\" name=\"name\" required>\n        <br>\n\n        <label for=\"email\">Email:<\/label>\n        <input type=\"email\" id=\"email\" name=\"email\" required>\n        <br>\n\n        <label for=\"telp\">Phone:<\/label>\n        <input type=\"text\" id=\"telp\" name=\"telp\" required>\n        <br>\n\n        <label for=\"message\">Message:<\/label>\n        <textarea id=\"message\" name=\"message\" required><\/textarea>\n        <br>\n\n        <!-- Turnstile widget -->\n        <div class=\"cf-turnstile\" data-sitekey=\"<?= $site_key ?>\"><\/div><\/strong>\n        <br>\n\n        <button type=\"submit\">Send<\/button>\n    <\/form><\/code><\/pre>\n\n\n\n
    Jika semua step sudah dilakukan dengan benar, Anda akan menemukan widget capcha <\/em>milik Cloudflare seperti gambar dibawah.<\/p>\n\n\n
    \n
    \"menambahkan<\/a><\/figure>\n<\/div>\n\n\n
    Agar dapat digunakan dengan baik, pastikan Anda sudah menggunakan site <\/em>dan secret key <\/em>sesuai nama domainnya.<\/p>\n\n\n\n
    Demikian panduan kami tentang cara menambahkan reCaptcha di form contact CodeIgniter 4, semoga bermanfaat!<\/p>\n","protected":false},"excerpt":{"rendered":"
    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. 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 […]<\/p>\n","protected":false},"author":338,"featured_media":52147,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[543,726,564],"class_list":{"0":"post-51764","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-web-programming","8":"tag-codeigniter","9":"tag-contact-form","10":"tag-recaptcha"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/51764","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/users\/338"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/comments?post=51764"}],"version-history":[{"count":0,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/51764\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media\/52147"}],"wp:attachment":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media?parent=51764"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/categories?post=51764"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/tags?post=51764"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}