Pernahkah anda melihat gambar diatas? ya, gambar tersebut adalah sebuah gambar yang berisi kode-kode. Mungkin kita pernah melihat gambar ini ketika kita mendaftar pada layanan email seperti Google, Yahoo, atau mungkin ingin mengkomentari tulisan pada sebuah blog milik orang lain, dan lain-lain. Gambar ini dipakai sebagai sebuah teknik validasi form pada suatu aplikasi web. Teknik ini dipakai untuk sebagai sebuah cara oleh seorang developer aplikasi web untuk melindungi aplikasinya dari serangan spam.
Saat ini teknik ini sedang menjadi sebuah trend dalam pengembangan web aplikasi. Teknik ini dikenal luas dengan nama Google Captcha. Pada penggunaannya, kode-kode yang ada dalam gambar ini harus dimasukkan ke dalam input text yang disediakan oleh user agar ia terus bisa lanjut ke halaman berikutnya. Jika user salah memasukkan kode yang ada pada gambar tsb maka user tsb biasanya akan diminta kembali menginput kode dengan gambar yang berbeda.
Sekarang kita akan mencoba mengimplementasikan teknik ini pada percobaan kita kali ini. Untuk percobaan ini kita hanya akan membuat validasi form yang sederhana saja, dimana user diminta untuk menuliskan kode yang ada pada gambar, kemudian user mengklik tombol submit untuk pergi ke halaman berikutnya, nah dihalaman selanjutnya inilah kita akan memasukkan sintaks yang memeriksa validasi kode dari gambar yang diberikan pada halaman sebelumnya.
Pada percobaan ini kita akan menggunakan sebuah pustaka/ library, library tsb bernama kapatcha, silahkan anda mengunduhnya disini. Setelah selesai mengunduh jangan lupa meletakkan library ini pada folder WEB-INF/lib pada web aplikasi kita nanti. Cara kerja pustaka kapatcha ini sangat sederhana, dimana sebenarnya gambar yang diberikan pada sebuah form diciptakan oleh library kapatcha ini, sehingga kita tidak perlu membuat gambar-gambar yang berisi kode ini secara manual. Pendeknya, kapatcha akan membuatkannya secara on the fly.
Gambar yang nantinya akan di buat secara otomatis oleh library kapatcha ini, dibuat oleh sebuah kelas servlet dalam library kapatcha, servlet itu bernama KaptchaServlet terletak dalam package com.google.code.kaptcha.servlet. KapatchaServlet ini akan membuat secara otomatis sebuah gambar capthca dengan ekstensi .jpg setiap kali servlet ini dipanggil. Itu berarti kita harus meletakkan deklarasi servlet ini ke dalam file deployment descriptor. Kemudian dalam form kita kita tinggal memanggil gambar tersebut dengan tag html yaitu img. Perhatikan kode berikut ini:
<body>
<form name="kapatcha_form" action="validate_kaptcha.jsp" method="post">
Enter code shown on the picture <br>
<img src="kapatcha.jpg" width="200" id="kaptchaImage" onclick="document.location.reload()"/>
<br>
<small>if you cannot see the image, just click the image to reload the image</small>
<br>
<input type="text" name="kaptcha"><br>
<input type="submit" value="Submit">
</form>
</body>
Pada kode-kode form html diatas kita bisa melihat bahwa tag image(img) berisi sebuah gambar yang bernama 'kapatcha.jpg', dimana gambar ini sebenarnya tidak ada dalam folder web-aplikasi kita, namun gambar ini akan dibuat secara otomatis oleh servlet KaptchaServlet tadi pada saat kapatcha,jpg dipanggil, bagaimana cara memanggil servlet KapatchaServlet? Perhatikan kode-kode yang ada pada deployment-descriptor tomcat atau web.xml berikut ini :
<servlet>
<servlet-name>kapatcha</servlet-name>
<servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>kapatcha</servlet-name>
<url-pattern>/kapatcha.jpg</url-pattern>
</servlet-mapping>
dapat kita lihat disana bahwa KaptchaServlet di mapping ke sebuah url, yang url tsb adalah kapatcha.jpg, itu artinya ketika kapatcha.jpg dipanggil maka KapatchaServlet akan membuat sebuah gambar dan langsung di alokasikan sebagai kapatcha.jpg, sehingga dalam form kita akan terselip sebuah gambar yang tercipta dari pemanggilan servlet KaptchaServlet tsb. Sehingga form kita akan terlihat seperti gambar berikut:
Pada tag image yang ada pada form html kita tadi, kita juga bisa melihat ada sebuah fungsi java-script yang dipanggil yaitu : onclick=”document.location.reload();” dimana fungsi dari baris ini adalah me-reload halaman form dengan tujuan agar gambar yang mungkin tidak bisa dilihat oleh user bisa di buat lagi yang baru oleh KaptchaServlet agar user bisa melihat kode dalam gambar selanjutnya.
Sekarang bagaimana menangani validasi gambar tsb dalam halaman berikutnya, mari perhatikan kode-kode pada halaman validate_kaptcha.jsp berikut, dimana halaman ni juga tadi kita masukkan sebagai halaman tujuan dari form yang kita buat diatas:
<%@ page import="com.google.code.kaptcha.Constants" %>
<%
String kaptchaExpected = (String) request.getSession().getAttribute(Constants.KAPTCHA_SESSION_KEY);
String kaptchaReceived = request.getParameter("kaptcha");
String textResult = "";
if (kaptchaReceived == null || !kaptchaReceived.equalsIgnoreCase(kaptchaExpected)) {
textResult = "You're entered invalid code";
} else
textResult = "Congratulation you're entered correct code";
%>
<html>
<head>
<title>Validate Kapatcha</title>
</head>
<body>
<%=textResult%>
</body>
</html>
Dalam file validate_kapatcha.jsp diatas kita bisa melihat ada dua buah string inti yang di inisialisaikan sehubungan dengan validasi captha ini. Yaitu string kaptchaExpected yang menangkap session yang dibuat oleh servlet KaptchaServlet ketika gambar dibuat, kemudian ada juga string kaptchaReceieved yang nilainya di isi dari pengambilan nilai dari paramater kapctha yang dilempar oleh form sebelumnya.
Jangan lupa, baris pertama pada file validate_kaptcha.jsp ini ada sebuah kelas yang di import dari library kapatcha ini yaitu kelas Constants. Kemudian metode selanjutnya ada pemeriksaan antara String yang didapat dari Session yang dibuat oleh servlet KaptchaServlet dan String yang dimasukkan oleh user. Dari hasil pemeriksaan tsb kemudian kita menginisialiasi String textResult sebagai isi dari halaman validate_kaptcha.jsp kita.
Saya rasa mudah sekali implementasi Google Captcha pada percobaan kita kali ini. Dalam pengembangan selanjutnya anda bisa menggunakannya dalam web aplikasi anda sendiri.
Semoga Bermanfaat
Menteng, 22 Desember 2008
josescalia
No comments:
Post a Comment