Post Terbaru
Loading...

Senin, 25 April 2016

Cara Membuat Google Recaptcha Dengan Mudah

in Tutorial PHP
Pada kesempatan kali ini saya akan berbagi cara untuk menambahkan Recaptcha Google ('I'm Not Robot') kedalam form project kita, fungsinya adalah untuk meminimalisir spammer yang berkeliaran di blog/website kita.

recaptcha

Captcha (Completely Automated Public Turning) biasanya sering kita temukan untuk memvalidasi inputan dalam sebuah website, captcha sendiri banyak macamnya, kali ini kita akan fokus membahas Recaptcha Google serta cara penerapannya.

Kenapa saya lebih memilih Recaptcha Google dibanding lainnya, karena penggunaannya yang mudah dan tampilannya ndak ribet-ribet amat, jadi tidak membingungkan user. Langsung saja kita mulai tutorialnya.

Syarat untuk memasang recaptcha google adalah kita harus punya API key nya, yang belum punya, silakan daftar halaman resminya (https://www.google.com/recaptcha/admin), berikut tampilan halamannya:

registrasi

Silakan anda isi kolom label dan domains sesuai dengan domain dari website yang akan anda pasang recaptcha nya, karena apabila nama domain nya tidak cocok maka recaptcha nya akan error saat web anda sudah online nantinya.

Setelah anda isi kolom label dan domains dengan benar, maka akan mendapatkan secret key dan site key dari recaptcha nya. Berikut contoh tampilannya kalau anda berhasil membuat registrasi

berhasil

sampai disini kebutuhan untuk pemasangan recaptcha sudah terpenuhi, sekarang saatnya coding..

Skenarionya kita akan membuat tampilan seperti berikut

tes

Jadi terdapat form dengan 2 kolom inputan, yaitu : nama dan komentar, lalu 1 button untuk aksinya, dan pastinya recaptcha nya. untuk tampilan saya menggunakan framework bootstrap (http://www.getbootstrap.com)

Pertama, Silakan buat folder dihtdocs dengan nama recaptcha(*opsional), kemudian buat file dengan nama index.php, copy paste script berikut:

.
.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Recaptcha Google</title>
  <!-- snippet  -->
  <script src='https://www.google.com/recaptcha/api.js'></script>
  <!-- bootstrap -->
  <link href='bootstrap.min.css' rel='stylesheet' type='text/css' />
</head>

<body>
<form action="aksi.php" method="POST">
 <div class="container">
    <div class="form-group">
      <div class="col-sm-offset-4">
         <h3>Recaptcha Google <a href="http://www.codingae.blogspot.com">Codingae</a></h3>
      </div>
 </div>
  <div class="form-group">
   <label class="col-sm-4 control-label">Nama</label>
   <input type="text" name="nama" class="form-control">
  </div>
  <div class="form-group">
   <label class="col-sm-4 control-label">Komentar</label>
   <textarea name="komentar" class="form-control"></textarea>
  </div>
  <div class="form-group">
     <!-- data site-key isi dengan site key anda -->
       <div class="g-recaptcha" data-sitekey="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"></div>
  </div>
  <div class="form-group">
         <input type="submit" value="Simpan" class="btn btn-sm btn-primary">
     </div>
</div>
</form>
<script src="bootstrap.js"></script>

</body>
</html>
Poin penting dari file ini adalah snippet (didalam tag <head>), dan data-sitekey untuk memunculkan recaptcha nya. jangan lupa ganti data-sitekey xxxxxxxxxxxxxxxx dengan site-key yang anda sendiri yang sudah anda dapatkan setelah registrasi (gambar no.3 dari atas).

Kedua, kita buat file aksi.php dan copy paste script dibawah ini, tujuaanya adalah untuk memberikan aksi dari inputan file index.php yang sudah kita buat.

.
.
<?php
$nama = isset($_POST['nama']) ? trim(htmlentities($_POST['nama'])):'';
$komentar = isset($_POST['komentar']) ? trim(htmlentities($_POST['komentar'])):'';
/* optional -- untuk menampung nilai dari g-recaptcha-reponse dari method post index */
$captcha = isset($_POST['g-recaptcha-response']) ? $_POST['g-recaptcha-response']:'';
//masukkan secret key-nya berdasarkan secret key masig-masing saat create api key nya
$secret_key = 'xxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxx'; 
$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 "<script language='javascript'>
             alert ('Mbok ya di isi dulu captcha nya bos')
             top.location='index.php';               
             </script>";
   } else {
    echo "<script language='javascript'>
             alert ('Selamat $_POST[nama] Komentar Anda Berhasil')
             top.location='index.php';               
             </script>";
    /*optional -- untuk mengintegrasikan dengan database*/
   // mysql_query("INSERT INTO komen set nama='$nama',komentar='$komentar'") or die (mysql_error());
   // header("location: index.php");
   }
} else {
  echo "<script language='javascript'>
             alert ('Mbok ya di isi dulu captcha nya bos')
             top.location='index.php';               
             </script>";
      
}
Untuk secret key nya xxxxxxxxxxxxxxxx-xxxxx, silakan anda ganti dengan secret key yang sudah anda dapat kan setelah registrasi recaptcha tadi. dan untuk menampung nilai dari recaptcha kita menggunakan script yang ada di $variabel, dan URL Request API nya dari https://www.google.com/recaptcha/api/siteverify

Dengan mengikuti langkah-langkah dari awal hingga akhir, insyaallah cara ini bisa berhasil, karena saya sendiri mempraktekkannya juga berhasil, bisa dilihat link demo nya di bawah ini, dan apabila ingin versi lengkapnya dengan menggunakan database, bisa anda download dibawah ini file nya.
Berhubung saya menggunakan hosting gratisan, ya..maklumin aja ya kalau demonya agak sangat lemot..hehe

Referensi
- http://dannimoring.net/baca/memasang-recaptcha-google-dan-meresponnya

#HAPPYCODING #OPENSOURCEINMYLIFE

1 komentar:

Satria Arya Widyadhana delete26 September 2018 pukul 00.19

thanks gan membantu banget
tadinya aku ke susahan untuk respon captchanya
tapi setelah nemu disini kok alhamdulillah bisa
terimakasih banyak gan :D

Silakan komen dengan memperhatikan aturan berikut
1. Komen relevan, sesuai dengan apa yang dibahas
2. Komen tidak mengandung unsur SARA
3. Mau promo apapun silakan yang penting perhatikan poin 1 dan 2
4. Perhatikan poin 1-3 aja
5. Poin 5 hanya buat iseng aja kok hehehe

#HAPPYCODING