Cara Pasang Isyarat Recaptcha Dengan Jaascript Dan Jquery

Joss

 

Banyak orang yang ingin memasang pengaman jenis rechaptca ini pada situs mereka, akan tetapi proses pengaplikasianya sangatlah sulit buat kalian yang gres sedikit ahli dalan dunia koding. Lebih gampang jikalau anda memiliki server yang sanggup mengakses PHP secara eksklusif alasannya yaitu script source koding nya sudah banyak beredar di google.

Anda sudah mencoba bermacam-macam isyarat dan tidak ada satupun yang berhasil? Kali ini anda beruntung sob blog ini akan membahas tuntas wacana penerapan isyarat recaptcha ini dengan memakai JavaScript dan Jquery Saja.
Salah satu alasan kenapa memakai javascript yaitu semoga isyarat lebih gampang dipasang di situs wapmaster maupun blogger yang tidak mempunyak susukan ke server.

Memang sulit untuk mengaplikasikanya dengan javascript walaupun banyak tutorial yang bertebaran di google, tetapi skrip yang mereka berikan tidak sesuai dengan impian kita.
Maka disitulah pikiran programer harus berfir ekstra keras dalam mencari jalan keluar trouble semacam ini.
Setelah usang berselancar dan mencoba banyak sekali isyarat balasannya aku menemukan hasil eksperimen yang tepat, dan sesuai dengan harapan, isyarat ini merupakan rancangan aku berdasarkan presepsi ya buat anda silahkan kreasikan sendiri sesuai dengan aktivitas yang anda buat.
Silakan dibaca artikelnya dan poin – poin penting dibawah ini, aku akan tuliskan sedikit demi sedikit cara menerapkan dan menyetingnya semoga sesuai dengan aktivitas 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 semoga tidak sanggup diklik dengan menambahkan atribut disaabled.

Read:  Rahasia Dibalik Aplikasi Flyexam Browser Rp 3000,-
 <input type="submit" value="Login Halaman" disabled> 

Kemudian kita memakai parameter data-callback pada re-chaptca, parameter ini akan mengekseskusi ( menjalankan) fungsi dengan id tertentu sesudah berhasil melewati recaptcha, disini aku akan memakai nama ID enableBtn sebagai nama fungsi pada JavaScriptnya. Kira-kira pemasangan Recapchanya ibarat ini:

 <div class="g-recaptcha" data-sitekey="__SITE_KEY_ANDA__" data-callback="enableBtn"></div>    

data-callback akan menjalankan fungsi dengan nama enableBtn sesudah berifikasi captcha selesai, kita memakai kodi ini untuk menghapus atribut disabled pada tombol subnit sehingga sanggup diklik.

Rahasia
 document.getElementById("kirim").disabled = false; 

Begini referensi penerapan dan penempatan isyarat recaptcha sesudah aku 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, aku akan merancang sebuah form dengan isyarat yang sudah aku 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 aku 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 ibarat demo dibawah ini:

Nama :
Email :

Pesan :

Cara diatas jikalau dilihat dari segi keamananya, recaptcha sepertinya masih sanggup ditebus oleh orang. Mereka tinggal melaksanakan edit HTMl dari fitur inspeck elemet yang ada di browser chrome. Maka dari itu salah satu jalan keluarnya yaitu dengan memakai pinjaman pengecek sessi dengan aktivitas php disini kita akan berinteraksi antar server via api. Tetapi sayang sekali aku tidak akan membahasnya disini, alasannya yaitu aku tahu jikalau dilanjutkan sanggup menciptakan fikiran kalian makin pusing. Karena sesuai dengan judul postingan ini aku hanya akan memakai javascript, semoga bermanfaat.

Next Post

Forex Envelope Profit System Trading Made Easy

Trading Made Simple the right way and other trading lessons 233 replies. Forex System Forex Trading Profit System Forex Trading Made Ez Review Two Day Candlestick Trading Patterns Forex Secret Profit Indicator And Trading System Over 90 Mt4 Tweet. Profit System Trading System Forex Strategies Forex Resources Forex Trading Free […]
Forex Envelope Profit System Trading Made Easy