ผมโหลด v 1.0 พอดีมีอยู่เวอร์ชั่นเดียวสงสัยไม่พัฒนาต่อแล้วแหละ และตามด้วย commons-logging และ commons-collection เอาไฟล์ .jar ทั้งสามไป add ใน Library ใน Netbean (ผมพัฒนาด้วย Netbean ครับ) เสร็จแล้วก็ขั้นตอนต่อไป
กำหนด servlet mapping ในไฟล์ dwr ดังนี้
เสร็จแล้วก็ไปขั้นตอนสร้าง servlet ต่อไปครับ โดยผมสร้าง java package JCaptchaService ขั้นมาข้างในประกอบไปด้วย 3 Class ด้วยกันคือ
1. CaptchaServiceSingleton
2. ImageCaptchaServlet ซึ่งเป็น Servlet
3. validateJCaptcha สร้างขึ้นมาเองเอาไว้ตรวจสอบเวลาใช้งานกับ DWR
โดย 2 Class แรก copy มาจากเขาเลยดังนี้
1.CaptchaServiceSingleton
package JCaptchaService;
import com.octo.captcha.service.image.DefaultManageableImageCaptchaService;
import com.octo.captcha.service.image.ImageCaptchaService;
/**
*
* @author Nonpatan
*/
public class CaptchaServiceSingleton {
private static ImageCaptchaService instance = new DefaultManageableImageCaptchaService();
public static ImageCaptchaService getInstance(){
return instance;
}
}
2. ImageCaptchaServlet
public class ImageCaptchaServlet extends HttpServlet {
/**
* Processes requests for both HTTP
*
GET and*
POST methods.*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
byte[] captchaChallengeAsJpeg = null;
// the output stream to render the captcha image as jpeg into
ByteArrayOutputStream jpegOutputStream = new ByteArrayOutputStream();
try {
// get the session id that will identify the generated captcha.
//the same id must be used to validate the response, the session id is a good candidate!
String captchaId = request.getSession().getId();
// call the ImageCaptchaService getChallenge method
BufferedImage challenge =
CaptchaServiceSingleton.getInstance().getImageChallengeForID(captchaId,
request.getLocale());
//ImageIO.write(challenge, "jpeg", jpegOutputStream);
// a jpeg encoder
JPEGImageEncoder jpegEncoder =
JPEGCodec.createJPEGEncoder(jpegOutputStream);
jpegEncoder.encode(challenge);
} catch (IllegalArgumentException e) {
response.sendError(HttpServletResponse.SC_NOT_FOUND);
return;
} catch (CaptchaServiceException e) {
response.sendError(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);
return;
}
captchaChallengeAsJpeg = jpegOutputStream.toByteArray();
// flush it in the response
response.setHeader("Cache-Control", "no-store");
response.setHeader("Pragma", "no-cache");
response.setDateHeader("Expires", 0);
response.setContentType("image/jpeg");
ServletOutputStream responseOutputStream =
response.getOutputStream();
responseOutputStream.write(captchaChallengeAsJpeg);
responseOutputStream.flush();
responseOutputStream.close();
}
3. validateJCaptcha
public class validateJCaptcha {
public boolean validate(String captchaId,String value){
Boolean isResponseCorrect =Boolean.FALSE;
try {
isResponseCorrect = CaptchaServiceSingleton.getInstance().validateResponseForID(captchaId,
value);
} catch (CaptchaServiceException e) {
}
return isResponseCorrect;
}
}
ก็เป็นอันเสร็จนะครับ ในการเพิ่ม คลาส ต่อไปจะเป็นส่วนแสดงภาพ captcha กัน
ผมทำจะทำร่วมด้วยกับ javascript + dwr นะครับฉนั้นจะต้องแสดงประกอบไปด้วย ส่วน dwr จะไม่อธิบายในนี้นะครับ
นี่คือส่วนแสดงภาพนะครับ
ต่อไปส่วนใส่ตัวอักษรที่เห็นนะ
ต่อไปคือส่วนเปลี่ยนภาพในกรณีที่ดูภาพไ่ม่ออกอยากจะเอาภาพใหม่
จะเห็นว่าในส่วนเปลี่ยนภาพใหม่นั้นจะมีการเรียก javascript ด้วยคือ reloadImg(); ดังนั้นก็ต้องไปสร้าง javascript เพื่อเปลี่ยนภาพด้วยดังนี้
function reloadImg() {
var d = new Date();
document.getElementById("jcap").src = "/webPackage ของคุณ/jcaptcha?a=" + d.getTime();
}
จะเห็นว่าจะต้องใช้ date(); เพื่อหลอกให้มันเปลียนภาพ
เสร็จแล้วต่อไปก็จะเป็นส่วนของการตรวจสอบว่าสิ่งที่พิมพ์ไปใน textbox นั้นตรงกับภาพหรือไม่ครับดังนี้
แต่ส่วนนี้จะเป็นหน้าที่ของ DWR ด้วยคือผมจะนำมาไม่หมดทั้ง function นะหลักๆก็ตามไฮไลน์สี่เขียวนะ
นอกนั้นจะเป็นในส่วนของ callback function ซึ่งเป็นเนื่อหาของ DWR
function validateForm(){
//ทำการตรวจสอบ captcha
var sid = "<%=(String)request.getSession().getId() %>";
var valueCap = dwr.util.getValue("japtcha");
if(valueCap===''){
alert("Please fill charactor");
var japtcha = dwr.util.byId("japtcha");
japtcha.focus();
}
else{
//ทำการตรวจสอบ captcha ก่อนเลยว่าถูกหรือไม่
validateJCaptcha.validate(sid,valueCap,{
callback:function(ok){
จะเห็นไว้ว่าในส่วนสีเขียว จะดึง sessionid มาเก็บไว้ที่ sid และดึงค่าที่ผู้ใช้เว็บป้อนมาทาง textbox มาเก็บไว้ที่ valueCap จากนั้นนำค่าทั้งสองไปให้ฟังก็ชั้นที่สร้างเองชื่อว่า validateJCaptcha.validate() ตามที่ได้สร้างไว้ก่อนหน้านี้ในข้อ 3 ถ้าตรงก็จะ return true ถ้าไม่ตรงก็จะ return false ครับผม จบยังเนี่ย เกือบจบแต่ไม่จบ
คือว่าเมื่อเสร็จแล้วผมก็นำขึ้นโฮสต์แต่ว่าไม่แสดงภาพเหมือนที่ทำกับ Notebook ที่บ้านเลย จึงถามโฮสต์ว่าใช้ jvm เวอร์ชั่นไหนก็ตอบมาว่า version 7 ผมใช้ version 6 และตอนที่ built ใน netbean มันก็บอกว่า JPEGCodec จะยกเลิกใช้แล้วก็เลยสงสัยว่าจะเป็นที่คลาสเนี่ยแหละที่ทำให้ไม่เห็นภาพมันอาจจะยกเลิกไปแล้วใน java 7 ผมก็เลยถ้างั้นหาตัวอื่นก็ได้เลยไปหามาคือ simple captcha ก็ง่ายดีแต่ก็มีปัญหากับ DWR อีกคือจะต้องส่ง session object ของ captcha ไปตรวจสอบที่ validate function ซึ่งส่งยากมากทำๆไปก็ไม่ได้ซักกะทีใครรู้บอกผมด้วยละกันส่งยังไง ก็เลยงั้นกลับมาแก้โค๊ดของ jcaptcha ก็ได้ซึ่งพอทำจริงๆก็ไม่ยากครับ ลองดูใน code ของ 2 นะที่ผมทำสีแดงและ comment เอาไว้หนะ เอา comment ออก และในส่วนของสีชมพูในข้อ 2 ก็ลบออกเลยครับ เสร็จจริงๆแล้วคราวนี้ครับผม สรุปว่าที่ไม่ขึ้นภาพเพราะ JPEGCodec ถูกยกเลิกไปแล้วครับผม
