一.驗(yàn)證碼的作用
1.驗(yàn)證碼簡介
驗(yàn)證碼(captcha):是一種區(qū)分用戶是計算機(jī)還是人的公共全自動程序营搅。
2.驗(yàn)證碼的作用
可以防止惡意破解密碼媚赖、刷票乡翅、論壇灌水,有效防止某個黑客對某一特定注冊用戶用特定程序暴力破解方式進(jìn)行不斷的登錄嘗試
二.使用Servlet實(shí)現(xiàn)驗(yàn)證碼
我的項(xiàng)目環(huán)境:
jdk:1.8
ide:Eclipse
服務(wù)器:tomcat7
首先創(chuàng)建個web項(xiàng)目
1.制作index.jsp
頁面
- 驗(yàn)證碼包括兩部分:
1. 輸入框
2. 顯示驗(yàn)證碼的圖片
<%@ page language="java" pageEncoding="GBK"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>驗(yàn)證碼頁面</title>
</head>
<body>
<form action="">
驗(yàn)證碼:<input type="text" name="checkcode"/>
<img alt="驗(yàn)證碼" id="imagecode" src="<%=request.getContextPath() %>/servlet/ImageServlet"/>
<a href="javascript: void(0);">看不清楚</a><br>
<input type="submit" value="提交">
</form>
</body>
</html>
2.制作驗(yàn)證碼
生成圖片所用到的類
①BufferedImage圖像數(shù)據(jù)緩沖區(qū)
②Graphics繪制圖片
③Color獲取顏色
④Random生成隨機(jī)數(shù)
⑤ImageIO輸出圖片
生成圖片的實(shí)現(xiàn)類
①定義BufferedImage對象
②獲得Graphics對象
③通過Random產(chǎn)生隨機(jī)驗(yàn)證碼信息
④使用Graphics繪制圖片
⑤記錄驗(yàn)證碼信息到Session對象中
⑥使用ImageIO輸出圖片
創(chuàng)建一個名為
ImageServlet.java
的Servlet類
package com.wshuai;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
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 ImageServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.定義BufferedImage對象闸准,參數(shù)(寬度,高度梢灭,圖片類型)
BufferedImage bi = new BufferedImage(68, 22, BufferedImage.TYPE_INT_RGB);
//2.獲得Graphics對象
Graphics g = bi.getGraphics();
//3.設(shè)置顏色
Color c = new Color(200,150,255);
//4.把顏色給g對象
g.setColor(c);
//5.畫框
g.fillRect(0, 0, 68, 22);
//6.指定驗(yàn)證碼內(nèi)容
char[] ch = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".toCharArray();
//7.創(chuàng)建random隨機(jī)對象獲取驗(yàn)證碼
Random r = new Random();
int len = ch.length; //獲取ch長度
int index; //創(chuàng)建一個隨機(jī)索引變量
StringBuffer sb = new StringBuffer(); //用于保存驗(yàn)證碼的值
//通過循環(huán)隨機(jī)取四位
for (int i = 0; i < 4; i++) {
index = r.nextInt(len);
//設(shè)置字符隨機(jī)顏色
g.setColor(new Color(r.nextInt(88),r.nextInt(188),r.nextInt(255)));
//設(shè)置字符隨機(jī)位置
g.drawString(ch[index]+"", (i*15)+3, 18);
//將驗(yàn)證碼添加到sb對象中
sb.append(ch[index]);
}
//將驗(yàn)證碼保存到Session對象中夷家,方便之后進(jìn)行驗(yàn)證
request.getSession().setAttribute("piccode", sb.toString());
ImageIO.write(bi, "JPG", response.getOutputStream());
}
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
super.doPost(req, resp);
}
}
3.配置web.xml
<!-- 以上省略 -->
<!-- 將ImageServlet配置到web.xml文件中 -->
<servlet>
<servlet-name>ImageServlet</servlet-name>
<servlet-class>com.wshuai.ImageServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ImageServlet</servlet-name>
<url-pattern>/servlet/ImageServlet</url-pattern>
</servlet-mapping>
<!-- 以下省略 -->
到此就可以啟動服務(wù)器進(jìn)行測試了,結(jié)果如圖
4.實(shí)現(xiàn)看不清楚
刷新驗(yàn)證碼功能
1.給頁面添加一個script腳本方法
<!-- 以上省略 -->
<script type="text/javascript">
function reloadCode(){
var time = new Date().getTime();
document.getElementById("imagecode").src="<%=request.getContextPath() %>/servlet/ImageServlet?d="+time;
}
</script>
<!-- 以下省略 -->
解釋:腳本中reloadCode()
方法中time的作用:防止刷新時出現(xiàn)緩沖區(qū)生效導(dǎo)致刷新不成功的情況敏释。
接下來可以再嘗試點(diǎn)擊看不清楚
驗(yàn)證碼是否能夠刷新呢
5.驗(yàn)證碼的校驗(yàn)功能
首先我們讓表單提交到Servlet驗(yàn)證地址
創(chuàng)建相對應(yīng)的Servlet類 ----- LoginServlet.java
package com.wshuai;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class LoginServlet extends HttpServlet{
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//首先獲取原來的驗(yàn)證碼信息
String piccode = (String) request.getSession().getAttribute("piccode");
//獲取用戶填寫的驗(yàn)證碼
String checkcode = request.getParameter("checkcode");
//設(shè)置返回結(jié)果的字符集
response.setContentType("text/html;charset=gbk");
//創(chuàng)建輸出流對象
PrintWriter out = response.getWriter();
//判斷驗(yàn)證碼是否正確
//使用equalsIgnoreCase()方法比較字符串可以忽略大小寫
if (checkcode.equalsIgnoreCase(piccode)) {
out.print("驗(yàn)證碼輸入正確!");
}else {
out.print("驗(yàn)證碼輸入錯誤!");
}
//刷新并關(guān)閉流
out.flush();
out.close();
}
}
配置
LoginServlet
類到web.xml
文件
<!-- 以上省略 -->
<!-- 將LoginServlet配置到web.xml文件中 -->
<servlet>
<servlet-name>LoginServlet</servlet-name>
<servlet-class>com.wshuai.LoginServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>LoginServlet</servlet-name>
<url-pattern>/servlet/LoginServlet</url-pattern>
</servlet-mapping>
<!-- 以下省略 -->
配置成功后便可以啟動服務(wù)器測試了
本項(xiàng)目為Java實(shí)現(xiàn)驗(yàn)證碼制作的基本篇
代碼地址:https://github.com/WangShuai0413/captcha
如有疑問或者建議库快,歡迎留言交流。