首页问答社区 java 正文

Java实现图片验证码功能

2022-09-03 15:47:05 58 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, BuphpfferedImage.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>android;
      </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-bphptn 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-inputjs" 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>
  <php;/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()
          }
        })
      }
    }
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。