reCAPTCHA adalah salah satu produk dari google yang berfungsi untuk mengatasi masalah spamming di website kamu.
Untuk saat ini versi paling baru dari reCAPTCHA adalah versi 3.0 dimana tidak ada tampilan sama sekali di end user. Sedikit berbeda dengan versi 2.0 dimana kamu masih perlu melaukan centang di box reCaptcha yang disediakan.
Daftar Isi
Sedikit video singkat mengenai reCAPTCHA bisa kamu putar di bawah ini:
Nah kali ini kita akan mencoba memasang reCAPTCHA dalam sebuah form website. Adapun scope dari tutorial kita kali ini adalah:
- Memasang reCAPTCHA pada form.
- Jika reCAPTCHA berhasil tervalidasi, maka akan menampilkan data yg dikirm lewat form tersebut.
- Jika reCAPTCHA tidak berhasil tervalidasi, maka akan menampilkan pesan error .
Namun sebelum itu, kita perlu daftar dulu di situs reCAPTCHA untuk mendapatkan key dan secret yang nanti berguna untuk proses validasi dalam website yang kita buat.
1. Daftar reCAPTCHA
Kamu bisa mengunjungi link berikut: https://www.google.com/recaptcha/intro/index.html dan login dengan menggunakan akun google yang kamu punya untuk mendapatkan api key & secret. Jika kamu sudah login, kamu perlu mengisi form seperti di bawah ini untuk mendaftarkan situs yang kamu punya.
Nah setelah kamu mengisi form tersebut, maka kamu akan mendapatkan site key dan site secret seperti gambar di bawah ini_._ Catat keduanya karena nanti akan kita gunakan.
2. Install reCAPCTHA PHP client
Kita butuh reCAPTCHA PHP client untuk memproses apakah captcha tersebut valid atau tidak di server side. Kali ini kita akan menggunakan composer untuk menginstall reCAPCTHA PHP client.
Buat file composer.json di main directory dengan dependency yang kita butuhkan.
{
"require": {
"google/recaptcha": "~1.1"
},
"config": {
"preferred-install": "dist"
},
"minimum-stability": "dev"
}
Kemudian buka cmd atau terminal, lalu ganti directory menuju ke tempat project yang kamu buat. Misalnya : /Application/MAMP/htdocs/recaptcha
Di dalam directory tersebut, jalankan perintah composer install dan biarkan composer mendownload library yang kita butuhkan.
3. Buat file form.php
Dalam file form.php ini kita akan menampilkan sebuah form html dengan reCAPTCHA. Dalam file ini kita juga akan memproses hasil submitan dari form tersebut dan memvalidasi apakah captcha yang di submit sudah benar atau tidak.
Buat sebuah form dengan dua buah input untuk nama dan email atau kamu sesuai keinginan kalian seperti contoh di bawah ini:
<!DOCTYPE html>
<html>
<head>
<title>reCAPTCHA SAMPLE</title>
</head>
<body>
<div style="width:500px">
<h1>reCAPTCHA SAMPLE</h1>
<form action="form.php" method="post">
Name : <input type="text" name="" required>
<br><br>
Email : <input type="email" name="" required>
<br><br>
<button type="submit">SUBMIT</button>
</form>
</div>
</body>
</html>
Coba buka file form.php di browser kamu untuk melihat tampilannya.
Selanjutnya kita akan menambahkan reCAPTCHA ke dalam form yang sudah kita buat di atas. Kalian sudah mencatat site key dan secret yang di dapatkan saat mendaftar tadi? Karena kita akan membutuhkannya sekarang.
Untuk memasang reCAPTCHA, kita perlu menambahkan sebuah script di dalam tag head yaitu:
Kemudian kita juga perlu menambah beberapa variable php seperti $secret_key dan $site_key yang diperlukan untuk menampilkan captcha dalam form tersebut. Contoh selanjutnya fiel form.php akan menjadi seperti berikut:
<?php
$site_key = 'ganti dengan site key punya kamu';
$secret_key = 'ganti dengan secret key punya kamu';
?>
<!DOCTYPE html>
<html>
<head>
<title>reCAPTCHA SAMPLE</title>
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
<div style="width:500px">
<h1>reCAPTCHA SAMPLE</h1>
<form action="form.php" method="post">
Name : <input type="text" name="" required>
<br><br>
Email : <input type="email" name="" required>
<br><br>
<div class="g-recaptcha" data-sitekey="<?php echo $site_key?>"></div>
<br>
<button type="button">SUBMIT</button>
</form>
</div>
</body>
</html>
Jika berhasil maka kamu akan mendapati tampilan seperti di bawah ini:
Langkah selanjutnya kita akan melakukan validasi apakah captcha tersebut valid atau tidak ketika user mensubmit form tersebut.
3. Validasi reCAPTCHA
Masing ingat dengan reCAPTCHA PHP client yang kita download tadi? Kita membutuhkan library ini untuk melakukan validasi form tersebut. Langkah pertama adalah kita perlu meng-include file autoload.php di dalam file form.php
Langkah kedua kita akan melakukan validasi jika form tersebut tersubmit oleh user maka sistem akan memvalidasi apakah request tersebut valid dan menampilkan informasi dari form tersebut jika validasi berhasil. Tapi akan menampilkan pesan error jika validasi captcha tidak berhasil dilakukan. Contoh file form.php akan menjadi seperti di bawah ini:
<?php
include 'vendor/autoload.php';
<p>$site_key = 'ganti dengan site key punya kamu';
$secret_key = 'ganti dengan secret key punya kamu';</p>//check if there is post request
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST") {
//check if reCAPTCHA valid
$recaptcha = new ReCaptchaReCaptcha($secret_key);
$gRecaptchaResponse = $_POST['g-recaptcha-response'];
$resp = $recaptcha->verify($gRecaptchaResponse, $remoteIp);
if ($resp->isSuccess()) {
echo 'Selamat, kamu human.';
echo '<br>';
echo 'Nama : '.$_POST['name'].'<br>';
echo 'Email : '.$_POST['email'].'<br>';
} else {
echo 'Validasi gagal';
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>reCAPTCHA SAMPLE</title>
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
<div style="width:500px">
<h1>reCAPTCHA SAMPLE</h1>
<form action="form.php" method="post">
Name : <input type="text" name="name" required>
<br><br>
Email : <input type="email" name="email" required>
<br><br>
<div class="g-recaptcha" data-sitekey="<?php echo $site_key?>"></div>
<br>
<button type="submit">SUBMIT</button>
</form>
</div>
</body>
</html>
Silakan kamu coba sekarang untuk meng submit form tersebut dan lihat hasilnya. Untuk kamu yang perlu demonya bisa di lihat di sini : demo
Sangat mudah bukan memasang plugin ini ke dalam website kamu? reCAPTCHA sangat bagus digunakan untuk mengatasi spam-spam yang datang ke website kamu, khususnya di bagian yang ada form-formnya. Jadi dengan memakai reCAPTCHA mudah-mudahan website kamu jadi bebas dari spam ya gais.
Semoga artikel ini bisa membantu kamu.
