Hai :) Kembali lagi bersama saya Rizal Fakhri owner blog ini, Kali ini saya akan membagikan tutorial untuk memasang Google reCACPTCHA Easy on Human, Hard on Bots.
Buat kamu Web Developer yang sering berhadapan dengan client side yang mengharuskan client untuk login bisa dicoba tutorial ini agar mereka tidak bisa menggunakan bot untuk mengakses layanan mu.
Dokumentasi dari google sendiri sudah ada dan bisa kamu baca di https://developers.google.com/recaptcha/intro, Atau jika kamu ingin melanjutkan membaca tutorial di blog ini silahkan lanjutkan dan jangan membuka link diatas.
Silahkan kunjungi https://www.google.com/recaptcha/intro/index.html untuk dapatkan site key dan private key, JIka sudah signin silahkan masukan list daftar site yang akan kamu pasang google recaptcha, karna localhost tidak bisa, jadi ane akan pakai 127.0.0.1 seperti screenshoot dibawah ini.
Label digunakan untuk mengidentifikasi site apa yang anda buat, isi sesuai website anda, misal rizalblog client dan semacamnya
Domains digunakan untuk meregister domain yang kan dipasang google recaptcha, jika tidak ditambah maka akan error, untuk latihan ane menggunakan 127.0.0.1 karna localhost tidak bisa digunakan. Kamu bisa manambah domain sebanyak yang kamu inginkan dengan menambahnya di line baru seperti screenshoot dibawah ini.
OK....
Time To Code!
Silahkan buka code editor kesukaanmu, Kalo ane pake Atom Hackable Text Editor Dari GitHUb, Kalo kamu mau download di https://atom.io
Karna ini hanya untuk latihan, jadi kita hanya akan bekera di form biasa saja tanpa css dll hanya html & php clear, Silahkan start webserver kamu :)
1. buat 1 file PHP misal form.php
Buat form html kamu atau dengan paste kode dibawah ini.
<DOCTYPE html>
<html>
<head>
<title>Latihan Google reCAPTCHA</title>
</head>
<body>
<form method="post">
<input type="text" name="nama" placeholder="name"/><br />
<button type="submit" name="btn-submit">SUBMIT</button></ br>
</form>
</body>
</html>
Kode diatas akan menghasilkan form seperti gambar dibwah ini.
Jangan lupa untuk menambah tag dibawah ini sebelum tag </head>
<script src='https://www.google.com/recaptcha/api.js'></script>
<div class="g-recaptcha" data-sitekey="<?php echo $site_key; ?>"></div>
<DOCTYPE html>
<html>
<head>
<title>Latihan Google reCAPTCHA</title>
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
<form method="post">
<input type="text" name="nama" placeholder="name"></input><br />
<button type="submit" name="btn-submit">SUBMIT</button><br />
<div class="g-recaptcha" data-sitekey="<?php echo $site_key; ?>"></div>
</form>
</body>
</html>2. Saatnya PHP Code.
Disini kita akan merequest ke API Google reCAPTCHA dengan parameter berikut,
- response (required), Yaitu untuk mengirim response dari captcha kita ke API Google.
- secret (required), Yaitu untuk mengirim secret key kita.
- remoteip (optional), Digunakan jika kita ingin mengirim ip user yang mensubmit captcha kita ke server google.
Sehingga format URL nya seperti ini https://www.google.com/recaptcha/api/siteverify?response=respon_captcha&secret=secret_key_kamu&remoteip=remote_ip_user
Untuk menerima informasi yang dikirim user, kita akan membuat variable yang digunakan untuk menampilkan data yang dikirim user, anggap saja variable $nama untuk mendefinisikan nama yang di submit user, dan variable $g_response untuk mendefined atau mendefinisikan reponse dari captcha kita apakah true atau false. Silahkan tambahkan kode dibawah ini diatas kode <DOCTYPE html>.
<?php
$site_key = "site key kamu";
$secret_key = "secret key kamu";
if(isset($_POST['btn-submit'])) {
/* variable $nama untuk nama sayng di submit user */
$nama = $_POST['nama'];
/* variable $g_response berisi response dari captcha*/
$g_response = $_POST['g-recaptcha-response'];
/* variable $request berisi request ke API Google untuk mengirim secret key response dan ip user*/
$request = file_get_contents("https://www.google.com/recaptcha/api/siteverify?response=".$g_response."&secret=".$secret_key."&remoteip=".$_SERVER['REMOTE_ADDR']);
/* Kode dibawah berfungsi untuk memvalidasi jika terdapat "true" dari hasil request ke API Google maka captcha sukses, jika false maka captcha error*/
if(preg_match("/true/",$request) == true) {
echo "<h1 style='color:green;'>Sukses kamu bukan bots :)</h1>";
} else {
echo "<h1 style='color:red;'>CAPCTHA ERROR!!!</h1>";
}
}
?>
SELESAI!!
Silahkan akses file php anda di browser, Dan test tanpa mengisi captcha maka akan memunculkan pesan error seperti screenshoot dibawah ini.
Dan jika captcha diisi dengan benar akan memunculkan pesan sukses seperti dibawah ini :)
Selesai.... :)
