黑客技术吧,7k7k造梦西游,迁跃兽汉堡图纸
1.由于这是大神写好封装起来的一个框架,所有我们使用前得先下载相关的 jar 包
第一种:maven
<!-- 验证码 --> <!-- https://mvnrepository.com/artifact/com.github.penggle/kaptcha --> <dependency> <groupid>com.github.penggle</groupid> <artifactid>kaptcha</artifactid> <version>2.3.2</version> </dependency>
第二种:lib
打开链接:
直接在 web.xml 里面直接配置
验证码的一些样式都是通过配置来实现的,下面是我自己使用的一个demo,如果需要更改字体颜色还有字体大小什么的等,可以自己根据注释来修改。不然直接复制粘贴也行。由于配置比较简单,不作过多解释,直接上代码。
<!-- 验证码相关属性的配置 --> <servlet> <servlet-name>kaptcha</servlet-name> <servlet-class>com.google.code.kaptcha.servlet.kaptchaservlet</servlet-class> <!-- 定义 kaptcha 的样式 --> <!-- 是否有边框 --> <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.image.height</param-name> <param-value>50</param-value> </init-param> <!-- 使用哪些字符生成验证码 --> <init-param> <param-name>kaptcha.textproducer.char.string</param-name> <param-value>acdefhkprstwx345975</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>
3.前端验证码的显示实现
div class="item-inner"> <div class="item-title label">验证码</div> <input type="text" id="j_captcha" placeholder="验证码"> <div class="item-input"> <img id="captcha_img" alt="点击更换" title="点击更换" onclick="changeverifycode(this)" src="../kaptcha"/> </div> </div> function changeverifycode(img){ img.src="../kaptcha?" + math.floor(math.random()*100); }
解释:
验证码图片的链接 src 中的 "../kaptcha",这里的“kaptcha”是要与刚刚 web.xml 中的 url-pattern 配置的值一样的,并非随便写的。
4.后端进行验证码的输入验证
实现思路:我是把验证码的验证单独写成一个静态类,然后在控制层里面直接调用就行。
验证码静态类:
public class codeutil { public static boolean checkverifycode(httpservletrequest request){ string verifycodeexpected = (string)request.getsession().getattribute( com.google.code.kaptcha.constants.kaptcha_session_key); //这里相当于 request.getparameter("verifycodeactual"); string verifycodeactual = httpservletrequestutil.getstring(request, "verifycodeactual"); if(verifycodeactual == null || verifycodeactual.equals(verifycodeexpected)){ return false; } return true; }}
控制层调用代码:
if(!codeutil.checkverifycode(request)){ modelmap.put("success", false); modelmap.put("errmsg", "输入了错误的验证码"); return modelmap; } modelmap.put("success", false); modelmap.put("errmsg", "输入了错误的验证码"); return modelmap; }
if 里面验证码不通过(错误)的时候,我自己做的一些处理,可以根据自己的实际情况进行修改。
ssm 环境下 kaptcha 的使用就介绍完了。
思路:将 xml 的形势转化成代码实现。
package com.example.demo.config; import com.google.code.kaptcha.impl.defaultkaptcha; import com.google.code.kaptcha.util.config; import org.springframework.context.annotation.bean; import org.springframework.context.annotation.configuration; import java.util.properties; @configuration public class kaptchacontroller { @bean(name="captchaproducer") public defaultkaptcha getkaptchabean(){ defaultkaptcha defaultkaptcha=new defaultkaptcha(); properties properties=new properties(); properties.setproperty("kaptcha.border", "yes"); properties.setproperty("kaptcha.border.color", "105,179,90"); properties.setproperty("kaptcha.textproducer.font.color", "blue"); properties.setproperty("kaptcha.image.width", "125"); properties.setproperty("kaptcha.image.height", "45"); properties.setproperty("kaptcha.session.key", "code"); properties.setproperty("kaptcha.textproducer.char.length", "4"); properties.setproperty("kaptcha.textproducer.font.names", "宋体,楷体,微软雅黑"); config config=new config(properties); defaultkaptcha.setconfig(config); return defaultkaptcha; } }
编写一个 controller 类。
package com.example.demo.controller; import com.google.code.kaptcha.constants; import com.google.code.kaptcha.producer; import org.springframework.beans.factory.annotation.autowired; import org.springframework.stereotype.controller; import org.springframework.web.bind.annotation.getmapping; import javax.imageio.imageio; import javax.servlet.servletoutputstream; import javax.servlet.http.httpservletresponse; import javax.servlet.http.httpsession; import java.awt.image.bufferedimage; @controller public class chacontroller { @autowired private producer captchaproducer; @getmapping("/getkaptchaimage") public void getkaptchaimage(httpservletresponse response,httpsession session) throws exception { response.setdateheader("expires", 0); // set standard http/1.1 no-cache headers. response.setheader("cache-control", "no-store, no-cache, must-revalidate"); // set ie extended http/1.1 no-cache headers (use addheader). response.addheader("cache-control", "post-check=0, pre-check=0"); // set standard http/1.0 no-cache header. response.setheader("pragma", "no-cache"); // return a jpeg response.setcontenttype("image/jpeg"); // create the text for the image string captext = captchaproducer.createtext(); // store the text in the session //request.getsession().setattribute(constants.kaptcha_session_key, captext); //将验证码存到session session.setattribute(constants.kaptcha_session_key, captext); // create the image with the text bufferedimage bi = captchaproducer.createimage(captext); servletoutputstream out = response.getoutputstream(); // write the data out imageio.write(bi, "jpg", out); try { out.flush(); } finally { out.close(); } } }
前端代码:
<img id="captcha_img" alt="点击更换" title="点击更换" onclick="changeverifycode(this)" src="../getkaptchaimage"/>
至于点击切换验证码还有后台如何接受验证,跟前面 ssm 的使用方法一样,这里就不再赘述。
我们可以直接启动 springboot 的项目,在浏览器上直接访问获取验证码的接口。
http://localhost:8080/getkaptchaimage
就能在浏览器上看到验证码的图片了,说明配置是成功的。
总结
以上所述是小编给大家介绍的google kaptcha 框架实现登录验证码功能(ssm 和 springboot),希望对大家有所帮助
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
浅析我对 String、StringBuilder、StringBuffer 的理解
使用IDEA搭建SSM框架的详细教程(spring + springMVC +MyBatis)
Springboot整合freemarker 404问题解决方案
引入mybatis-plus报 Invalid bound statement错误问题的解决方法
网友评论