文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Java实现图片验证码功能

2024-04-02 19:55

关注

简介

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯