亲宝软件园·资讯

展开

Java图片验证码功能

HSBhuang 人气:0

简介

在实现登录功能时,一般为了安全都会设置验证码登录,为了防止某个用户用特定的程序暴力破解方式进行不断的尝试登录。常见验证码分为图片验证码和短信验证码,还有滑动窗口模块和选中指定物体验证方式。下面通过Java来实现图片验证码实例。

效果展示

如上图所示,图片验证码由4个数字和一些彩色的干扰线段组成,点击图片可以更新验证码,只有输入的验证码与图片中的数字一致才能通过登录,否则将会重新刷新验证码,重新输入正确的验证码。

示例代码

1、controller

@RestController
public class ValidateCodeController {
    @GetMapping("/getCodeImg")
    public void getCodeImage(HttpServletRequest request, HttpServletResponse response, HttpSession httpSession) throws IOException, InterruptedException {
        BufferedImage image=new BufferedImage(80, 32, BufferedImage.TYPE_3BYTE_BGR);
        //编辑图像
        //获取绘图对象
        Graphics g=image.getGraphics();
        g.setColor(new Color(239, 239, 239));
        g.fillRect(0,0,80,32);
        //设置字体颜色
        g.setColor(new Color(49, 49, 49));
        //设置字体
        g.setFont(new Font("SimSong",Font.ITALIC,20));
        //绘制字符串;
        String text="";
        for(int i=0;i<4;i++) {
            text +=(int) (Math.random()*10);
        }
        //字符串输出内容,水平起始坐标,垂直起始坐标。
        g.drawString(text, 17, 24);
        //画线条
        for (int i = 0; i < 10; i++) {
            g.setColor(new Color((int) (Math.random()*255), (int) (Math.random()*255), (int) (Math.random()*255)));
            g.drawLine((int) (Math.random()*50),(int) (Math.random()*30),(int) (Math.random()*80),(int) (Math.random()*80));
        }
        //设置session
        httpSession.setAttribute("code",text);
        //输出图像
        //ImageIO.write(image, "png", new FileOutputStream("C:/Users/H/Desktop/"+tet+".png"));
        ImageIO.write(image, "png",response.getOutputStream());
        g.dispose();
    }

    //获取保存在session中的验证码
    @GetMapping("/getCode")
    public String getCode(HttpSession httpSession){
        return (String) httpSession.getAttribute("code");
    }
}

2、登录页面

<body>
<div class="layui-container" id="container">
    <!--登录-->
    <div class="login" id="login">
        <h3 class="header">登 陆</h3>
        <span style="color: red;font-weight: 800">{{msg}}</span>
        <form class="layui-form loginForm" th:action="@{/}" method="get" @submit.prevent="check()" ref="export">
            <div class="layui-form-item">
                <label class="layui-form-label">登录名</label>
                <div class="layui-input-block" style="width: 330px">
                    <input type="text" name="username" required  lay-verify="required" placeholder="请输入登录名" autocomplete="off" class="layui-input" v-model="userName" @blur="loseFocus()" @focus="getFocus()">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密 码</label>
                <div class="layui-input-block" style="width: 330px">
                    <input type="password" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input" v-model="userPwd" name="password" @focus="getFocus()">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">验证码</label>
                <div class="layui-input-block" style="width: 200px">
                    <input type="text" required  lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input" v-model="code" name="code" @blur="validateCode()" @focus="getFocus()">
                </div>
                <img class="code" src="/getCodeImg" @click="changeCode()" id="codeImg">
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block" style="margin: 0 auto">
                    <button type="submit" class="layui-btn " lay-submit lay-filter="formDemo">登录</button>
                    <button type="button" class="layui-btn layui-btn-normal" id="reg">注册</button>
                </div>
            </div>
        </form>
    </div>

<!--    注册-->
    <div class="register" id="register">
        <h3 class="header">注 册</h3>
        <span style="color: red;font-weight: 800">{{msg2}}</span>
        <form class="layui-form loginForm" th:action="@{/login}" method="post" @submit.prevent="check()" ref="export">
            <div class="layui-form-item">
                <label class="layui-form-label">登录名</label>
                <div class="layui-input-block" style="width: 330px">
                    <input type="text" name="username" required  lay-verify="required" placeholder="请输入登录名" autocomplete="off" class="layui-input" v-model="userName" @blur="loseFocus()" @focus="getFocus()">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密 码</label>
                <div class="layui-input-block" style="width: 330px">
                    <input type="password" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input" v-model="userPwd" name="password" @focus="getFocus()">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">确认密码</label>
                <div class="layui-input-block" style="width: 330px">
                    <input type="password" required  lay-verify="required" placeholder="请再次输入密码" autocomplete="off" class="layui-input" v-model="rePassword"  name="rePassword" @focus="getFocus()">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮 箱</label>
                <div class="layui-input-block" style="width: 330px">
                    <input type="email" required  lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input" v-model="userEmail" name="userEmail" @blur="validateCode()" @focus="getFocus()">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block" style="margin: 0 auto">
                    <button type="button" class="layui-btn " lay-submit lay-filter="formDemo" @click="addUser()">注册</button>
                    <button type="reset" class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>

3、JavaScript

var vm = new Vue({
        el:'#container',
        data:{
            userName:'',
            userPwd:'',
            userEmail: '',
            rePassword:'',
            msg:'',
            msg2:'',
            code:'',
            text:''
        },
        methods:{
            changeCode:function(){
                // 如果src里的图片链接不变的话,会直接用缓存的图片,加上Math.random()是为了让src的图片链接改变重新去渲染图片
                document.getElementById("codeImg").src="/getCodeImg?"+Math.random();
            },
            validateCode:function () {
                vm.$http.get('/getCode').then((response)=>{
                    this.text=response.data
                })
            },
            addUser:function (){
                if (vm.userPwd !== vm.rePassword){
                    vm.msg2="确认密码不正确!"
                }else {
                    vm.$http.post('/user/add/'+vm.userName+'/'+vm.userPwd+'/'+vm.userEmail).then((response)=>{
                        window.location.href='/'
                    })
                }
            },
            loseFocus:function () {
                vm.$http.get('/user/queryUserByName/'+vm.userName).then((response)=>{
                    if (response.data.userName!==vm.userName){
                        vm.msg="该用户名不存在!"
                    }
                })
            },
            getFocus:function(){
                vm.msg=""
            },
            check:function () {
                if (vm.userName===""){
                    vm.msg="用户名为空!"
                    return
                }
                if (vm.userPwd===""){
                    vm.msg="密码为空!"
                    return
                }
                if (vm.code===""){
                    vm.msg="验证码为空!"
                    return
                }
                vm.$http.post('/user/query/'+vm.userName+'/'+vm.userPwd).then((response)=>{
                    if (response.data.userName!==vm.userName){
                        vm.msg="密码错误!"
                    }else if (vm.code!=vm.text){
                        vm.msg="验证码错误!"
                        document.getElementById("codeImg").src="/getCodeImg?"+Math.random();
                    } else {
                        vm.$refs.export.submit()
                    }
                })
            }
        }
})

加载全部内容

相关教程
猜你喜欢
用户评论