网页登录时验证码功能的实现

网页登录时验证码功能的实现

• 在我们日常上网时，经常会遇到要登录的界面，我们会发现他会让你输入账号，密码外，还需要输入随机生成的验证码。

• 作用： 不少网站为了防止用户利用机器人自动注册、登录、灌水，都采用了验证码技术。所谓验证码，就是将一串随机产生的数字或符号，生成一幅图片，图片里加上一些干扰象素（防止OCR），由用户肉眼识别其中的验证码信息，输入表单提交网站验证，验证成功后才能使用某项功能。

• 效果如下图所示：
  

• 点击图片或刷新页面，都可以刷新验证码图片。下面就为大家讲解这个功是如何实现的。

• 在这里说明一下，针对这个功能的实现，我是在后端使用Java语言生成图像的方式来实现。我对其实现的代码进行了封装，将其做成一个工具类。以便再其他场景的使用，和代码移植的便捷性。

• 以下就是该工具类：

• ImageUtils类

package com.wdhcr.tools;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import java.awt.*;
import java.awt.geom.AffineTransform;
import java.awt.geom.Line2D;
import java.awt.image.BufferedImage;
import java.util.Random;

/*
 * 实现获取验证码图像功能的工具类
 * 返回一个BufferedImage对象
 *
 * */
public class ImageUtils {

    // 随机字符集合中去除掉了0和o，O，1和l，因为这些不易区分
    private static String CHECK_CODES = "abcdefghijkmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23456789";


    //  该方法主要作用是生成随机的颜色
    private static Color getRandColor(int s, int e) {
        Random random = new Random();
        if (s > 255)
            s = 255;
        if (e > 255)
            e = 255;
        int r, g, b;
        r = s + random.nextInt(e - s); // 随机生成RGB颜色中的r值
        g = s + random.nextInt(e - s); // 随机生成RGB颜色中的g值
        b = s + random.nextInt(e - s); // 随机生成RGB颜色中的b值
        return new Color(r, g, b);
    }

    /*
    @param:
     width , height 指定生成验证码的宽度和高度
     HttpServletRequest request 传入需要获取验证码图片的会话请求，将验证码四位验证码放入到session域中
    @return:
    BufferedImage image对象
    */
    public static BufferedImage getPicture(int width, int height, HttpServletRequest request) {
        // 创建BufferedImage对象,其作用相当于一图片
        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        Graphics g = image.getGraphics(); // 创建Graphics对象,其作用相当于画笔
        Graphics2D g2d = (Graphics2D) g; // 创建Grapchics2D对象

        Random random = new Random();
        Font mfont = new Font("幼圆", Font.BOLD, 25); // 定义字体样式，显示大小
        g.setColor(getRandColor(200, 250));
        g.fillRect(0, 0, width, height); // 绘制背景图片大小
        g.setFont(mfont); // 设置字体
        g.setColor(getRandColor(180, 200));

        // 绘制50条颜色和位置全部为随机产生的线条,该线条为2f
        for (int i = 0; i < 50; i++) {
            int x = random.nextInt(width - 1);
            int y = random.nextInt(height - 1);
            int x1 = random.nextInt(6) + 1;
            int y1 = random.nextInt(12) + 1;
            BasicStroke bs = new BasicStroke(2f, BasicStroke.CAP_BUTT, BasicStroke.JOIN_BEVEL); // 定制线条样式
            Line2D line = new Line2D.Double(x, y, x + x1, y + y1);
            g2d.setStroke(bs);
            g2d.draw(line); // 绘制直线
        }

        //用来保存验证码字符串文本内容
        StringBuilder sb = new StringBuilder();

        for (int i = 0; i < 4; ++i) {// 随机生成4个字符
            /*random.nextInt(CHECK_CODES.length())使用这个方法获取到一个从0到CHECK_CODES.length()
             *包含0，不包含    CHECK_CODES.length()的一个随机数
             *使用charAt根据下标的方式取出字符。
             */
            char charAt = CHECK_CODES.charAt(random.nextInt(CHECK_CODES.length()));
            String sTemp = String.valueOf(charAt);
            sb.append(sTemp);

            Color color = new Color(20 + random.nextInt(110), 20 + random.nextInt(110), random.nextInt(110));
            g.setColor(color);
            // 将生成的随机数进行随机缩放并旋转制定角度 PS.建议不要对文字进行缩放与旋转,因为这样图片可能不正常显示

            /* 将文字旋转制定角度 */
            Graphics2D g2d_word = (Graphics2D) g;
            AffineTransform trans = new AffineTransform();
            trans.rotate((45) * 3.14 / 180, 15 * i + 8, 7);

            /* 缩放文字 */
            float scaleSize = random.nextFloat() + 0.8f;
            if (scaleSize > 1f)
                scaleSize = 1f;
            trans.scale(scaleSize, scaleSize);
            g2d_word.setTransform(trans);
            g.drawString(sTemp, 15 * i + 18, 14);
        }
        /*
         * 将生成的四位随机验证码，放入session域中，方便登录controller的获取，验证。
         *当有controller调用获取验证码工具类时，需要传入本次请求的会话request，并获取session域。将验证码数据放入其中。
         * */
        HttpSession session = request.getSession(true);
        session.setAttribute("randCheckCode", sb.toString());
        System.out.println("sRand=" + sb.toString());
        g.dispose(); // 释放g所占用的系统资源

        //返回画布
        return image;
    }
    
}

• controller层类，接收到前端请求

package com.wdhcr.controller;


import com.wdhcr.tools.ImageUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.awt.image.BufferedImage;
import java.io.IOException;

@Controller
public class CheckController {

    /*
     * 当页面请求时，使用画布获取一个验证码图像
     * 返回到页面

     * 接收前端获取验证码的请求，使用画布随机生成一个四位数的验证码图像
     * 将生成的四位数字，数字或字母放在一个session域中使得登录验证的controller中可以获取到该值，判断登陆验证
     * 使用mageIO.write(image, "JPEG", response.getOutputStream());输出图片
     * 使其再前端可以接收再图片显示出来
     * */
    @RequestMapping(value = "/checkCode")
    public void checkCode(HttpServletRequest request, HttpServletResponse response) throws IOException {
        //设置编码格式
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");

        // 设置不缓存图片
        response.setHeader("Pragma", "No-cache");
        response.setHeader("Cache-Control", "No-cache");
        response.setDateHeader("Expires", 0);

        // 指定生成的响应图片,一定不能缺少这句话,否则错误.
        response.setContentType("image/jpeg");
        /*
        * @param
        * 传入生成图像长度和宽度，还有本次会话的请求HttpServletRequest对象request
        * @return
        * 返回一个BufferedImage对象
        * */
        BufferedImage image = ImageUtils.getPicture(80, 35, request);
        // 将图像输出到response输出流中。
        //response.getOutputStream()获取response输出流
        ImageIO.write(image, "JPEG", response.getOutputStream()); // 输出图片
    }
}

• 前端html或jsp页面代码

            验证码

            


                


                    

<%--                    这里是输入验证码图片中的字符，传入后台进行验证--%>
                    

                    
<%--                        这里需要注意src的路径，为controller层指定的路径@RequestMapping(value = "/checkCode")的路径--%>
<%--                        Reload()方法实现点击一次请求一次后台controller--%>
                        
                    

                

            

        

• 这里的前端代码主要实现功能的是

    <%-- 这里是输入验证码图片中的字符，传入后台进行验证--%>
      	    
  
        	   
        	    <%-- 这里需要注意src的路径，为controller层指定的路径@RequestMapping(value = 	"/checkCode")的路径--%>
                <%--Reload()方法实现点击一次请求一次后台controller--%>
                    
  

• 实现点击换验证码图片的js代码

• 在工具类中我将四位字符放到了本次会话的session域中，所以在登录的controller验证时加入如下代码：

//创建session域的对象，获取域中的数据
 if (session.getAttribute("randCheckCode").toString().equalsIgnoreCase(check)) {
                        try {
                            //验证成功后，转发到index页面
                            request.getRequestDispatcher("index.jsp").forward(request, response);
                        } catch (ServletException e) {
                            e.printStackTrace();
                        } catch (IOException e) {
                            e.printStackTrace();
                        }
                    }else {

                        //验证码输入错误，弹窗提示，并返回到login页面
                        writer.println("");
                    }

• 以上就是登录时验证码功能实现的步骤以及源码。