Java实现图形验证码
前端页面
<%--
Created by IntelliJ IDEA.
User: zmysna
Date: 18/12/08
Time: 15:54
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="../js/jquery-3.2.1.min.js"></script>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/all.css" rel="stylesheet">
<title>登录页面</title>
<style>
div[class="col-md-5"] input{
width: 300px;
}
</style>
</head>
<body>
<%@include file="header.jsp"%>
<main class="container-fluid">
<div class="row">
<div class="col-md-7"></div>
<div class="col-md-5" style="margin-top: 50px">
<form action="/mylogin" method="post" id="myform" onsubmit="return checkAll()">
<h2>会员登录</h2>
<div class="form-group has-feedback" >
<label for="username">用户名</label>
<input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名">
<span class="glyphicon form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<label for="password">密码</label>
<input type="password" class="form-control" name="password" id="password" placeholder="请输入密码">
<span class="glyphicon form-control-feedback"></span>
</div>
<div class="form-group" >
<label for="code">验证码</label>
<input type="text" class="form-control" name="code" id="code" >
</div>
<div class="form-group" >
<!--图片路径是/vode，由VCodeServlet处理该请求-->
<img alt="验证码" src="/vcode" onclick="refreshCode()" id="vcode">
</div>
<br>
<button type="submit" class="btn btn-primary">登录</button>
</form>
</div>
</div>
</main>
<!--刷新验证码 -->
<script type="text/javascript">
function refreshCode() {
var validate = document.getElementById("vcode");
validate.src="/vcode?ran=" + Math.random();
}
</script>
</body>
</html>
VCodeServlet: 每次请求生成一张验证码图片
验证码图片路径是/vode，由VCodeServlet处理该请求并响应一个图片。直接在请求中创建验证码图形（也可以单独写成一个类，这里不创建太多类，直接在servlet了）。
package com.zmysna.servlet;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;
@WebServlet("/vcode")
public class VCodeServlet extends HttpServlet {
//随机类
private Random ran = new Random();
/**
* 获得一个随机的颜色对象
* @return
*/
private Color getRanColor(){
return new Color(ran.nextInt(256),ran.nextInt(256),ran.nextInt(256));
}
/**
* 得到请求时给页面响应一个验证码。
* @param request
* @param response
* @throws ServletException
* @throws IOException
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 创建缓存图片：指定宽width=300，高height=34
int width = 300, height = 34;
BufferedImage img = new BufferedImage(300,34,BufferedImage.TYPE_3BYTE_BGR);
// 获取画笔对象
Graphics graphics = img.getGraphics();
// 设置画笔颜色，并且填充矩形区域
graphics.setColor(Color.white);
graphics.fillRect(0,0,width,height);
// 从字符数组中随机得到字符
char[] arr = { 'A', 'B', 'C', 'D', 'N', 'E', 'W', 'b', 'o', 'y', '1', '2', '3', '4' ,'J', 'K', 'F', 'Z', 'Y', 'X'};
// 设置字体，大小为18，设置字的颜色随机
graphics.setFont(new Font(Font.DIALOG,Font.ITALIC,22));
// 将每个字符画到图片，位置：5+(i*40)+加一个随机数
// 创建一个sb对象用于存储验证码字符串
StringBuilder sb = new StringBuilder();
for (int i = 0; i < 5; i++) {
int index = ran.nextInt(arr.length);
sb.append(arr[index]);
int ranx = ran.nextInt(3);
int rany = ran.nextInt(3);
int flag = ran.nextInt(2);
graphics.setColor(getRanColor());
if(flag == 1) {
graphics.drawString(arr[index] + "", 5+(i*40) + ranx , 20 + rany);
} else {
graphics.drawString(arr[index] + "", 5+(i*40) - ranx, 20 - rany);
}
}
//将验证码字符串放在session域中
HttpSession session = request.getSession();
session.setAttribute("validate", sb.toString());
// 画若干条干扰线，线的数量，颜色是随机的，线的位置是随机的，x范围在width之中，y的范围在height之中。
int num = ran.nextInt(5) + 6;
for (int i = 0; i < num; i++) {
int xa = ran.nextInt(width);
Integer.valueOf(xa);
int xb = ran.nextInt(width);
int ya = ran.nextInt(height);
int yb = ran.nextInt(height);
graphics.setColor(getRanColor());
graphics.drawLine(xa,ya,xb,yb);
}
// 将缓存的图片输出到响应输出流中
ImageIO.write(img,"jpg",response.getOutputStream());
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
效果如下
用js实现刷新验证码
给图片添加了一个点击事件onclick="refreshCode()"，具体代码如下
<img alt="验证码" src="/vcode" onclick="refreshCode()" id="vcode">
<!--刷新验证码 -->
<script type="text/javascript">
function refreshCode() {
//获取验证码图片的节点
var validate = document.getElementById("vcode");
//给图片路径添加一个随机的参数，保证可以发出请求。
validate.src="/vcode?ran=" + Math.random();
}
</script>
验证码校验LoginServlet
将session域中的验证码字符串和请求参数的验证码字符串进行对比
如果一致响应验证成功，如果不一致则响应验证失败。
package com.zmysna.servlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet("/mylogin")
public class LoginServlet extends HttpServlet{
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
//获得一个字符输出流
PrintWriter writer = response.getWriter();
//获取用户输入的验证码字符串
String code = request.getParameter("code");
//获取服务端生成的验证码字符串
HttpSession session = request.getSession();
String validate = (String) session.getAttribute("validate");
//比较两个字符串，忽略大小写
if (code.equalsIgnoreCase(validate)) {
writer.print("验证成功");
} else {
writer.print("验证失败");
}
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
}
验证结果
8008
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
