Cara Membuat Captcha dengan Menggunakan Google reCAPTCHA
Rizaldi Maulidia Achmad
Catatan yang akan saya bahas pada kesempatan kali ini adalah mengenai captcha. Apa itu Captcha? Captcha adalah suatu bentuk uji tantangan-tanggapan (challange-response test) yang digunakan dalam perkomputeran untuk memastikan bahwa jawaban tidak dihasilkan oleh suatu komputer. Proses ini biasanya melibatkan suatu komputer (server) yang meminta seorang pengguna untuk menyelesaikan suatu uji sederhana yang dapat dihasilkan dan dinilai oleh komputer tersebut. Karena komputer lain tidak dapat memecahkan CAPTCHA, pengguna manapun yang dapat memberikan jawaban yang benar akan dianggap sebagai manusia.
Untuk catatan ini, kita tidak akan membuat sendiri captcha tersebut. Melainkan kita akan menggunakan captcha buatan google yang dikenal dengan sebutan Google reCAPTCHA. Tentunya karena kita menggunakan captchat buatan google, Anda harus memiliki akun google terlebuh dahulu sebelum kita lanjutkan pada tahapan penggunaan captcha tersebut.
DEMO
Sebelum masuk ke tutorialnya. Mungkin ada yang mau lihat demonya terlebih dahulu. Silahkan klik link berikut untuk melihat demonya : Lihat Demo.
STEP 1 – SETTING GOOGLE RECAPTCHA
Hal pertama yang akan kita lakukan adalah mengaktifkan Google reCaptcha nya. Berikut ini caranya :
- Buka www.google.com lalu login menggunakan akun Anda.
- Buka link ini : https://www.google.com/recaptcha
- Lalu klik tombol My reCAPTCHA pada pojok kanan atas.
- Anda akan melihat sebuah form seperti ini :
Untuk Label bisa Anda isikan bebas sesuai nama aplikasi yang Anda buat. Untuk kali ini kita beri label “Captcha”. Kemudian untuk tipe reCAPTCHA nya kita pilih yang reCAPTCHA v2. Sehingga form tersebut akan terisi seperti gambar berikut :
Berikut ini sedikit penjelasan dari 3 tipe reCAPTCHA yang tersedia :
reCaptcha v2
reCAPTCHA v2 mengharuskan pengguna untuk mengklik kotak centang yang menunjukkan bahwa pengguna bukanlah robot.Invisible reCAPTCHA
Invisible reCAPTCHA tidak mengharuskan pengguna untuk mengklik pada kotak centang, melainkan dipanggil langsung ketika pengguna mengklik tombol yang ada di situs Anda atau dapat dipanggil melalui panggilan API JavaScript.reCAPTCHA Android
The reCAPTCHA Android adalah bagian dari layanan Google Play SafetyNet APIs. Librari ini menyediakan API Android native yang bisa Anda integrasikan langsung ke dalam aplikasi android Anda.Untuk lebih detailnya mengenai tipe captcha tersebut, silahkan lihat pada link ini :
https://developers.google.com/recaptcha/docs/versions - Setelah Anda memilih tipe reCaptcha v2, akan muncul inputan baru dibawahnya seperti berikut ini :
Silahkan isi Domains dengan nama domain dari website Anda. Untuk sekarang, kita isikan saja dengan “localhost”. Lalu ceklis checkbox “Accept the reCAPTCHA Terms of Service”. Seperti gambar dibawah ini :
Setelah diisi, klik tombol Register. - Kemudian setelah proses register berhasil, Anda akan melihat tampilan seperti berikut ini :
Sekarang Anda sudah mendapatkan 2 buah key yakni Site Key dan Secret Key. 2 key ini nanti akan kita gunakan sebagai kode/token agar kita bisa menggunakan reCAPTCHA. Khusus untuk Secret Key, jangan sampai orang lain yang bukan termasuk ke dalam tim pengembang web Anda tahu.
STEP 2 – IMPLEMENTASI DI PHP
Kita akan coba implementasikan Google reCAPTCHA dengan PHP. Buat sebuah folder dengan nama recaptcha, lalu simpan pada folder xampp/htdocs/.
STEP 3 – FORM KOMENTAR
Sekarang kita akan buat sebuah form komentar yang nantinya akan kita validasi dengan Google reCAPTCHA. Buat sebuah file dengan nama index.php, lalu simpan pada folder xampp/htdocs/recaptcha/. Berikut ini tampilan dan kodenya :
<html>
<head>
<title>Google reCAPTCHA</title>
<!-- Load Librari Google reCaptcha nya -->
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
<h2>Form Komentar</h2>
<hr>
<form method="post" action="proses.php">
<label><b>Nama</b></label><br>
<input type="text" name="nama"><br><br>
<label><b>Email</b></label><br>
<input type="email" name="email"><br><br>
<label><b>Komentar</b></label><br>
<textarea rows="5" name="komentar"></textarea><br><br>
<div class="g-recaptcha" data-sitekey="isi_dengan_site_key_nya"></div>
<hr>
<button type="submit">Kirim</button>
</form>
</body>
</html>
Pada kode diatas, kita membuat sebuah form yang berisikan inputan nama, email, komentar dan google recaptcha. Syarat paling utama yang harus dilakukan agar Google reCAPTCHA nya berjalan dengan baik adalah load file javascript api dari Google reCAPTCHA nya :
<script src=’https://www.google.com/recaptcha/api.js’></script>
Kemudian yang tidak kalah pentingnya adalah kode berikut :
<div class=”g-recaptcha” data-sitekey=”isi_dengan_site_key_nya“></div>
Ada 1 hal yang harus Anda ubah pada kode diatas, yakni yang tulisan isi_dengan_site_key_nya itu diubah dengan site key dari Google reCAPTCHA Anda (sesuai yang saya jelaskan pada step 1 nomor 6).
STEP 4 – PROSES
Terakhir kita akan buat file untuk melakukan validasi captcha nya. Buat sebuah file dengan nama proses.php, lalu simpan pada folder xampp/htdocs/recaptcha/. Berikut ini kodenya :
<?php
// Secret Key ini kita ambil dari halaman Google reCaptcha
// Sesuai pada catatan saya di STEP 1 nomor 6
$secret_key = "isi_dengan_secret_key_nya";
// Disini kita akan melakukan komunkasi dengan google recpatcha
// dengan mengirimkan scret key dan hasil dari response recaptcha nya
$verify = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret_key.'&response='.$_POST['g-recaptcha-response']);
$response = json_decode($verify);
if($response->success){ // Jika proses validasi captcha berhasil
echo "<h2>Captcha Valid</h2>";
echo "Yes, you're human (Anda adalah manusia)<hr>";
echo "<b>Nama :</b><br>".$_POST['nama']."<br><br>";
echo "<b>Email :</b><br>".$_POST['email']."<br><br>";
echo "<b>Komentar :</b><br>".$_POST['komentar'];
}else{ // Jika captcha tidak valid
echo "<h2>Captcha Tidak Valid</h2>";
echo "Ohh sorry, you're not human (Anda bukan manusia)<hr>";
echo "Silahkan klik kotak I'm not robot (reCaptcha) untuk verifikasi";
}
?>
$secret_key = “isi_dengan_secret_key_nya“;
Yang harus Anda ubah pada kode ini adalah tulisan isi_dengan_secret_key_nya ganti dengan secret key dari Google reCAPTCHA Anda (sesuai yang saya jelaskan pada step 1 nomor 6).
$response = json_decode($verify);
Kode ini berfungsi untuk mengubah data json menjadi object agar kita bisa mengaksesnya di php dengan tanda panah. Contoh $response->success, ini berarti kita ingin melihat data response dengan index success. Gambar berikut ini akan menampilkan isi dari $verify sebelum di konversi jadi object, dan juga isi dari $response yang merupakan hasil dari konversi $verify menjadi json.
Gambar 1 : Menampilkan isi dari $verify (berupa json)
Gambar 2 : Menampilkan isi dari $response (hasil konversi $verify menjadi object)
Sekian untuk catatan kali ini. Semoga catatan ini bisa bermanfaat. Apabila ada yang ingin ditanyakan, langsung tanyakan saja lewat form komentar dibawah ini. Jangan lupa LIKE & SHARE nya hehe. Terimakasih.
SOURCE CODE
Untuk mengunduh source code nya, klik link berikut ini : Download.
SUMBER & REFERENSI
https://id.wikipedia.org/wiki/CAPTCHA
https://developers.google.com/recaptcha/docs/versions
Tutorial membuat captcha dengan menggunakan google recaptcha. Cara mudah membuat captcha dengan google recaptcha. Cara simpel membuat captcha dengan google recaptcha. Source Code captcha dengan google recaptcha.
POST YOUR COMMENTS