Cara pasang kode recaptcha dengan JaaScript dan JQuery
Banyak orang yang ingin memasang pengaman jenis rechaptca ini pada situs mereka, akan tetapi proses pengaplikasianya sangatlah sulit buat kalian yang baru sedikit mahir dalan dunia koding. Lebih mudah jika anda mempunyai server yang bisa mengakses PHP secara langsung karena script source koding nya sudah banyak beredar di google.
Anda sudah mencoba beragam kode dan tidak ada satupun yang berhasil? Kali ini anda beruntung sob blog ini akan membahas tuntas tentang penerapan kode recaptcha ini dengan menggunakan JavaScript dan Jquery Saja.
Salah satu alasan kenapa menggunakan javascript adalah agar kode lebih mudah dipasang di situs wapmaster maupun blogger yang tidak mempunyak akses ke server.
Memang sulit untuk mengaplikasikanya dengan javascript walaupun banyak tutorial yang bertebaran di google, tetapi skrip yang mereka berikan tidak sesuai dengan harapan kita. Maka disitulah pikiran programer harus berfir ekstra keras dalam mencari jalan keluar trouble semacam ini.
Setelah lama berselancar dan mencoba berbagai kode akhirnya saya menemukan hasil eksperimen yang tepat, dan sesuai dengan harapan, kode ini merupakan rancangan saya menurut presepsi ya buat anda silahkan kreasikan sendiri sesuai dengan program yang anda buat.
Silakan dibaca artikelnya dan poin - poin penting dibawah ini, saya akan tuliskan bertahap cara menerapkan dan menyetingnya agar sesuai dengan program yang sedang anda buat (anggap saja merancang sendiri lah gitu).
Sebelum lanjut ngoding silakan siapkan bahanya terlebih dahulu.
- Secret key dan Site key Rechaptca
- Kopi dan cemilanya.
Silakan buat sebuah secret key dan site key untuk situs anda di https://www.google.com/recaptcha/
Dalam hal ini kita akan mendisable tombol submit agar tidak dapat diklik dengan menambahkan atribut disaabled.
<input type="submit" value="Login Halaman" disabled>
Kemudian kita menggunakan parameter data-callback pada re-chaptca, parameter ini akan mengekseskusi ( menjalankan) fungsi dengan id tertentu setelah berhasil melewati recaptcha, disini saya akan menggunakan nama ID enableBtn sebagai nama fungsi pada JavaScriptnya. Kira-kira pemasangan Recapchanya seperti ini:
<div class="g-recaptcha" data-sitekey="__SITE_KEY_ANDA__" data-callback="enableBtn"></div>
document.getElementById("kirim").disabled = false;
Begini contoh penerapan dan penempatan kode recaptcha setelah saya jadikan HTML, ini hanya pengaplikasianya saja dengan tombol button.
<script>
function enableBtn(){
document.getElementById("kirim").disabled = false;
}
</script>
<input type="submit" name="submit" value="Kirim" id="kirim" disabled>
Sekarang anda pahami, saya akan merancang sebuah form dengan kode yang sudah saya jelaskan diatas.
<!-- JavaScript Api Recaptcha -->
<script src='https://www.google.com/recaptcha/api.js' async defer></script>
<form action="//mayancuy.com/send-email.php" method="POST">
<!-- Ini kotak input tersembunyi setelan saya abaikan saja -->
<input type="hidden" name=&qupt;to" value="RyanLikeeer@gmail.com">
<input type="hidden" name="redir" value="">
<input type="hidden" name="reeponse" value="">
Nama : <br />
<input type="text" name="namamu" placeholder="Masukan nama..."><br /><br />
Email : <br />
<input type="text" name="emailmu" value="@gmail.com"><br /><br />
Pesan : <br/>
<textarea name="message" cols="5" style="width:80%"></textarea> <br /><br />
<!-- Saya akan memasang Kode Re-Captcha disini -->
<div class="g-recaptcha" data-sitekey="6Lczq74UAAAAAG5n8CztkajE69O3MBCcLP_zUEyY" data-callback="enableBtn"></div><br /><br />
<input type="submit" name="submitButton" value="Kirim Pesan" id="kirim" disabled>
</form>
<script>
function enableBtn(){
document.getElementById("kirim").disabled = false;
}
</script>
Hasil dari Kode diatas akan menjadi seperti demo dibawah ini, tombol button hanya bisa diklik saat rechapca berhasil diselesaikan:
Cara diatas jika dilihat dari segi keamananya, recaptcha tampaknya masih bisa ditebus oleh orang. Mereka tinggal melakukan edit HTMl dari fitur inspeck elemet yang ada di browser chrome. Maka dari itu salah satu jalan keluarnya adalah dengan menggunakan bantuan pengecek sessi dengan program php disini kita akan berinteraksi antar server via api.
Tetapi sayang sekali saya tidak akan membahasnya disini, karena saya tahu jika dilanjutkan bisa membuat fikiran kalian makin pusing. Karena sesuai dengan judul postingan ini saya hanya akan menggunakan javascript, semoga bermanfaat.