Memasang Recaptcha Google Dan Meresponnya

Ditulis oleh Danni Moring 23 Oktober 2015

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)

Tambah Komentar

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

Gut Moring

Hanya sekedar blog pribadi saja

Komentar untuk "Memasang Recaptcha Google Dan Meresponnya"

Simri

mlf

Novel

danang

danang

danang

danang

danang

danang

Kategori

Yang Banyak Dikunjungi