Tunggu Sebentar ...
Tahu captcha-nya blogger / blogspot ? yang " I'm not a robot " ? nah recaptcha milik google ini bisa dipasang dimana saja. Asalkan punya API Key nya. Tentu setiap orang bisa create API key-nya. Dan nanti setelah create atau register untuk mendapatkan key-nya, baru action dari sisi script : baik dari client ataupun dari sisi server sebagai respon dari recaptcha-nya atau boleh dibilang memverifikasi apakah recaptcha " i'm not a robot " tadi dicentang atau tidak.
Kalau masih belum ngeh recaptcha yang saya maksud, atau lupa-lupa ingat yang gimana, ini contohnya :
Ini saya buatkan contoh form sederhana dengan recaptcha google (I'm not a robot)
Catatan ini, adalah cara memasang dari sisi html biasa dan action nya dengan PHP. Yang mana tidak merujuk pada platform tertentu atau framework PHP tertentu. Jadi boleh dibilang ini sangat-sangat dasar. Karena disini cuma memberi tahu cara memasang dan merespon recaptcha nya dengan PHP sederhana. Toh dibuat sederhana karena memang tak perlu ribet-ribet memasangnya dan meresponnya kecuali disesuaikan dengan form masing-masing yang dimiliki.
REGISTER API KEY
Seperti sebelumnya, untuk memasang recaptcha ini membutuhkan API Key-nya. Untuk meregister mendapatkan API Key-nya, silakan kesini.
Pada form "register a new site", masukkan "label", "domains", "owner" pada form tersebut. Seperti gambar dibawah ini :
Setelah diisi semua, nanti akan mendapatkan Site Key, Secret Key nya. Site Key akan diletakkan bersamaan di halaman front-nya atau sebagai pendeteksi captcha ditampilkan, sedangkan Secret Key, digunakan untuk merespon atau menangkap variabel dari form yang di POST kan.
MEMASANG RECAPTCHA DARI SISI CLIENT
Setelah mendapatkan Site Key dan Secret Key, maka hal yang pertama kali dilakukan adalah memasang script di client atau halaman front. Tentunya dibagian form yang akan dipasangkan dengan captcha.
Masukkan script dibawah ini sebelum tag </head> pada html :
<script src='https://www.google.com/recaptcha/api.js'></script>
Sehingga script akan seperti ini, oiya dalam contoh yang saya buatkan, saya menggunakan bootstrap sebagai CSS nya. Berikut ini contoh scriptnya setelah memasang script diatas tadi :
<html> <title>Pasang Captcha Google - Danni Moring</title> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src='https://www.google.com/recaptcha/api.js'></script> </head>
Setela ini, berikutnya memsang div seperti dibawah ini, letakkan ditempat posisi captcha yang diinginkan:
<div class="g-recaptcha" data-sitekey="6LeQZw8TAAAAAJmLoeVXzK7rBYJ11xO7MVuOaMnS"></div>
Perhatikan pada "data-sitekey" nya, itu sesuaikan dengan site key masing-masing yang didapatkan setelah register.
Nah, untuk lengkapnya script form sederhana yang memasangkan recaptcha seperti dibawah ini. Code tersebut saya simpan dalam file "index.html".
<html> <title>Pasang Captcha Google - Danni Moring</title> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src='https://www.google.com/recaptcha/api.js'></script> </head> <body> <form action="aksi.php" method="POST" class="form-horizontal"> <div class="container"> <div class="form-group"> <div class="col-sm-offset-2 col-sm-6"> <h3>FORM</h3> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Nama</label> <div class="col-sm-6"> <input type="text" name="nama" class="form-control"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Komentar</label> <div class="col-sm-6"> <textarea name="komentar" class="form-control"></textarea> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-6"> <div class="g-recaptcha" data-sitekey="6Le7Wg8TAAAAADr2LL8omQS7CRB00LmiqnIUg7Cz"></div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-6"> <input type="submit" value="Simpan" class="btn btn-sm btn-primary"> </div> </div> </div> </form> </body> </html>
Pada contoh script form sederhana diatas, untuk mengeksekusi form tersebut, saya menggunakan file "aksi.php". Jadi untuk meresponnya diperlukan "aksi.php".
MERESPON FORM
Untuk merespon form sederhana diatas, saya membuat file bernama "aksi.php". Terserah namanya, ini hanya sekedar contoh. Berikut contoh code nya :
<?php $nama = isset($_POST['nama']) ? trim(htmlentities($_POST['nama'])):''; $komentar = isset($_POST['komentar']) ? trim(htmlentities($_POST['komentar'])):''; /* untuk menampung variabel post dari captcha google adalah g-recaptcha-reponse */ $captcha = isset($_POST['g-recaptcha-response']) ? $_POST['g-recaptcha-response']:''; $secret_key = 'xxxxxxxxxsensorxxxxxx'; //masukkan secret key-nya berdasarkan secret key masig-masing saat create api key nya $error = 'Gagal kirim form: periksa nama, komentar dan captcha nya'; if ($captcha != '' && $nama != '' && $komentar != '') { $url = 'https://www.google.com/recaptcha/api/siteverify?secret=' . urlencode($secret_key) . '&response=' . $captcha; $recaptcha = file_get_contents($url); $recaptcha = json_decode($recaptcha, true); if (!$recaptcha['success']) { echo $error; } else { echo 'Nama Anda : '.$nama.'<br>Komentar Anda : '.$komentar; } } else { echo $error; }
Untuk merespon variable captcha tersebut, maka paramter dari variable tersebut adalah g-recaptcha-response. Jadi untuk menangkapnya maka code-nya $_POST['g-recaptcha-response']. Sedangkan URL API request nya adalah https://www.google.com/recaptcha/api/siteverify.
Untuk lengkapnya silakan piknik disini di dokumentasinya. Nah untuk melihat contoh versi demo nya, silakan lihat disini yang telah saya buat versi sederhananya.
mas, saya muncul error bgini, itu kenapa ya? padahal udah sama persis
Parse error: syntax error, unexpected '$captcha' (T_VARIABLE) in C:\xampp\htdocs\akademik\act_login.php on line 41
Halo bro,
Minta bantuannya:
Jika saya punya code seperti berikut ini, dimana saya meletakkan code utk menampung, dan lain-lain? Bisa minta tolong bro lengkapin file aksi.php saya berikut ini bro? Berikut file aksi.php saya bro:
<div class='main-column-wrapper'>
<div class='main-column-left'>
<?php
echo "
<div class='blog-style-1'>
<div class='post-title'>
<b>Contact Us</b>
</div>";
if (isset($_POST[pesan])){ //ini copyan dari pak robby
$nama=anti_injection($_POST[nama]);
$email=anti_injection($_POST[email]);
$pesan=anti_injection($_POST[pesan]);
$akun=anti_injection($_POST[akun]);
//ini tambahan dari newsletter utk validasi email
if($_SERVER['REQUEST_METHOD']=='POST'){
$email=htmlspecialchars($_POST['email']);
$mail=explode("@",$email);
if(!isset($mail[1])) $mail[1] = '';
$akun=$mail[1];
$cek=mysqli_num_rows(mysqli_query($koneksi,"SELECT * FROM identitas WHERE email='$email'"));
$array = array("yahoo.com","ymail.com","yahoo.co.id","yahoo.com.au","yahoo.co.au","yahoo.co.uk","hotmail.com","rocketmail.com","gmail.com");
echo "<center style='margin-top:5%; margin-bottom:5%;'>";
if(empty($nama)) {
echo 'Anda belum mengisikan Nama Anda<br/> ';
$err = TRUE;
}
if(empty($email)) {
echo 'Anda belum mengisikan Alamat Email<br/> ';
$err = TRUE;
}
if(empty($pesan)) {
echo 'Anda belum mengisikan Pesan anda pada form Pesan.<br/> ';
$err = TRUE;
}
if(!in_array($akun, $array)){
echo 'The Email is invalid.<br/> ';
$err = TRUE;
echo "
<a href='javascript:history.go(-1);'><input style='font-size:18px;
padding-left:2px; padding-right:5px; padding-top:0px; padding-bottom:0px;' type='button' value='Back' /></a>";
}
else{
if(!empty($_POST['kode'])){
if($_POST['kode']==$_SESSION['captcha_session']){
echo "<center>";
if($err) {
echo'<a href="javascript:history.go(-1)"><b>Ulangi Lagi</b><br/>';
} elseif(!$err) {
$ip = $_SERVER['REMOTE_ADDR'];
mysqli_query($koneksi, "INSERT INTO hubungi(nama,
email,
subjek,
pesan,
tanggal)
VALUES('$_POST[nama]',
'$_POST[email]',
'Ip Pengirim : $ip',
'$_POST[pesan]',
'$tgl_sekarang')");
$kepada = "$iden[email]";
$judul = "Ada Pesan di $iden[nama_website]";
$header = "MIME-Version: 1.0" . "\r\n";
$header .= "Content-type:text/html;charset=iso-8859-1" . "\r\n";
$header .= 'From: '.$_POST[nama].' <'.$_POST[email].'>'. "\r\n";
$pesan = "Baru saja ada yang kirim pesan di : $iden[url]\n";
$pesan .= "Isi Pesan : $_POST[pesan]";
mail($kepada,$judul,$pesan,$header);
echo "<script>window.alert('Your message was sent successfully. Thanks.');
window.location='hubungi-kami.html'</script>";
}
}else{
echo " Sorry, The Code is invalid<br />
<a href=javascript:history.go(-1)><b>Back</b></a>";
}
}else{
echo "Ups...Please insert the code<br />
<a href=javascript:history.go(-1)><b>Back</b></a>";
}
}
}// ini tambahan dari newsletter
}// ini tambahan
echo"</div>
</div>";
?>
</div>
</div>
maaf mas bukan ga mau bantuin, tapi saya juga punya pekerjaan... memangnya apa errornya ? coba search dulu di google, tapi kalau suruh lengkapi code mas, saya engga bisa, karena saya juga punya tanggung jawab kerja yang harus diselesaikan
penematan kode html untuk scrip di tamplate blogger sebelah mana ya mas,
blogger itu maksudnya blogspot ya ? klo itu bukannya udah otomatis ya blogger pake captcha kayak gitu ? saya juga kurang paham klo blogger/blogspot
trims gan infonya, berkat artikel agan, web ane terbebas dari spam, kirain rumit, eh ternyata gampang.. makasih.. makasih
Terimakasih om petunjuknya laman kontak saya sudah ada recapthanya sekarang
Bermanfaat sekali Mas, tapis saya nemui kesalahan seperti ini :
"
Warning: file_get_contents(): https:// wrapper is disabled in the server configuration by allow_url_fopen=0
"
Gimana caranya benerinnya, tapi di scriptnya Mas ?
Masalahnya enggak bisa masuk di hostingnya untuk merubah php.ini nya.. Nuwun
pake code saya, apanya yang diubah php.ini nya ?
Iya pake code dari Mas.. ada pesan error seperti diatas, mohon batuannya betulinnya jangan ubah php.ini (gak bisa masuk setting di hostingannya)
Note : Perintah rubah php.ini hasil baca-baca mbah gugle
Bukan php.ini nya tapi kesalahan saya di script sebelah mana yaa ?
Saya pake code nya Mas Danni !
udah persis kayak code saya ? perasaan saya engga pernah bilang ubah pake php.ini, baik dari tulisan ataupun komentar...malah saya nanya dari awal kenapa ubah php.ini ? btw contoh demonya http://contoh.dannimoring.net/recaptcha/ juga di hosting, dan ga ubah apa2 (php.ini)
coba mana code-nya ? btw hostingnya dimana ? coba tanya ke bagian hosting mungkin memang aturan mereka ga set jadi 0
itu punya saya chaptanya kan pakai ini
<img src="<?php echo SITE_URL;?>captcha.php" style="" alt="Loading...."/>
terus mau saya ganti dengan chapta google itu gimana yah
coba ikutin aja contoh2 diatas dulu, kalau berhasil baru nanti dicoba otak atik sesuaikan dengan code-mu sendiri..
Hoho.. Gugling, eh nemu tulisan ini. Aku nyasar ke tempat yang benar nih mas
wewww....serius googling lari kesini ? hehehe mangnya apa keyword-nya ?
gan ane nemuin error begini gan "The reCAPTCHA wasn't entered correctly. Go back and try it again.(reCAPTCHA said: incorrect-captcha-sol)" padahal secret-key sama public key sudah bener gan
saya ga tahu persis code mu, jadi saya kurang tahu salahnya dimana..walaupun misalnya udah ngikuti code saya, bisa jadi ada yang kurang atau lainnya...coba taro di pastebin code-mu...biar saya lihat klo sempat
ini gan
require_once('recaptchalib.php');
$privatekey = "xxxxsecretcodexxxx";
$resp = recaptcha_check_answer ($privatekey,
$_SERVER["REMOTE_ADDR"],
$_POST["recaptcha_challenge_field"],
$_POST["recaptcha_response_field"]);
if (!$resp->is_valid) {
// What happens when the CAPTCHA was entered incorrectly
die ("The reCAPTCHA wasn't entered correctly. Go back and try it again." .
"(reCAPTCHA said: " . $resp->error . ")");
} else {
// Your code here to handle a successful verification
}
ini halaman konfirmasi gan
<form id="form1" name="form1" method="post" action="form_daftar_simpan.php" >
<table width="800" border="0" align="center">
<tr>
<td width="139">Name</td>
<td width="319"><input name="nama" type="text" id="nama" size="50" />*</td>
</tr>
<tr>
<td width="139">Job Title</td>
<td width="319"><input name="jabatan" type="text" id="jabatan" size="50" /></td>
</tr>
<tr>
<td width="139">Company</td>
<td width="319"><input name="instansi" type="text" id="instansi" size="50" />*</td>
</tr>
<tr>
<td width="139">Full Address</td>
<td width="319"><textarea name="alamat" cols="30" rows="4" id="alamat"></textarea>
*</td>
</tr>
<td> <?php
require_once('recaptchalib.php');
$publickey = "xxxxxxpublickeyxxxxx"; // you got this from the signup page
$error = $resp->error;
echo recaptcha_get_html($publickey,$error);
?>
</td>
</tr>
<tr>
<td>
<div class="g-recaptcha" data-sitekey="xxxxxxpublickeyxxxxx"></div>
</td>
<tr>
<td> </td>
<td><input type="submit" name="button" id="button" value="Submit" /></td>
</tr>
</table>
</form>
ini indexnya gan
ane juga nyobain skrip yg di web agan di web ane terus secret sama public keynya ane ganti sama yg punya ane tp tetep error gan gg ngebaca recaptchanya
yg code mu itu lihat disini ya https://developers.google.com/recaptcha/old/docs/php ? klo iya, itu ada peringatannya "Important: This is an old version of reCAPTCHA API. For the latest version, please refer to Version 2.0. " ,,,, btw memangnya klo pake code yang saya contohkan, error nya apa ?
perhatikan code ini untuk merespon captcha-nya (apakah di centang atau ga), $captcha = isset($_POST['g-recaptcha-response']) ? $_POST['g-recaptcha-response']:'';
gunakan g-recaptcha-response untuk merespon captcha nya...
coba pelajari link yang saya kasih di tulisan atas... https://developers.google.com/recaptcha/docs/verify
disitu ada keterangan "g-recaptcha-response POST parameter when the user submits the form on your site"
oke gan makasih infonya. btw kalau yg script dari agan itu pesan errornya ini "Gagal kirim form: periksa nama, komentar dan captcha nya" padahal captchanya udah ane centang gan
klo memang udah mencetanng tapi masih dibilang error, kemungkinan salah parameter buat merespon captchanya... buat respon captcha
$_POST['g-recaptcha-response']
iya gan udah ane tambahin bisa terus ane juga udah pelajari yg agan kasih buat web ane dan udah gg error. terima kasih bimbingannya gan
Gan punya ane kok error trus yah
keterangan error nya kaya gini :
Warning: file_get_contents(http://www.google.com/recaptcha/api/siteverify?
Mohon bantuannya Gan.... ane pusing gan blm bisa2.
udah dapat Site Key, Secret Key ? kalau belum register dulu API key-nya
saya ga bisa tahu penyebabnya, karena saya ga tahu code-mu gimana..
masukkan $secret_key = 'xxxxxxxxxsensorxxxxxx' sesuai site key yang didapat...