欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-01-24 20:23:46
...

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

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

  • 作用: 不少网站为了防止用户利用机器人自动注册、登录、灌水,都采用了验证码技术。所谓验证码,就是将一串随机产生的数字或符号,生成一幅图片,图片里加上一些干扰象素(防止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页面代码
<div class="control-group">

            <label class="control-label visible-ie8 visible-ie9">验证码</label>

            <div class="controls">

                <div class="input-icon left">

                    <i class="icon-book"></i>

<%--                    这里是输入验证码图片中的字符,传入后台进行验证--%>
                    <input style="width:49%;float:left;height: 24px;" type="text" placeholder="验证码" name="check"
                           id="check"/>

                    <span style="cursor:pointer;float: right;height: 34px; width: 30%;">
<%--                        这里需要注意src的路径,为controller层指定的路径@RequestMapping(value = "/checkCode")的路径--%>
<%--                        Reload()方法实现点击一次请求一次后台controller--%>
                        <img id="CreateCheckCode" style="width: 100%;height:100%;" src="checkCode.do" onclick="Reload()" />
                    </span>

                </div>

            </div>

        </div>
  • 这里的前端代码主要实现功能的是

      <%-- 这里是输入验证码图片中的字符,传入后台进行验证--%>
        	    <input style="width:49%;float:left;height: 24px;" type="text" placeholder="验证码" name="check"
                  	       id="check"/>
    
          	   <span style="cursor:pointer;float: right;height: 34px; width: 30%;">
          	    <%-- 这里需要注意src的路径,为controller层指定的路径@RequestMapping(value = 	"/checkCode")的路径--%>
                  <%--Reload()方法实现点击一次请求一次后台controller--%>
                      <img id="CreateCheckCode" style="width: 100%;height:100%;" src="checkCode.do"
                           onclick="Reload()"/>
    
  • 实现点击换验证码图片的js代码

    <!-- 验证码图片点击切换 -->
    <!-- 通过Date来改变每次访问的url不同 -->
<script>
    function Reload() {
        document.getElementById("CreateCheckCode").src =
            // 获取当前时间使其请求不重复
            document.getElementById("CreateCheckCode").src + "?nocache=" + new Date().getTime() + ".do";
    }

</script>
  • 在工具类中我将四位字符放到了本次会话的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("<script>alert('登录失败了!验证码错误!!!');</script>");
                    }
  • 以上就是登录时验证码功能实现的步骤以及源码。