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 确定当前验证码的唯一code
var 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;
}
});