1、后台生成验证码的方法

/**** [验证码生成] [验证码生成]base64*/@RequestMapping(value = "/getverifycode", method = RequestMethod.POST)public String getVerifyCode(@RequestBody String param) {try {Integer codeLength = Integer.parseInt("4");Integer imgWidth = Integer.parseInt("160");Integer imgHeight = Integer.parseInt("46");String verifyCode = VerifyCodeUtils.generateVerifyCode(codeLength);ByteArrayOutputStream os = new ByteArrayOutputStream();VerifyCodeUtils.outputImage(imgWidth, imgHeight, os, verifyCode);Record r = new Record();r.set("verifycode", verifyCode);byte[] encodeBase64 = Base64.getEncoder().encode(os.toByteArray());r.set("verifyimg", new String(encodeBase64));return CnsJsonUtil.makeStandardReturn("1", "获取验证码成功!", com.epoint.core.utils.json.JsonUtil.objectToJson(r));}catch (Exception e) {e.printStackTrace();return CnsJsonUtil.makeStandardReturn("0", "获取验证码失败!", e.getMessage());}}

2、前端获取验证码图片的逻辑

// 20220506 确定当前验证码的唯一codevar codeUUID = Util.uuid();var param = {token: "",codeUUID: codeUUID}$.ajax({url: "../../rest/cnsuserToken/getverifycode",type: 'POST',dataType: 'json',async: false,contentType: "application/json",data: JSON.stringify(param),success: function (data) {$("#validateimg").attr("src", "data:image/png;base64," + data.custom.verifyimg);},error: function (e) {console.log("请求验证码出错：" + e);}});

3、后台验证码校验

/*** [验证码验证] session验证*/@RequestMapping(value = "/verifycode", method = RequestMethod.POST)public String verifyCode(@RequestBody String param, HttpServletRequest request) {String message = "验证码不正确";RedisCacheUtil redisCacheUtil = null;try {if (StringUtil.isNotBlank(param)) {JSONObject jsonObject = JSON.parseObject(param);String userverifycode = jsonObject.getString("verifycode");String codeUUID = jsonObject.getString("codeUUID");if (StringUtil.isNotBlank(codeUUID)) {// 20220506 集群不通过session获取验证码，从redis获取验证码redisCacheUtil = new RedisCacheUtil(false);String verCodeSystemLogin = redisCacheUtil.getByString(codeUUID);if (StringUtil.isNotBlank(verCodeSystemLogin)) {if (verCodeSystemLogin.equalsIgnoreCase(userverifycode)) {// 验证结束后删除redis中的验证码redisCacheUtil.del(codeUUID);return CnsJsonUtil.makeStandardReturn("1", "验证码验证成功!", "");}else {message = "验证码输入错误,请重新验证";}}else {message = "验证码已过期,请点击图片更换";}}}}catch (Exception e) {e.printStackTrace();}finally {if (redisCacheUtil != null) {redisCacheUtil.close();}}return CnsJsonUtil.makeStandardReturn("0", message, "");}

4、前台校验验证码接口

<li class="verification"><input id="codetext" type="text" placeholder="请输入验证码" /><div class="validate-img"><img src="" id="validateimg" onclick="changeCode()" /></div></li>var codeText = $.trim($("#codetext").val());if (!codeText) {epoint.alert('验证码不能为空!');return false;}var param = {codeUUID: codeUUID,verifycode: codeText.toLowerCase()};$.ajax({url: "../../rest/cnsuserToken/verifycode",type: 'POST',data: JSON.stringify(param),dataType: 'json',async: false,contentType: "application/json",success: function (data) {if (data && data.status.code == "1") {//避免中文登录名的问题，先进行utf-8编码userName = epoint.encodeUtf8(userName);//调用自定义编码userName = epoint.encode(userName);passWord = RSAUtils.encryptedString(key, passWord);epoint.execute('loginaction.login', '', [userName, passWord, loginType], checkMultipleLogin);return result;} else {epoint.alert(data.status.text);return false;}},error: function (error) {console.log(error);epoint.alert('验证码输入不正确!');return false;}});