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 (47)

Tambah Komentar

Setiap komentar yang tampil adalah hasil dari persetujuan Admin

Komentar untuk "Memasang Recaptcha Google Dan Meresponnya"

qodrunada

17-04-2018 15:39

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

Komentar via web

Balas

Gut Moring

Hanya sekedar blog pribadi saja

Komentar untuk "Memasang Recaptcha Google Dan Meresponnya"

qodrunada

Annash ZM

Simri

mlf

Novel

danang

danang

danang

danang

danang

danang

Kategori

Yang Banyak Dikunjungi