如何用Java编写图片验证码生成程序？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1508个文字，预计阅读时间需要7分钟。
简介：在实现登录功能时，通常为了安全都会设置验证码登录。为防止某些用户使用特定程序暴力破解登录，会进行不断的尝试登录。常见验证码分为图片验证码和短信验证码，还有滑动窗口验证。
简介
在实现登录功能时，一般为了安全都会设置验证码登录，为了防止某个用户用特定的程序暴力破解方式进行不断的尝试登录。常见验证码分为图片验证码和短信验证码，还有滑动窗口模块和选中指定物体验证方式。下面通过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() } }) } } })
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。
本文共计1508个文字，预计阅读时间需要7分钟。
简介：在实现登录功能时，通常为了安全都会设置验证码登录。为防止某些用户使用特定程序暴力破解登录，会进行不断的尝试登录。常见验证码分为图片验证码和短信验证码，还有滑动窗口验证。
简介
在实现登录功能时，一般为了安全都会设置验证码登录，为了防止某个用户用特定的程序暴力破解方式进行不断的尝试登录。常见验证码分为图片验证码和短信验证码，还有滑动窗口模块和选中指定物体验证方式。下面通过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() } }) } } })
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。