Salam sejahtera utuk kita semua.
Oke kali ini saya akan menulis tentang menggunakan Re-captcha Google baru yang mereka sebut “No CAPTCHA reCAPTCHA”.
Berbeda dari captcha sebelumnya, captcha kali ini harus memasukan javascript.
Dari segi tampilan lebih simpel, namun text captcha tetap muncul pada kondisi tertentu.
Selain text, capthca ini terkadang menggunakan gambar sebagai bot-testnya.
 |
| Tampilan ReCaptcha lama dan Recaptcha Baru |
Gambar diatas adalah tampilan recaptcha lama dimana orang harus mengetikan tulisan kata tertera dan terkadang tulisan tersebut bukan hanya sulit dibaca bot, tapi juga sulit dibaca manusia.
Gambar dibawahnya merupakan ReCaptcha baru dari Google dimana orang tinggal klik sebuah radio-button dan captcha akan mendeteksi otomatis apakah pengunjung merupakan bot atau manusia.
Walau lebih simpel, namun terkadang challenge juga tetap muncul. Ya mungkin algoritma captcha mendeteksi perilaku tidak wajar pada halaman. Tetapi lebih simpel dan text juga lebih mudah dibaca karena lebih banyak menggunakan challenge angka dan terkadang menggunakan challenge gambar.
 |
| Challenge Captcha dengan angka. |
 |
| Challenge Captcha dengan Gambar |
Pertama-tama daftar dulu di google recaptcha alamat di https://www.google.com/recaptcha/ dan klik Get reCapthca
 |
| Klik Get reCaptcha dikanan atas untuk mendaftar |
Apabila belum login, maka masuklah dengan akun Google contohnya masuk dengan akun Gmail anda.
setelah masuk, pada Kolom Register Site, masukan Label, label ini hanya untuk penanda saja. Dan masukan Situs yang akan diberi otoritas recaptcha. dalam hal ini masukan 1 domain per baris apabila situs anda lebih dari satu.
 |
| Masukan Label dan Domain pada Kolom |
Oh ya untuk mempermudah, masukan juga domain localhost agar bisa di test di localhost kemudian klik tombol Register.
Seperti recaptcha versi sebelumnya, setelah register kita akan mendapat private key dan public key namun kali namanya adalah site key dan secret key.
 |
| Contoh sitekey dan secret key. |
Disini saya akan mencontohkan meletakan recaptcha pada 2 file yaitu form.html dan aksi.php dimana dari form.html akan mengirimkan data dan akan diproses di aksi.php.
kode form.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Contoh captcha</title>
<style type="text/css">
body {
margin: 1em 5em 0 5em;
font-family: sans-serif;
}
fieldset {
display: inline;
padding: 1em;
}
</style>
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?hl=id">
</script>
</head>
<body>
<form action="aksi.php" method="post">
<fieldset>
<legend>Contoh Form</legend>
<p>Username: <input type="text" name="username" ></p>
<p>Password: <input type="password" name="password"></p>
<div class="g-recaptcha" data-sitekey="6LffOPkSAAAAANcX17imacbHmzV-OFgDrR0o3lF3"></div>
<p><input type="submit" value="Kirim" /></p>
</fieldset>
</form>
</body>
</html>
Note : Ganti data-sitekey dengan site key anda. Pada contoh diatas, hapus tulisan merah dan ganti dengan sitekey milik anda sendiri.
Kemudian copykan folder src dari hasil ekstrak captcha plugin yang tadi di download sejajar dengan aksi.php.
Jadi saya ilustrasikan dalam sebuah forlder dalam htdocs/docroot ada file form.html, aksi.php dan folder src.
Dikarenakan library captcha menggunakan OOP berbentuk Class dan pada PHP tidak mendeteksi otomatis, maka setiap file harus di includekan.
contoh kode aksi.php
<?php
require_once 'src/Recaptcha/RequestMethod.php';
require_once 'src/Recaptcha/RequestParameters.php';
require_once 'src/Recaptcha/Response.php';
require_once 'src/Recaptcha/ReCaptcha.php';
require_once 'src/Recaptcha/RequestMethod/Post.php';
require_once 'src/Recaptcha/RequestMethod/Socket.php';
require_once 'src/Recaptcha/RequestMethod/SocketPost.php';
$username = $_POST['username'];
$password = $_POST['password'];
$respon = $_POST['g-recaptcha-response'];
$ip = $_SERVER['REMOTE_ADDR'];
if(! empty($respon))
{
$recaptcha = new \ReCaptcha\ReCaptcha('6LffOPkSAAAAADzO2Z-u6Idn5aG2-IyC9Bj96YHI');
$resp = $recaptcha->verify($respon, $ip);
if ($resp->isSuccess())
{
echo "Pemeriksaan sukses. <br />username : $username password : $password";
}else{
echo "Captcha salah";
}
}else{
echo "Anda Bot?";
}
?>
Note : ganti tulisan merah diatas dengan secret key milik anda sendiri.
Sekian, terima kasih dan semoga membantu
keep smile :-D
Tidak ada komentar:
Posting Komentar
Silakan Comment Tapi yang membangun ya (Jangan Spam) (^.^)