Cara pasang Recapcha dengan JavaScript tanpa PHP

Cara menggunakan Recapcha dengan javascript

Recapcha adalah teknologi perlindungan keamanan yang disediakan oleh Google untuk mencegah dampak buruk dari bot, atau kegiatan otomatis lainya. Kalau dulu kita sangat membenci Recapcha lantaran sulit melewati keamananya, sering di ulang-ulang tanpa keberhasilan. Sekarang kita membutuhkan recapcha untuk keamananan situs web, web login, web safelink, web download file wajib menggunakan Recapcha agar situsnya nggak di acak oleh orang lain.

Dalam kerjanya proses validasi recapcha dilakukan disisi server (Server Side) dengan menggunakan Rest Api. Recapcha juga bisa digunakan dengan validasi javascript, caranya kita bisa memanfaatkan calback (umpan balik) untuk menjalankan satu function saat pengguna berhasil menyelesaikan rintangan yang diberikan oleh Recapcha.

Sebelum menggunakan aku tekankan sekali lagi ya, tips ini nggak cocok buat kamu yang ingin mendapatkan data statistik yang lengkap. Proses validasi hanya dilakukan pada sisi client jadi kita nggak terhubung dengan Rest Api Recapcha untuk memvalidasikan apakah rintangan sudah diselesaikan dengan baik atau tidak. Dalam demo kali ini, aku akan mencoba mendisabled buton HTML sebelum pengguna menyelesaikan recapcha. Dan disabled buton akan dinonaktifkan begitu kita mendapatkan aksi calback dari recapcha, yang artinya pengguna berhasil melewati recapcha tersebut.

Metode ini punya kelemahan sendiri, orang bisa menggunakan inspec dan edit element untuk mengaktifkan button secara manual. Tapi setidaknya ini bisa membuat sesi pengguna bertahan lebih lama pada website kita, aku menggunakan Recapcha Pada halaman Safelink. Sesi pengguna sangat penting untuk membuat tayangan iklan adsense lebih banyak yang valid, makanya aku mengggunakan metode ini dalam halaman safelink dan login. Bila kamu tertarik ingin mencobanya, silakan ikuti metode dibawah ini ada dua tahapan yang wajib kamu lakukan.

Langkah Membuat Recapcha di Google

Buka website pembuatan Recapcha, lalu buat Recapcha Baru.
Pada kolom Label masukan nama Bebas sebagai identifikasi Nama Recapcha anda.
Bagian Recapcha Type pilih jenis rintangan yang kamu inginkan, aku rekomendasiin pilih v2 biar mudah dilewati pengguna.
Selanjutnya pada kolom domain tambahkan semua domain dan subdomain tempat dimana kamu akan meletakan Recapcha.
Kolom Owner tambahkan semua alamat email yang ingin kamu jadikan sebagai admin Recapcha.
Jangan lupa Centang kotak perstujuan dengan Syarat dan Privasi Recapcha. Klik submit, kamu bakalan mendapatkan kode Site Key dan Secret Key.

Salin dan simpan kode Site Key tersebut, sekarang semuanya sudah siap. Langkah prosss kedua adalah mengintegrasikan Reapcha dengan aplikasi yang akan kita buat, sebagai contoh demo aku akan melakukan Enable Button ketika rintangan Recapha berhasil diselesaikan. Caranya dengan memanfaatkan data calback, sudah siap melangkah ke tips selanjutnya? Next baca tahapanya.

Mengintegrasikan Recapcha dengan Aplikasi formulir HTML

Kamu membutuhkan sebuah kode javascript untuk menyelesaikan pemanggilan Recapcha. Salin dan tempel kode javascript dibawah ini, dan tempatkan diantara tag head pada halaman web HTML kamu.

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Oke Selesai ya, tempatkan kode Recapcha berikut tepat dimana saja kamu ingin menampilkan Recapcha. Jangan lupa kode api key dan api secretnya diganti ya. Begitu juga dengan data-calback, masukan nama sebuah fungsi JavaScript yang sudah kamu buat. Nanti fungsi tersebut akan dijalankan setelah pengguna berhasil menyelesaikan Recapcha.

<div class="g-recaptcha" data-sitekey="KodeSiteKey" data-callback="BolehDiklik"></div>

Sekarang kamu lihat pada versi yang lebih lengkap, disini aku menempatkan recapcha untuk membuat tombol button jadi bisa di klik pengguna apabila dia sudah menyelesaikan rintangan Recapcha.

<!DOCTYPE html>
<html lang=en>
<meta charset=utf-8>
<head> <meta name=viewport content="width=device-width,initial-scale=1">
<title>RyanID Recapcha Demo</title>
</head><html><body>
<form action="" method="post">
<div class="g-recaptcha" data-sitekey="KodeSiteKey" data-callback="BolehDiklik"></div>
<input type="button" disabled>Ini adalah Button</button>
</form>
<script>function BolehDiklik(){
document.getElementById("tombolku").disabled=false;}</script>
</body></html>

Recapcha di atas bekerja tidak dengan memverifikasi kode di sisi server, tapi langsung dari javascript itu sendiri. Ketika user berhasil menyelesaikan tantangan recapcha, maka recapcha akan memanggil/menjalankan fungsi BolehDiklik

Dalam hal ini saya merancang fungsi tersebut untuk membatalkan disabled pada tombol submit sehingga bisa di klik.

Selesai, sekarang kamu bisa mencobanya sendiri. Catatan bila ingin menggunakan localhost sebagai domain utama harap tambahkan localhost atau alamat ip local komputer 128.0.0.1, silakan divariasikan sendiri.

Untuk alasan keamanan teknik ini masih belum aman, tapi untuk web-web biasa yang memang tidak membutuhkan keamanan cara ini mampu buat mencegah spam.

Salah satu kelemahan dari teknik ini adalah inspect element, dan user bisa membatalkan disabled dengan mengedit HTML halaman.

Metode seperti ini cocok digunakan untuk aplikasi web safelink, tidak direkomendasikan untuk web download file. Karena ada celah keamanan, jika orang lain mengetahui sistem kerja aplikasi mu dia bisa membuat robot yang mengakses langsung ke sumber file dan kamu bakalan kehilangan ratusan MB Bandwidth ketika bot mencoba mengakses sumber file. Selamat mencoba, bila ada masalah atau kode tidak berfungsi silakan ditanyakan di fanspage @ryanid.my.id