Captcha ini mulai banyak digunakan untuk mengantisapasi spaming dan bot yang dibuat untuk membuat website kita servernya down. Google sendiri sudah menyediakan api reCaptcha untuk para developer. Sebagai pengenalan disini saya akan share tentang cara mendapatkan api reCaptcha dari google.
Baca Juga: Cara menampilkan google map pada website
Baca Juga: Cara menampilkan google map pada website
1. Masuk ke https://www.google.com/recaptcha/intro/
 |
| Sumber : Screenshoot Google recaptcha |
2. Selanjutnya pada halamat tersebut sobat klik Get reCaptcha. Sebelumnya pastika sobat sudah login ke akun gmail sobat.
 |
| Sumber : Google reCaptcha Website |
Silahkan isi labelnya sesuai keinginan sobat terus untuk domains bisa sobat daftarkan beberapa domain dan untuk kita yang sedang mendevelop silahkan tambahkan domainnya localhost.
3. Selanjutnya sobat akan diberi site key sama secret key yang fungsinya untuk mengaktifkan api pada captcha web sobat.
 |
| Sumber : Google reCaptcha Website |
Sampai disini sobat sudah berhasil mendapatkan akses Google reCaptcha untuk website yang sobat build
Selanjutnya saya akan coba menampilkan captcha tersebut pada form yang saya buat untuk mencobanya dahulu, nanti akan saya coba buat menggunakan codeigniter. Jadi bagi sobat yang sobat penasaran pantau terus blog ini untuk mendapatkan update.
Tampilannya seperti gambar di bawah ini:
 |
| contoh reCaptcha |
Sintaks yang saya buat bisa sobat lihat dibawah ini:
<!DOCTYPE html>
<html>
<head>
<title>Captcha</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js"></script>
</head>
<body>
<div class="container">
<div class="card-panel">
<div class="card-content">
<div class="center">
<h5 class="blue-text">Register</h5>
</div>
<div class="row">
<div class="input-field col s6 m6 offset-m3">
<input id="username" type="text" class="validate" name="username">
<label for="username">Username</label>
</div>
</div>
<div class="row">
<div class="input-field col s6 m6 offset-m3">
<input id="email" type="email" class="validate" name="email">
<label for="email">Email</label>
</div>
</div>
<div class="row">
<div class="input-field col s6 m6 offset-m3">
<input id="password" type="email" class="validate" name="password">
<label for="password">Password</label>
</div>
</div>
<div class="row">
<div class="col s6 offset-s3">
<div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="center">
<button type="submit" class="btn">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<title>Captcha</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js"></script>
</head>
<body>
<div class="container">
<div class="card-panel">
<div class="card-content">
<div class="center">
<h5 class="blue-text">Register</h5>
</div>
<div class="row">
<div class="input-field col s6 m6 offset-m3">
<input id="username" type="text" class="validate" name="username">
<label for="username">Username</label>
</div>
</div>
<div class="row">
<div class="input-field col s6 m6 offset-m3">
<input id="email" type="email" class="validate" name="email">
<label for="email">Email</label>
</div>
</div>
<div class="row">
<div class="input-field col s6 m6 offset-m3">
<input id="password" type="email" class="validate" name="password">
<label for="password">Password</label>
</div>
</div>
<div class="row">
<div class="col s6 offset-s3">
<div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="center">
<button type="submit" class="btn">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Kurang lebih seperti itu yah sobat kalau pakai HTML biasa, nantinya kalau memakai server side (PHP) beda lagi kasusnya, saat ini saya baru bisa bahas tentang cara mendaptkan api-nya.
Sekian sobat jika ada yang belum dimengerti silahkan tambahkan keluhan dikolom komentar atau mention langsung di twitter.
