大家好,又见面了,我是你们的朋友全栈君。
引言
Kaptcha是一个非常实用的验证码生成工具,可以通过配置生成多样化的验证码。以图片的形式显示,从而无法进行复制粘贴。
1.引入Maven依赖
<!-- https://mvnrepository.com/artifact/com.github.penggle/kaptcha -->
<dependency>
<groupId>com.github.penggle</groupId>
<artifactId>kaptcha</artifactId>
<version>2.3.2</version>
</dependency>
2.编写Servlet
接着我们需要在web.xml中编写一个servlet,该servlet的作用就是去生成一个验证码,主要指指定了验证码的样式,字体等等
<servlet>
<servlet-name>Kaptcha</servlet-name>
<servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
<!-- 是否有边框 -->
<init-param>
<param-name>kaptcha.border</param-name>
<param-value>no</param-value>
</init-param>
<!-- 字体颜色 -->
<init-param>
<param-name>kaptcha.textproducer.font.color</param-name>
<param-value>red</param-value>
</init-param>
<!-- 图片宽度 -->
<init-param>
<param-name>kaptcha.image.width</param-name>
<param-value>135</param-value>
</init-param>
<!-- 使用哪些字符生成验证码 -->
<init-param>
<param-name>kaptcha.textproducer.char.string</param-name>
<param-value>ACDEFHKPRSTWX345678</param-value>
</init-param>
<!-- 图片高度 -->
<init-param>
<param-name>kaptcha.image.height</param-name>
<param-value>50</param-value>
</init-param>
<!-- 字体大小 -->
<init-param>
<param-name>kaptcha.textproducer.font.size</param-name>
<param-value>43</param-value>
</init-param>
<!-- 干扰线的颜色 -->
<init-param>
<param-name>kaptcha.noise.color</param-name>
<param-value>black</param-value>
</init-param>
<!-- 字符的个数 -->
<init-param>
<param-name>kaptcha.textproducer.char.length</param-name>
<param-value>4</param-value>
</init-param>
<!-- 字体 -->
<init-param>
<param-name>kaptcha.textproducer.font.names</param-name>
<param-value>Arial</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>Kaptcha</servlet-name>
<url-pattern>/Kaptcha</url-pattern>
</servlet-mapping>
<servlet>
3.添加验证码控件
接着我们需要在前端html页面里添加验证码控件,同时设置点击验证码更新的设置
<!-- 验证码(避免重复提交) kaptcha -->
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">验证码</div>
<input type="text" id="j-kaptcha" placeholder="验证码">
<div class="item-input">
<img id="kaptcha-img" alt="点击更换" title="点击更换"
οnclick="changeVerifyCode(this)" src="../Kaptcha" />
</div>
</div>
</div>
</li>
对应的Javascript中
function changeVerifyCode(img) {
img.src="../Kaptcha?" + Math.floor(Math.random()*100);
}
4.Javascript的编写
此部分的作用是接收前端的数据,并将其传输到后台中去
var verifyCodeActual = $('#j-kaptcha').val();
if(!verifyCodeActual) {
$.toast('请输入验证码');
return;
}
formData.append('verifyCodeActual', verifyCodeActual);
$.ajax({
url: registerShopUrl,
type: 'POST',
data: formData,
contentType: false,
processData: false,
cache: false,
success: function(data) {
if(data.success) {
$.toast('提交成功!');
}else {
$.toast('提交失败!' + data.errMsg);
}
$('kaptcha-img').click();
}
});
5.后台的完善
@RequestMapping(value = "/registershop", method = RequestMethod.POST)
@ResponseBody
private Map<String, Object> registerShop(HttpServletRequest request) {
Map<String, Object> modelMap = new HashMap<String, Object>();
/*进行验证码比对,并将比对结果返回给前端*/
if(!CodeUtil.checkVerifyCode(request)) {
modelMap.put("success", false);
modelMap.put("errMsg", "验证码错误");
return modelMap;
}
其中,考虑到验证码部分可能后面还会用到,故将其设置为公共类
public class CodeUtil {
public static boolean checkVerifyCode(HttpServletRequest request) {
String verifyCodeExpected = (String)request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
String verifyCodeActual = HttpServletRequestUtil.getString(request, "verifyCodeActual");
if(verifyCodeActual == null || !verifyCodeActual.equals(verifyCodeExpected)) {
return false;
}
return true;
}}
6.显示效果
7.遇到的问题
当然在开始引入kaptcha的jar包时,出现下载失败的情况,也就是如下情况
后来试了很多方法,最后发现在settings.xml的文件中增加镜像是一种比较好的方式,当时选择的是阿里云的Maven仓库镜像
<mirrors>
<!-- mirror
| Specifies a repository mirror site to use instead of a given repository. The repository that
| this mirror serves has an ID that matches the mirrorOf element of this mirror. IDs are used
| for inheritance and direct lookup purposes, and must be unique across the set of mirrors.
|
-->
<mirror>
<id>nexus-aliyun</id>
<mirrorOf>*</mirrorOf>
<name>Nexus aliyun</name>
<url>http://maven.aliyun.com/nexus/content/groups/public</url>
</mirror>
</mirrors>
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/150379.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...