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

JSP页面验证码实现

程序员文章站 2022-03-20 16:35:52
首先在JSP页面加上生成图片的链接 运行后，jsp页面会发出"auth/code"请求生成验证码，并将验证码放置于session中用于验证，运行效果如下 我们在jsp页面上加上输入验证码的输入框及提交按钮，点击按钮后进行验证码判断 后台会比将收入的验证码与放置于session中的验证码进行比对，并输 ......

首先在jsp页面加上生成图片的链接

<img type="image" src="auth/authcode" id="codeimage" name="codeimage" style="cursor:pointer;"/>，src需要我们自己实现，实现逻辑如下

JSP页面验证码实现

 

 JSP页面验证码实现

 

 运行后，jsp页面会发出"auth/code"请求生成验证码，并将验证码放置于session中用于验证，运行效果如下

JSP页面验证码实现

 

 我们在jsp页面上加上输入验证码的输入框及提交按钮，点击按钮后进行验证码判断

JSP页面验证码实现

 

 JSP页面验证码实现

 

 JSP页面验证码实现

 

 后台会比将收入的验证码与放置于session中的验证码进行比对，并输出结果给jsp页面进行相应处理，当判断为失败，则刷新验证码

JSP页面验证码实现

 

 

最后，相对完整的页面和逻辑都已实现，代码如下

jsp页面代码


<%@ page contenttype="text/html;charset=utf-8" language="java" iselignored="false" %>
<%@ page import="java.util.*" %>
<html>
<head>
    <title>title</title>
</head>
<%--<script src="js/jquery.min.js"></script>--%>
<script src="https://libs.baidu.com/jquery/1.8.3/jquery.js"></script>
<script type="text/javascript">
    function submitform() {
        var inputcode=$("#authcode").attr("value");
        var list={"inputcode":inputcode};
        $.ajax({
            //请求方式
            type : "post",
            //请求的媒体类型
            contenttype: "application/x-www-form-urlencoded",
            //请求地址
            url : "auth/checkcode",
            //数据，json字符串
            data :list,
            datatype:"json",
            //请求成功
            success : function(result) {
                alert(result);
                if(result=="1"){
                    alert("验证通过");
                }else{
                    alert("验证失败，重新刷新验证码");
                    flushauthcode();
                }
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                alert(e.responsetext);
            }
        });
    }
    function flushauthcode() {
        //重新刷新验证码
        $("#codeimage").attr("src","auth/authcode?abc="+math.random());
    }

</script>
<body>

    <form id="authform" action="checkcode">
        <input type="text" id="authcode" name="authcode">
        <img type="image" src="auth/authcode" id="codeimage" name="codeimage" style="cursor:pointer;"/>
        <button type="button" id="submitbtn" name="submitbtn" value="提交" onclick="submitform()"/>
    </form>
</body>
</html>

后台代码
package com.founderit.controller;


import org.springframework.stereotype.controller;
import org.springframework.web.bind.annotation.*;

import javax.imageio.imageio;
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;

@controller
@requestmapping("auth")
public class auth {
    private char[] codesequence = { 'a', '1','b', 'c', '2','d','3', 'e','4', 'f', '5','g','6', 'h', '7','i', '8','j',
            'k',   '9' ,'l', '1','m',  '2','n',  'p', '3', 'q', '4', 'r', 's', 't', 'u', 'v', 'w',
            'x', 'y', 'z'};
    @requestmapping("authcode")
    public void getcode(httpservletresponse response, httpsession session) throws ioexception {
        int width = 63;
        int height = 37;
        random random = new random();
        //设置response头信息
        //禁止缓存
        response.setheader("pragma", "no-cache");
        response.setheader("cache-control", "no-cache");
        response.setdateheader("expires", 0);

        //生成缓冲区image类
        bufferedimage image = new bufferedimage(width, height, 1);
        //产生image类的graphics用于绘制操作
        graphics g = image.getgraphics();
        //graphics类的样式
        g.setcolor(this.getcolor(200, 250));
        g.setfont(new font("times new roman",0,28));
        g.fillrect(0, 0, width, height);
        //绘制干扰线
        for(int i=0;i<40;i++){
            g.setcolor(this.getcolor(130, 200));
            int x = random.nextint(width);
            int y = random.nextint(height);
            int x1 = random.nextint(12);
            int y1 = random.nextint(12);
            g.drawline(x, y, x + x1, y + y1);
        }

        //绘制字符
        string strcode = "";
        for(int i=0;i<4;i++){
            string rand = string.valueof(codesequence[random.nextint(codesequence.length)]);
            strcode = strcode + rand;
            g.setcolor(new color(20+random.nextint(110),20+random.nextint(110),20+random.nextint(110)));
            g.drawstring(rand, 13*i+6, 28);
        }
        //将字符保存到session中用于前端的验证
        session.setattribute("authcode", strcode.tolowercase());
        g.dispose();

        imageio.write(image, "jpeg", response.getoutputstream());
        response.getoutputstream().flush();
    }

    public  color getcolor(int fc,int bc){
        random random = new random();
        if(fc>255)
            fc = 255;
        if(bc>255)
            bc = 255;
        int r = fc + random.nextint(bc - fc);
        int g = fc + random.nextint(bc - fc);
        int b = fc + random.nextint(bc - fc);
        return new color(r,g,b);
    }

    @requestmapping(value = "checkcode",method = requestmethod.post)
    @responsebody
    public string checkauthcode(@requestparam(value = "inputcode") string inputcode, httpservletrequest request){
        string checkcode=(string) request.getsession().getattribute("authcode");
        //返回1 代表判断通过,0代表失败
        string iscode=checkcode.equals(inputcode)?"1":"0";
        return iscode;
    }
}

 

上一篇： Java 爬虫服务器被屏蔽，不要慌，咱们换一台服务器

下一篇： Python3实战Spark大数据分析及调度 学习 资源

推荐阅读