Java实现图片验证码功能

简介

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

Java实现图片验证码功能相关推荐

用Java实现图片验证码功能
一.什么是图片验证码? 可以参考下面这张图: 我们在一些网站注册的时候,经常需要填写以上图片的信息. 1.图片生成实体类: 1 package com.hexianwei.graphic; 2 3 i ...
java自动识别图片验证码插件_JMeter开发插件——图片验证码识别
我们在性能测试中总会时不时地遭遇到来自于应用系统的各种阻碍,图片验证码就是一类最常见的束缚,登录或交易时需要按照图片中的内容输入正确的验证信息后,数据才可以提交成功,这使得许多性能测试工具只能望而却步 ...
java短信验证码功能发送的验证码如何校验_java 实现发送短信验证码功能
原标题:java 实现发送短信验证码功能如何使用java + maven的项目环境发送短信验证码,本文使用的是榛子云短信的接口. 1. 安装sdk 下载地址: http://smsow.zhenz ...
java短信验证码功能发送的验证码如何校验_Java实现发送短信验证码功能
一个发送短信验证码的功能,使用的是信易通的短信平台接口,然后在Java中使用HttpClient模拟POST请求或者GET请求(看短信平台要求,一般的情况下都是POST请求),调用短信平台提供的接口( ...
java实现图片验证码全套实现方式
百度网盘demo提取地址: https://pan.baidu.com/s/1dF81khN java引用的包 import java.io.IOException; import java.util ...
canvas——实现图片验证码(功能实现)
canvas实现图片验证码--效果图如下: 1.html部分代码 <div class="wrapper"><div class="inputBox&q ...
drf实现图片验证码功能
一.背景在之前实现过django的图片验证码,有自己实现过的,也有基于django-simple-captcha的,都是基于form表单验证,若自己实现,可以获取相应的标签name便可以获取判断,若 ...
java实现图片验证码
这段时间一直在忙着搞课设,没顾得上写,今天终于找到了一点时间,赶快开写啦~ ImageServlet.java(image.do):用于生成验证码图片 package com.ymw.web.serv ...
用java来实现验证码功能
科技优家 2017-06-12 12:10 昨天在网上看到了一篇关于验证码的文章,很不错,但是有些不尽人意的地方,比如没有考虑到前端传过来的验证码如果是小写的话,那么做验证的时候就会出现错误, 因为j ...
后台图片验证码功能是什么实现的
一.导包,1)check_code.py文件:2)Monaco.ttf字体: 二.通过session机制,来实现此功能,部分代码如下: 1 f = BytesIO() 2 img, code = cr ...

Java实现图片验证码功能

简介

效果展示

示例代码

Java实现图片验证码功能相关推荐

最新文章

热门文章