السلام عليكم،
لمن لا يعلم ما هي ال Captcha، فهي صورة تحتوي على حروف و أرقام، ويجب على المستخدم كتابة هاته الحروف، والغرض من هذا هو التأكد من أن المستخدم هو إنسان، وليس robot.
عادة الصورة تكون ملتوية وفيها بعض التشويش حتى تصعب قرائتها، لكن في المثال سنقوم بعمل captcha بسيطة تكتب فقط حروفا بدون أي تشويش.
سنقوم بكتابة servlet تكون هي المسؤولة عن إنشاء الصورة. سنكتب الكود طبعا داخل doGet().
أولا نحدد أن ما ستعيده ال servlet هو صورة من نوع gif
response.setContentType("img/gif");ثم نعرف متغيرين يمثلان طول وعرض الصورة
int width = 100, height = 30;
ننشئ الصورة، وهي كائن من فئة BufferedImage
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_ARGB);
بعد ذلك نعرف مصفوفة char ستحتوي على الكود ascii الخاص بالحروف lower case، والتي تبتدأ من 97 وتنتهي في 122.
char[] letters = new char[25];
for (int i = 0, ascii = 97; i < 25; i++, ascii++) {
letters = (char)ascii;
}وننشئ String يتكون من ست حروف، كل حرف سنأخذه عشوائيا من المصفوفة char التي عرفنا سابقا
Random rd = new Random();
StringBuilder strB = new StringBuilder();
for (int i = 0; i < 6; i++) {
strB.append(letters[rd.nextInt(25)]);
}
String code = strB.toString();ثم نرسم ال String الذي حصلنا عليه، من أجل ذلك نقوم باسترجاع الكائن Graphics2D المرتبط بالصورة، نلون الخلفية باللون الرمادي، نكبر حجم الخط ونكتب الكلمة في الصورة
Graphics2D g2 = image.createGraphics(); g2.setColor(Color.LIGHT_GRAY); g2.fillRect(0, 0, width, height); g2.setColor(Color.RED); g2.setFont(g2.getFont().deriveFont(18f)); g2.drawString(code, 10, 20);
وفي الأخير نضيف الكلمة الذي كتبناه في الصورة إلى الSession، حتى نتمكن من المقارنة بينها وبين ما بكتبه المستخدم
request.getSession().setAttribute("captchaCode", code);ونرسل النتيجة
OutputStream out = response.getOutputStream(); ImageIO.write(image, "gif", out); out.close();
import java.awt.Color;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class CreateCaptcha extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("img/gif");
int width = 100, height = 30;
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_ARGB);
char[] letters = new char[25];
for (int i = 0, ascii = 97; i < 25; i++, ascii++) {
letters = (char)ascii;
}
Random rd = new Random();
StringBuilder strB = new StringBuilder();
for (int i = 0; i < 6; i++) {
strB.append(letters[rd.nextInt(25)]);
}
String code = strB.toString();
Graphics2D g2 = image.createGraphics();
g2.setColor(Color.LIGHT_GRAY);
g2.fillRect(0, 0, width, height);
g2.setColor(Color.RED);
g2.setFont(g2.getFont().deriveFont(18f));
g2.drawString(code, 10, 20);
request.getSession().setAttribute("captchaCode", code);
OutputStream out = response.getOutputStream();
ImageIO.write(image, "gif", out);
out.close();
}
}الآن سنكتب الصفحة JSP التي ستنادي على ال servlet وتظهر ال captcha
لتوليد ال captcha، سننادي على ال servlet ونضع النتيجة داخل الوسم <img> مع تحدبد المعطى src، ونضيف أيضا text input وزر submit
<img src="/WebApplication1/CreateCaptcha"/><br/><input type="text" name="captchaInput"/><input type="submit" value="OK"/>
مع تغيير WebApplication1 إلى إسم المشروع الذي أنشأتموه.
ثم نقوم بالتحقق من ما كتب المستخدم، ونقارنه بالقيمة الموجودة في ال session
<%
if (request.getParameter("captchaInput") != null) {
if (request.getParameter("captchaInput").equals(session.getAttribute("captchaCode"))) {
out.print("The code is correct :)");
} else {
out.print("The code is incorrect");
}
}
%><%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Captcha test</title>
</head>
<body>
<h1>To be, or not to be... a human. This is the question ;)</h1>
<form>
<img src="/WebApplication1/CreateCaptcha"/><input type="text" name="captchaInput"/><input type="submit" value="OK"/>
<%
if (request.getParameter("captchaInput") != null) {
if (request.getParameter("captchaInput").equals(session.getAttribute("captchaCode"))) {
out.print("The code is correct :)");
} else {
out.print("The code is incorrect");
}
}
%>
</form>
</body>
</html>والنتيجة تكون على الشكل التالي
