网页图形验证码的前后端实现(JAVA)

14 篇文章 0 订阅

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);
    }
}

验证结果

在这里插入图片描述

  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值