Tunggu Sebentar ...

Memasang Recaptcha Google Dan Meresponnya

Ditulis oleh

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.

Ditumpuk didalam berkas : Catatan Belajar , Belajar lain-lain , Blogging
Yang berkomentar (43)
Setiap komentar yang tampil adalah hasil dari persetujuan Admin

Komentar untuk "Memasang Recaptcha Google Dan Meresponnya"

Harry
20-04-2017 01:15

Terima kasih atas infonya. Beberapa plugin gak merespon dengan kode key nya.ada yang salah mungkin.
Btw terima kasih atas artikelnya ya

Komentar via web

Balas
Simri
27-02-2017 20:38

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>

Komentar via web

Balas
Danni Moring
27-02-2017 23:15

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

Komentar via web

Balas
psp android
16-01-2017 13:22

penematan kode html untuk scrip di tamplate blogger sebelah mana ya mas,

Komentar via web

Balas
Danni Moring
16-01-2017 17:13

blogger itu maksudnya blogspot ya ? klo itu bukannya udah otomatis ya blogger pake captcha kayak gitu ? saya juga kurang paham klo blogger/blogspot

Komentar via web

Balas
pasardomain
01-01-2017 04:57

trims gan infonya, berkat artikel agan, web ane terbebas dari spam, kirain rumit, eh ternyata gampang.. makasih.. makasih

Komentar via web

Balas
Danni Moring
01-01-2017 10:06

sama-sama...

Komentar via web

Balas
Petunjuk CANTIK
02-11-2016 01:00

Terimakasih om petunjuknya laman kontak saya sudah ada recapthanya sekarang

Komentar via web

Balas
mlf
15-10-2016 22:08

terima kasih sangat membantu

Komentar via web

Balas
Danni Moring
16-10-2016 00:13

sama-sama

Komentar via web

Balas
Novel
08-10-2016 10:16

Terima kasih ya tutorialnya,, it works..

Komentar via web

Balas
Danni Moring
08-10-2016 11:41

sama-sama

Komentar via web

Balas
Suharjoko - JQ
11-08-2016 09:55

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

Komentar via web

Balas
Danni Moring
11-08-2016 09:56

pake code saya, apanya yang diubah php.ini nya ?

Komentar via web

Balas
Suharjoko - JQ
11-08-2016 10:37

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

Komentar via web

Balas
Suharjoko - JQ
11-08-2016 11:12

Bukan php.ini nya tapi kesalahan saya di script sebelah mana yaa ?
Saya pake code nya Mas Danni !

Komentar via web

Balas
Danni Moring
11-08-2016 16:03

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)

Komentar via web

Balas
Danni Moring
11-08-2016 16:15

coba mana code-nya ? btw hostingnya dimana ? coba tanya ke bagian hosting mungkin memang aturan mereka ga set jadi 0

Komentar via web

Balas
Nawi
07-05-2016 12:27

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

Komentar via web

Balas
Danni Moring
07-05-2016 14:41

coba ikutin aja contoh2 diatas dulu, kalau berhasil baru nanti dicoba otak atik sesuaikan dengan code-mu sendiri..

Komentar via web

Balas
Bangkoor
07-04-2016 00:43

Hoho.. Gugling, eh nemu tulisan ini. Aku nyasar ke tempat yang benar nih mas

Komentar via web

Balas
Danni Moring
07-04-2016 01:06

wewww....serius googling lari kesini ? hehehe mangnya apa keyword-nya ?

Komentar via web

Balas
Bangkoor
07-04-2016 01:36

Ciyusan mas. Pake keyword "cara membuat recaptcha google". Nangkring di nomor 3 tuh. Cihuy nih

Komentar via web

Balas
Danni Moring
07-04-2016 09:31

wedehhh..engga nyangka euy hehehe

Komentar via web

Balas
danang
12-02-2016 16:48

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

Komentar via web

Balas
Danni Moring
12-02-2016 17:57

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

Komentar via web

Balas
danang
15-02-2016 14:47

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

Komentar via web

Balas
danang
15-02-2016 14:53

<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>&nbsp;</td>
<td><input type="submit" name="button" id="button" value="Submit" /></td>
</tr>
</table>

</form>

ini indexnya gan

Komentar via web

Balas
danang
15-02-2016 14:55

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

Komentar via web

Balas
Danni Moring
15-02-2016 15:11

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...

Komentar via web

Balas
Danni Moring
15-02-2016 15:16

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"

Komentar via web

Balas
danang
15-02-2016 15:32

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

Komentar via web

Balas
Danni Moring
15-02-2016 15:41

klo memang udah mencetanng tapi masih dibilang error, kemungkinan salah parameter buat merespon captchanya... buat respon captcha

$_POST['g-recaptcha-response']

Komentar via web

Balas
danang
16-02-2016 10:09

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

Komentar via web

Balas
Danni Moring
16-02-2016 10:20

sama-sama..

Komentar via web

Balas
NJ
22-12-2015 15:17

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.

Komentar via web

Balas
Danni Moring
22-12-2015 21:37

udah lihat contoh code-nya di tulisan itu ?

Komentar via web

Balas
NJ
23-12-2015 08:29

Udah.... tpi tetep masih error gan....

Komentar via web

Balas
Danni Moring
23-12-2015 08:35

udah dapat Site Key, Secret Key ? kalau belum register dulu API key-nya

Komentar via web

Balas
NJ
23-12-2015 08:42

udah Gan.... error nya Warning: file_get_contents(http://www.google.com/recaptcha/api/siteverify? kayanya yg error itu ketika pemprosessannya.... untuk captcha nya sich udah running well

Komentar via web

Balas
Danni Moring
23-12-2015 08:45

saya ga bisa tahu penyebabnya, karena saya ga tahu code-mu gimana..

Komentar via web

Balas
NJ
23-12-2015 08:55

utk pemproesannya sma sperti yg punya Agan.... sma persis

Komentar via web

Balas
Danni Moring
23-12-2015 09:07

masukkan $secret_key = 'xxxxxxxxxsensorxxxxxx' sesuai site key yang didapat...

Komentar via web

Balas