Header Ads

  • Cara Pasang Google reCaptcha Di Blog Beserta Contoh Penerapannya

    Cara Pasang Google reCaptcha Di Blog Beserta Contoh Penerapannya


    Jika pada suatu ketika kamu memiliki link download yang hanya memperbolehkan pengunjung manusia untuk meng-klik link download tersebut atau halaman website blog khusus dimana hanya pengunjung manusia yang diperbolehkan untuk bisa melihat dan berinteraksi pada halaman tersebut, maka kamu memerlukan suatu cara untuk bisa membedakan antara pengunjung manusia dengan pengunjung bot. Cara paling mudah, efektif dan efisien serta gratis adalah dengan sistem captcha.

    Pengunjung internet pada sebuah website atau blog terdiri dari 2 tipe yaitu pengunjung manusia sesungguhnya dan pengunjung robot (bot). Sekilas jika dilihat melalui alat analitis tidak akan terlihat berbeda baik untuk pengunjung manusia ataupun untuk pengunjung robot. Disinilah peranan captcha untuk bisa membedakan hal tersebut.

    Sistem captcha bukanlah pengganti peranan username dan password namun lebih mengarah kepada pengamanan tambahan pada layer pertama dalam melakukan pencegahan awal terhadap pembatasan sumber daya agar performa website atau blog bisa tepat sasaran dan efisien.

    DAFTAR ISI
    1. Penjelasan Captcha
      1. 1 Kenapa Harus Ada Captcha ?
      2. 2 Bagaimana Cara Kerja Captcha ?
      3. 3 Apa Itu Robot (BOT) Perangkat Lunak ?
      4. 4 Apa Manfaat Penggunaan Captcha ?
      5. 5 Informasi Singkat !
      6. 6 Rekomendasi Kode Captcha untuk Website dan Blog
    2. Google reCaptcha
      1. 1 Apa Itu Google re-Captcha ?
      2. 2 Keuntungan Penggunaan Google reCaptcha
      3. 3 Memilih Jenis Captcha yang Tepat
        1. 3.1 Google reCAPTCHA v2
        2. 3.2 Google reCAPTCHA v3
      4. 4 Cara Mendaftar Google reCaptcha
    3. Cara Menggunakan Google reCaptcha
      1. 1 Pemasangan Kode Google reCaptcha
      2. 2 Kode HTML Untuk Menjalankan Google reCaptcha
      3. 3 Contoh Penggunaan API Google reCaptcha

    #1 Penjelasan Captcha

    Nama captcha sudah umum dikenal oleh masyarakat. Namun tahukah Anda bahwa captcha sendiri merupakan sebuah singkatan?

    Captcha (diucapkan: cap-ch-uh) jika diartikan dalam bahasa inggris adalah kependekan dari kata Completely Automated Public Turing test to tell Computers and Humans Apart. Dalam bahasa Indonesia, nama akronim kata tersebut dapat diterjemahkan sebagai : Uji Turing Publik Terotomatisasi Penuh untuk Membedakan Komputer dan Manusia. Sistem captcha berupa pengujian dalam bentuk kode pragmatis yang disebut dengan kode captcha.

    Kode captcha adalah suatu alat yang digunakan untuk memastikan bahwa pengunjung suatu halaman website atau blog memang merupakan pengunjung manusia asli, bukan sistem komputer dalam bentuk robot aplikasi atau bot software. Kode Captcha merupakan metode turing test yang diciptakan oleh ilmuwan bernama Alan Turing di tahun 1950 silam. Hingga dewasa ini, sistem kode turing masih bisa diaplikasikan sebagai sistem proteksi di internet.

    1.1 Kenapa Harus Ada Captcha ?

    Sebelum adanya kode captcha, ada banyak software SPAM dan virus malware yang beroperasi. Hal ini memungkinkan terjadinya pendaftaran akun berulang pada sebuah website. Dengan begini, potensi pencurian data dan penyalahgunaan sumber daya website (bandwidth internet dan disk space) semakin meningkat. Oleh sebab itu, banyak developer website atau pemilik blog menerapkan kode captcha untuk mencegah terjadinya hal-hal yang bisa merugikan operasional website atau blog.

    Pemilik website atau blog biasanya menggunakan kode captcha untuk memblokir pengunjung berupa bot yang berbahaya seperti bot jingling, bot DDos, bot SPAM, bot register user dan bot berbahaya lainnya. Aktivitas bot ini bisa merugikan sumber daya website atau blog dan besar kemungkinan akan berdampak kepeda kerugian finansial dalam pengoperasian website atau blog tersebut.

    Walaupun dari sisi developer website atau pemilik blog penggunaan kode captcha merupakan salah satu solusi yang efektif, namun di sisi lain dengan adanya kode captcha sering membuat pengguna umum merasa kesal karena merasa dihalangi untuk mencapai halaman utama. Kadangkala, pengguna bisa membatalkan niatnya untuk mendaftar (sign-up) akun hanya karena merasa malas untuk mengisi input kode captcha.

    Alasan lainnya adalah untuk meningkatkan pendapatan yang bisa diperoleh oleh pemilik website atau blog. Biasanya kode captcha dipadukan dengan penggunaan pengalihan URL Link, halaman safelink, download link with timer dan penggunaan lainnya yang membutuhkan otorisasi kode captcha.

    1.2 Bagaimana Cara Kerja Captcha ?

    Sekarang ini kode captcha memiliki banyak ragam dan bentuk, kode captcha yang paling sering digunakan adalah serangkaian kode angka dan huruf dalam susunan kacau atau gambar dengan beberapa huruf terdistorsi. Nantinya, kamu akan diminta untuk memasukan kode tersebut ke dalam kotak input yang telah disediakan.

    Bentuk lain dari kode captcha adalah penggunaan dalam bentuk gambar-gambar acak dalam 9 kotak kecil. Selanjutnya, kamu akan diberikan instruksi untuk mengklik dan memilih gambar-gambar yang ditentukan.

    Pengisian input kode captcha merupakan hal yang mudah bagi manusia normal namun akan sangat sulit bagi perangkat lunak (bot) untuk bisa melewati validasi tersebut.

    Sebenarnya mengisi input kode captcha tergolong mudah bagi manusia normal, namun beda halnya untuk sistem bot atau malware. Inilah mengapa penggunaan captcha dipilih sebagai salah satu perlindungan dibanyak website atau blog yang biasanya digunakan pada formulir pendaftaran, pengisian kotak komentar dan akses untuk mendownload file.

    1.3 Apa Itu Robot (BOT) Perangkat Lunak ?

    robot

    Kode captcha dipasang untuk menghalau perangkat lunak (bot) yang bisa merugikan suatu website atau blog yang kamu kelola. Robot (BOT) perangkat lunak yang dimaksud adalah perangkat lunak (software) otomatisasi yang dibuat untuk memanipulasi penggunaan internet yang bersifat merugikan web developer atau pemilik blog, seperti :

    • Software Otomatisasi Komentar SPAM
      Software atau perangkat lunak ini dibuat untuk membuat komentar SPAM secara otomatis, jadi pengguna software cukup memasukan beberapa template pesan kemudian dengan sekali klik dapat membuat komentar SPAM ke banyak website tanpa perlu bersusah payah mengunjungi website tersebut.

      Dari segi penggunaan memang software ini dapat membantu pengguna untuk melakukan komentar SPAM iklan dan pemasangan backlink SPAM, namun bagi pemilik blog hal ini akan berdampak merugikan dari sisi otoritas blog, SPAM Score domain, outbound link, bounce rate, pendapatan iklan dan kredibilitas blog.

    • Software Otomatisasi Klik Pembelian Barang
      Penggunaan software ini bertujuan untuk melakukan klik pembelian barang, biasanya software ini digunakan untuk memenangkan pembelian barang yang sedang promosi atau flash sale. Dengan menggunakan software ini tentu peluang untuk menang sangatlah besar.

      Dampak kerugian bagi pemilik website toko online yaitu sumber daya website akan sangat terkuras sehingga berakibat website tersebut akan sulit diakses pengguna lain atau yang terparah dapat menyebabkan website tersebut menjadi lumpuh dan tidak bisa diakses.

    • Software Otomatis Pengunjung Halaman Website atau Blog
      Software tipe ini sering juga disebut sebagai Bot Jingling atau Bot Auto Visitor, lebih detail dan spesifik mengenai pembahasan Bot Jingling bisa dibaca pada artikel √ Cara Melindungi Blog Dari Bahaya Auto Visitor [Jingling].

      Dampak negatif dari software ini jelas akan berimbas kepada invalid visitor yang bisa menyebabkan akun anda terkena banned oleh penyedia jasa layanan iklan seperti Google Adsense atau jasa layanan iklan lainnya yang kredible.

    • Software Serangan DDoS
      Software ini memiliki tujuan untuk melakukan serangan penolakan layanan (DDoS: Distributed Denial-of-Service) terdistribusi adalah upaya negatif untuk mengganggu lalu lintas (traffic) normal dari server, layanan, atau jaringan yang ditargetkan dengan membanjiri (flood) target atau infrastruktur jaringan sekitarnya dengan membuat server kewalahan dalam melakukan service internet.

      Serangan DDoS mencapai efektivitas dengan memanfaatkan beberapa sistem komputer yang disusupi sebagai sumber lalu lintas serangan. Mesin yang dieksploitasi dapat mencakup komputer dan sumber daya jaringan lainnya seperti perangkat IoT (Internet of Things).

      Dari penggunaan level atas, serangan DDoS seperti kemacetan lalu lintas jalan raya yang tak terduga yang bisa menyumbat jalur jalan raya yang dapat menyebabkan kemacetan dan mengganggu kelancaran lalu lintas reguler. Hal ini pun yang terjadi pada lalu lintas data internet, apabila terjadi lalu lintas data yang tinggi tanpa dibarengi dengan kemampuan server atau perlindungan dari serangan server sudah dipastikan website yang kamu kelola akan lumpuh dan sulit diakses.

    • Software Serangan Brute Force
      Software ini bertujuan untuk membobol password akun pengguna dengan cara melakukan analisa password yang dipaksakan (brute force). Apabila sebuah website tidak memiliki pengamanan seperti penggunaan kode captcha terhadap user login sudah dipastikan password akun pengguna akan mudah dibobol dalam waktu yang singkat.

    1.4 Apa Manfaat Penggunaan Captcha ?

    1. Melindungi Web dari Search Engine Bot
      Fungsi captcha pertama adalah melindungi web dengan mencegah masuknya search engine bot. Ada kalanya seorang pemilik website tidak ingin websitenya ditemukan, dibaca, apalagi disusupi oleh pihak asing seperti bot. Sistem captcha akan memproteksi website Anda dari ketiga kemungkinan tersebut. Search engine bot sendiri biasanya dimiliki oleh perusahaan besar untuk melacak kinerja dari website-website lain.

    2. Mencegah Komentar Spam
      Kegunaan captcha kedua adalah untuk mencegah spam berupa komentar palsu di website atau blog. Komentar-komentar palsu ini umumnya dilakukan oleh bot atau program untuk menaikkan peringkat pencarian blog atau website di search engine. Hanya saja spam komentar ini dirasa cukup mengganggu. Jika web atau blog diproteksi oleh captcha, maka hanya user manusia saja yang bisa memberikan komentar.

    3. Memproteksi Email dari Scrapper
      Captcha juga bisa digunakan untuk melindungi e-mail Anda dari scrapper atau spammer. Kode captcha akan “menyembunyikan” email Anda dari software spamming sehingga tidak dapat diakses. Alamat email baru akan terbuka jika Anda bisa memasukkan kode captcha dengan tepat.

    4. Mencegah Serangan Kamus
      Sistem password atau sandi website Anda juga rentan terkena bahaya atau serangan. Serangan tersebut dikenal dengan nama serangan kamus. Dengan memasang kode captcha, website Anda akan memiliki perlindungan dobel dimana user harus memasukkan password plus menginput captcha yang diberikan.

    Informasi Singkat
    CAPTCHA (/ kæp.tʃə/, akronim yang dibuat untuk "Tes Turing Publik Otomatis Sepenuhnya untuk Membedakan Komputer dan Manusia") adalah jenis tes tantangan-tanggapan yang digunakan dalam komputasi untuk menentukan apakah pengguna adalah manusia.

    Istilah ini diciptakan pada tahun 2003 oleh Luis von Ahn, Manuel Blum, Nicholas J. Hopper, dan John Langford. Jenis CAPTCHA yang paling umum (ditampilkan sebagai Versi 1.0) pertama kali ditemukan pada tahun 1997 oleh dua kelompok yang bekerja secara paralel. Bentuk CAPTCHA ini mengharuskan seseorang untuk mengevaluasi dengan benar dan memasukkan urutan huruf atau angka yang terlihat dalam gambar terdistorsi yang ditampilkan di layar mereka. Karena tes dilakukan oleh komputer, berbeda dengan tes Turing standar yang dilakukan oleh manusia, CAPTCHA terkadang digambarkan sebagai tes Turing terbalik.

    Prosedur identifikasi pengguna ini telah menerima banyak kritik, terutama dari penyandang cacat, tetapi juga dari orang lain yang merasa bahwa pekerjaan sehari-hari mereka diperlambat oleh kata-kata yang terdistorsi yang sulit dibaca. Dibutuhkan rata-rata orang sekitar 10 detik untuk memecahkan CAPTCHA yang khas.
    Sumber : Wikipedia



    1.6 Rekomendasi Kode Captcha untuk Website dan Blog

    Salah satu rekomendasi untuk penggunaan kode captcha yang terkenal paling sulit untuk ditembus oleh robot adalah dengan menggunakan layanan Google reCaptcha yang aman, gratis, mudah dan efisien. Oke pada artikel ini admin codeflare akan memberikan tutorial tentang memasang Google reCaptcha, cara menggunakan kode script Google reCaptcha dan Contoh penerapannya di dalam halaman blog. Bagi yang tertarik untuk memasang kode captcha, silakan disimak tutorialnya.

    #2 Google reCaptcha

    Google reCAPTCHA adalah layanan Captcha paling populer saat ini dan terbukti ampuh mencegah serangan robot di website kamu. Fitur-fitur yang ditawarkan sangat lengkap. Kamu juga diberi kebebasan untuk menentukan jenis reCAPTCHA yang ingin digunakan.

    Sebelum masuk ke pembahasan mengenai cara pemasangan kode script captcha google, kita simak sejenak info tentang Google reCaptcha yang sudah admin codeflare rangkum dari beberapa sumber di internet.

    2.1 Apa Itu Google re-Captcha ?


    Google reCAPTCHA adalah salah satu layanan Google yang membantu melindungi suatu situs website atau blog dari aktivitas SPAM dan penyalahgunaan sumberdaya yang ada pada website atau blog tersebut. Layanan ini berupa fitur kode Captcha yang merupakan tes turing sederhana agar bisa membedakan antara manusia dan bot.

    Dikutip dari support.google.com, reCAPTCHA digunakan untuk mengidentifikasi sebuah perangkat benar-benar dipakai manusia atau bot. Jika manusia yang mengoperasikan perangkat, maka akan mudah untuk mengisi kode captcha, tetapi sulit untuk "bot" dan perangkat lunak berbahaya lainnya untuk mengetahuinya.

    Google reCAPTCHA menggunakan mesin analisis risiko tingkat lanjut dan tantangan adaptif untuk mencegah perangkat lunak berbahaya terlibat dalam aktivitas penyalahgunaan di situs web Anda. Sementara itu, pengguna yang sah akan dapat masuk, melakukan pembelian, melihat halaman, atau membuat akun dan pengguna palsu akan diblokir.

    2.2 Keuntungan Penggunaan Google reCaptcha

    Terbukti Efektif
    Google reCAPTCHA telah menjadi yang terdepan dalam mitigasi bot selama lebih dari satu dekade dan secara aktif melindungi data untuk jaringan kami yang terdiri dari lima juta situs.

    Tanpa Gesekan
    Layanan deteksi penipuan tanpa batas yang menghentikan bot dan serangan otomatis lainnya sambil menyetujui pengguna yang valid.

    Adaptif
    Algoritme bot berbasis risiko reCAPTCHA menerapkan pembelajaran mesin berkelanjutan yang memperhitungkan setiap pelanggan dan interaksi bot untuk mengatasi logika heuristik biner dari teknologi deteksi bot berbasis tantangan tradisional.

    2.3 Memilih Jenis Captcha yang Tepat

    Google reCaptcha menyediakan dua jenis sistem captcha yang bisa kamu pilih dan gunakan, yaitu captcha v2 dan captcha v3. Berikut penjelasan dari masing-masing versi reCaptcha.

    Google reCAPTCHA v2

    Google reCAPTCHA v2 adalah jenis Captcha yang simpel karena hanya membutuhkan dua baris HTML untuk membuatnya. Ada tiga bentuk verifikasi reCAPTCHA v2, yaitu :

    • “I’m not a robot” Checkbox
      reCAPTCHA ini akan menampilkan checkbox "I’m not a robot" pada halaman web yang dipasang captcha. Pengunjung harus mencentang checkbox tersebut untuk memvalidasi mereka adalah manusia. Contohnya seperti ini:

      robot

    • Invisible reCAPTCHA Badge
      Sesuai namanya, reCAPTCHA yang satu ini tidak selalu tampil di halaman web yang dipasang captcha. Invisible reCAPTCHA Badge baru akan muncul jika sistem mendeteksi ada trafik website yang mencurigakan. Tampilannya seperti berikut:

      robot

    • reCAPTCHA Android
      reCAPTCHA Android Library adalah bagian dari Google Play Services SafetyNet APIs. Library ini menyediakan API Captcha Native yang bisa diterapkan pada aplikasi berbasis Android.

      Caranya dengan melakukan setting pada Google Play Services di aplikasi lalu hubungkan dengan GoogleApiClient. Baru setelahnya API reCAPTCHA Android bisa ditampilkan.

    Google reCAPTCHA v3

    Google reCAPTCHA v3 menawarkan fitur analisis perhitungan skor sebagai sistem verifikasi keamanan otomatis. reCAPTCHA v3 bekerja secara otomatis tanpa menggangu pengguna. Skor berdasarkan pada hasil interaksi pengguna yang berkunjung ke situs kamu dan memungkinkan admin situs untuk mengambil tindakan yang sesuai berdasarkan hasil analisis skor.

    reCAPTCHA v3 memberikan penilaian skor (1.0 kemungkinan besar interaksi yang baik, 0.0 kemungkinan besar bot). Berdasarkan skor yang diberikan, kamu dapat mengambil tindakan pencegahan pengamanan lebih lanjut, ambil tindakan di balik layar alih-alih memblokir lalu lintas untuk melindungi situs kamu dengan lebih baik.

    reCAPTCHA belajar dengan melihat lalu lintas nyata di situs kamu. Untuk alasan ini, skor di lingkungan pementasan atau segera setelah penerapan mungkin berbeda dari hasilnya. Karena reCAPTCHA v3 tidak pernah mengganggu alur pengguna, kamu dapat menjalankan reCAPTCHA terlebih dahulu tanpa mengambil tindakan, lalu memutuskan ambang batas dengan melihat lalu lintas kamu di konsol admin. Secara default, kamu dapat menggunakan ambang 0,5.

    robot

    Cara kerja Google reCAPTCHA v3 menggunakan JavaScript untuk menilai koneksi yang sedang berlangsung. Kemudian mengambil tindakan apakah akan menampilkan Captcha atau tidak.

    Jadi, Captcha tidak selalu muncul pada website yang dipasang reCAPTCHA v3. Jika Google mendeteksi aktivitas yang berlangsung di situs tersebut dilakukan oleh robot, maka Captcha akan tampil. Sebaliknya, jika website banyak diakses oleh manusia, Captcha tidak akan dimunculkan.

    2.4 Cara Mendaftar Google reCaptcha

    Sebelum kamu bisa menggunakan Google reCAPTCHA di website, blogspot ataupun wordPress, kamu harus membuat akunnya terlebih dahulu. Persiapkan akun Gmail dan domain website yang aktif. Berikut cara mendaftar Google reCaptcha.

    1. Login Akun Google

      Buka halaman Google atau Gmail, lalu login ke akun kamu.

      robot

    2. Buka Laman Google reCaptcha
      Kunjungi halaman Google reCAPTCHA. Kemudian klik tombol Admin Console.

      robot

    3. Daftarkan Nama Domain
      Akan muncul pilihan Register a new site untuk mendaftarkan website kamu ke Google reCaptcha. Ada beberapa form yang perlu kamu isi untuk mendapatkan Site Key dan Secret Key.

      robot

      • Label – Isi nama Captcha. Kamu bisa mengisi form Label dengan nama domain atau nama lain.
      • reCAPTCHA Type – Pilih jenis reCaptcha yang ingin kamu gunakan. Ada empat opsi reCAPTCHA yang bisa kamu pilih, yakni reCAPTCHA v3 dan tiga pilihan reCAPTCHA v2 masing-masing “I’m not a robot” Checkbox, Invisible reCaptcha Badge, dan reCAPTCHA Android.
      • Domains – Isi sesuai dengan URL website kamu.
      • Owners – Pilihan ini diatur secara default oleh Google menyesuaikan dengan akun Google dan alamat email yang kamu gunakan saat login tadi. Jika domain kamu memiliki lebih dari satu pemilik, kamu bisa mendaftarkan email lain lewat opsi Enter email addresses.
      • Terms of Service – Centang pada pilihan Accept the ReCAPTCHA Terms of Service untuk bisa menggunakan reCAPTCHA di website kamu.
      • Alerts – Centang opsi ini maka Google akan memberitahu kamu secara otomatis jika sewaktu-waktu terjadi error pada konfigurasi reCAPTCHA, atau terjadi aktivitas trafik yang mencurigakan.
      • Jika semua form sudah kamu isi, klik tombol SUBMIT.

    4. Salin Site Key dan Secret Key
      Setelah kamu melakukan submit, kamu akan mendapatkan dua kunci, yakni Site Key dan Secret Key. Kamu harus menyalin dua kunci tersebut agar bisa menggunakan Google reCAPTCHA ke dalam kode script nantinya.

      robot

    Sampai di tahap ini, kamu telah sukses mendaftarkan website kamu ke Google reCAPTCHA. Ada dua menu tambahan yang tersedia, yakni Go to Settings untuk menuju halaman pengaturan reCAPTCHA dan Go to Analytics untuk melihat statistik reCAPTCHA yang sudah terpasang di website kamu.

    #3 Cara Menggunakan Google reCaptcha

    Pemilihan penggunaan reCaptcha v2 atau reCaptcha v3 dipilih melalui opsi yang ada pada akun Google reCaptcha kamu sedangkan cara pemasangannya pada blog menggunakan metode yang sama.

    Sebagai pengguna blogger kamu cukup menggunakan Site Key kedalam script pemanggil kode Google reCaptcha yang akan dipasang ke dalam kode template blogger. Sedangkan Server-key hanya digunakan jika kamu menggunakan web server / hosting pribadi.

    Pada tutorial ini admin hanya menjelaskan cara pemasangan dan contoh penggunaan khusus untuk pengguna blogger dan website statis. Sebagai langkah awal berikut cara pemasangan kode API Google reCaptcha dan script untuk pengaturannya.

    3.1 Pemasangan Kode Google reCaptcha


    • Silakan login dahulu ke blog Anda.

    • Klik tombol Tema untuk masuk ke tema editor.


    • Klik tombol Edit Tema untuk menampilkan kode HTML Template Blog.


    • Geser scrollbar ke posisi paling bawah.


    • Letakan kode dibawah ini tepat diatas kode </Head>.


      <script src="https://www.google.com/recaptcha/api.js" async defer></script>
      <script>
      //<![CDATA[
      var recaptchaCallback = function(){
      // kode script apabila captcha telah siap
      }
      var recaptchaExpired = function(){
      // kode script apabila waktu validasi captcha telah habis
      }
      var recaptchaError = function(){
      // kode script apabila captcha gagal dimuat atau kesalahan lainnya
      }
      //]]>
      </script>

    3.2 Kode HTML Untuk Menjalankan Google reCaptcha

    Setelah memasang kode API Google reCaptcha dan script untuk pengaturannya kedalam template blog maka langkah berikutnya adalah memasang elemen HTML pada bagian halaman blog yang memerlukan otorisasi kode captcha, misalkan pada elemen link download, halaman artikel khusus, halaman contact dan lain sebagainya.

    <!-- Blok HTML Kode Captcha -->
    <div class="g-recaptcha" data-sitekey="Site-Key" data-callback="recaptchaCallback" data-expired-callback="recaptchaExpired" data-error-callback="recaptchaError"></div>
    <br>
    <!-- Blok HTML Kode Captcha -->
    Kode HTML kamu yang akan diberi proteksi taruh disini !!! Pastikan untuk diberi pengaturan awal sebelum pengguna memvalidasi kode captcha.

    KETERANGAN :

    • Pada atribut class="g-recaptcha"
      Merupakan atribut dasar untuk menentukan elemen HTML yang akan digunakan sebagai elemen kode captcha.
    • Pada atribut data-sitekey="Site-Key"
      Merupakan atribut untuk kode kunci yang sudah didapatkan dari akun Google reCaptcha kamu.
    • Pada atribut data-callback="recaptchaCallback"
      Merupakan atribut HTML yang akan digunakan untuk menjalankan fungsi script callback.
    • Pada atribut data-expired-callback="recaptchaExpired"
      Merupakan atribut HTML yang akan digunakan untuk menjalankan fungsi script captcha apabila waktu validasi telah habis.
    • Pada atribut data-error-callback="recaptchaError"
      Merupakan atribut HTML yang akan digunakan untuk menjalankan fungsi script captcha apabila terjadi error.

    3.3 Contoh Penggunaan API Google reCaptcha

    Sebagai contoh penerapan kode captcha di blog, misalkan kamu ingin membuat kode captcha untuk memvalidasi link download yang bertujuan hanya memperbolehkan pengunjung manusia yang melihat dan meng-klik link download tersebut.

    <script src="https://www.google.com/recaptcha/api.js"></script>
    <script>
    //<![CDATA[
    var recaptchaCallback = function(){
    $('#contohID').css({'background':'#0083da','color':'#fff'});
    $('#contohID').html('<i class="fa fa-check-square-o" aria-hidden="true"></i> Link Download Siap');
    $('#contohID').attr('href','https://codeflare.eu.org');
    }
    var recaptchaExpired = function(){
    $('#contohID').css({'background':'#5d6d78','color':'#000'});
    $('#contohID').html('<i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Link Download Expired');
    $('#contohID').attr('href','#');
    }
    var recaptchaError = function(){
    $('#contohID').css({'background':'#5d6d78','color':'#000'});
    $('#contohID').html('<i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Error... Coba Refresh Halaman');
    $('#contohID').attr('href','#');
    }
    //]]>
    </script>
    <center>
    <div class="g-recaptcha" data-sitekey="Masukan Site-Key Kamu" data-callback="recaptchaCallback" data-expired-callback="recaptchaExpired" data-error-callback="recaptchaError"></div>
    <br />
    <a id="contohID" href="#" style="padding:6px 12px;background:#5d6d78;color:#000;font-size:18px;border:1px solid #ccc;border-radius:5px;"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Klik Captcha Terlebih Dahulu</a>
    </center>

    Preview :


    Klik Captcha Terlebih Dahulu

    Pada contoh kode diatas, kode script Google reCaptcha bisa langsung digunakan tanpa harus ditaruh kedalam kode template blogspot. Jika hanya digunakan pada satu halaman artikel kode script Google reCaptcha bisa langsung ditaruh di dalam artikel blog. Namun apabila hendak digunakan pada artikel-artikel lainnya, akan lebih mudah dan efisien jika kode script Google reCaptcha dimasukan kedalam kode template, jadi nanti di dalam artikel cukup menggunakan kode HTML saja tanpa harus mengikutsertakan kode script lagi.

    Perhatian ! jangan lupa untuk memasukan kode Site-Key yang sudah kamu dapatkan dari akun kamu di Google reCaptcha dan pastikan untuk menggunakan huruf untuk membuat variabel fungsi dan jangan menggunakan tanda sambung ( _ ) untuk penamaan variabel, seperti : recaptcha_Callback biasanya script API Google reCaptcha akan menjadi error. Penamaan variabel yang benar dalam hal penggunaan Google reCaptcha, yaitu : recaptchaCallback.

    Demikian artikel blog tentang Cara Memasang Google reCaptcha Di Blog Beserta Contoh Penerapannya terima kasih sudah berkunjung, jangan lupa Like, Share dan Subscribe, untuk pertanyaan, kritik ataupun saran silakan ditulis pada kotak komentar di bawah. Apabila ada kata-kata yang kurang berkenan atau informasi yang kurang akurat, harap dimaklumi. Akhir kata Semoga Bermanfaat.


    Incoming Search Term


    cara membuat kode captcha google di blog, cara memasang proteksi captcha, cara menggunakan script captcha, tutorial singkat pasang captcha, cara mudah bikin captcha, contoh gampang pasang captcha, tutorial bikin captcha, penjelasan kode captcha, captcha for blogger, install captcha on blogspot, captcha code for blogspot, kode captcha di halaman blogger, widget script css html captcha, buat widget captcha blogger, bikin captcha di gadget blogspot, cara menaruh script captcha untuk pemula, guide to build google recaptcha, cara daftar google recaptcha, cara menggunakan google recaptcha, script kapca, html kapcah, kode kaptja

    2 comments:

    1. ini bisa digunakan di php tidak ya, tutorial untuk phpnya bang

      ReplyDelete
      Replies
      1. Bisa dan carannya hampir sama jika hanya ingin menggunakan captcha namun untuk penggunaan yang lebih komplex bisa digabungkan dengan penggunaan server key.

        Delete

    Post Top Ad

    Post Bottom Ad