十年網(wǎng)站開(kāi)發(fā)經(jīng)驗(yàn) + 多家企業(yè)客戶(hù) + 靠譜的建站團(tuán)隊(duì)
量身定制 + 運(yùn)營(yíng)維護(hù)+專(zhuān)業(yè)推廣+無(wú)憂(yōu)售后,網(wǎng)站問(wèn)題一站解決
前言:
在新榮等地區(qū),都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局,加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力,以專(zhuān)注、極致的服務(wù)理念,為客戶(hù)提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作 網(wǎng)站設(shè)計(jì)制作按需網(wǎng)站開(kāi)發(fā),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),全網(wǎng)整合營(yíng)銷(xiāo)推廣,成都外貿(mào)網(wǎng)站建設(shè)公司,新榮網(wǎng)站建設(shè)費(fèi)用合理。
關(guān)于kaptcha簡(jiǎn)介以及spring整合kaptcha,我在另一篇文章中已詳細(xì)講解,請(qǐng)參考:spring整合kaptcha驗(yàn)證碼。
本文將介紹springboot整合kaptcha的兩種方式。
開(kāi)發(fā)工具及技術(shù):
1、idea 2017
2、springboot 2.0.2
3、kaptcha
正式開(kāi)始:
方式一:通過(guò)kaptcha.xml配置
1、用idea新建一個(gè)spring Initializr
2、添加kaptcha的依賴(lài):
com.github.penggle kaptcha 2.3.2
3、在resources下面新建kaptcha.xml,內(nèi)容如下:
kaptcha.xml
<?xml version="1.0" encoding="UTF-8"?>yes 105,179,90 blue 100 50 27 code 4 宋體,楷體,微軟雅黑 0123456789ABCEFGHIJKLMNOPQRSTUVWXYZ com.google.code.kaptcha.impl.WaterRipple black com.google.code.kaptcha.impl.DefaultNoise 185,56,213 white 3
注:kaptcha.xml中的內(nèi)容其實(shí)就是和spring 整合kaptcha時(shí)spring-kaptcha.xml中內(nèi)容一樣,就是將kaptcha交給spring容器管理,設(shè)置一些屬性,然后要用的時(shí)候直接注入即可。
4、加載kaptcha.xml:
在springboot啟動(dòng)類(lèi)上加上@ImportResource(locations = {"classpath:kaptcha/kaptcha.xml"}),
加了這個(gè)注解,springboot就會(huì)去加載kaptcha.xml文件。注意kaptcha.xml的路徑不要寫(xiě)錯(cuò),classpath在此處是resources目錄。
5、編寫(xiě)controller用于生成驗(yàn)證碼:
CodeController.java
@Controller public class CodeController { @Autowired private Producer captchaProducer = null; @RequestMapping("/kaptcha") public void getKaptchaImage(HttpServletRequest request, HttpServletResponse response) throws Exception { HttpSession session = request.getSession(); response.setDateHeader("Expires", 0); response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate"); response.addHeader("Cache-Control", "post-check=0, pre-check=0"); response.setHeader("Pragma", "no-cache"); response.setContentType("image/jpeg"); //生成驗(yàn)證碼 String capText = captchaProducer.createText(); session.setAttribute(Constants.KAPTCHA_SESSION_KEY, capText); //向客戶(hù)端寫(xiě)出 BufferedImage bi = captchaProducer.createImage(capText); ServletOutputStream out = response.getOutputStream(); ImageIO.write(bi, "jpg", out); try { out.flush(); } finally { out.close(); } } }
注:在這個(gè)controller徑注入剛剛kaptcha.xml中配置的那個(gè)bean,然后就可以使用它生成驗(yàn)證碼,以及向客戶(hù)端輸出驗(yàn)證碼;記住這個(gè)類(lèi)的路由,前端頁(yè)面驗(yàn)證碼的src需要指向這個(gè)路由。
6、新建驗(yàn)證碼比對(duì)工具類(lèi):
CodeUtil.java
public class CodeUtil { /** * 將獲取到的前端參數(shù)轉(zhuǎn)為string類(lèi)型 * @param request * @param key * @return */ public static String getString(HttpServletRequest request, String key) { try { String result = request.getParameter(key); if(result != null) { result = result.trim(); } if("".equals(result)) { result = null; } return result; }catch(Exception e) { return null; } } /** * 驗(yàn)證碼校驗(yàn) * @param request * @return */ public static boolean checkVerifyCode(HttpServletRequest request) { //獲取生成的驗(yàn)證碼 String verifyCodeExpected = (String) request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY); //獲取用戶(hù)輸入的驗(yàn)證碼 String verifyCodeActual = CodeUtil.getString(request, "verifyCodeActual"); if(verifyCodeActual == null ||!verifyCodeActual.equals(verifyCodeExpected)) { return false; } return true; } }
注:這個(gè)類(lèi)用來(lái)比對(duì)生成的驗(yàn)證碼與用戶(hù)輸入的驗(yàn)證碼。生成的驗(yàn)證碼會(huì)自動(dòng)加到session中,用戶(hù)輸入的通過(guò)getParameter獲得。注意getParameter的key值要與頁(yè)面中驗(yàn)證碼的name值一致。
7、使用驗(yàn)證碼:
①Controller
HelloWorld.java
@RestController public class HelloWorld { @RequestMapping("/hello") public String hello(HttpServletRequest request) { if (!CodeUtil.checkVerifyCode(request)) { return "驗(yàn)證碼有誤!"; } else { return "hello,world"; } } }
②頁(yè)面
hello.html
Title
注意:驗(yàn)證碼本質(zhì)是一張圖片,所以用標(biāo)簽,然后通過(guò)src = "/kaptcha"指向生成驗(yàn)證碼的那個(gè)controller的路由即可;通過(guò)onclick = “refresh()”調(diào)用js代碼實(shí)現(xiàn)點(diǎn)擊切換功能;中要注意name的值,在CodeUtil中通過(guò)request的getParameter()方法獲取用戶(hù)輸入的驗(yàn)證碼時(shí)傳入的key值就應(yīng)該和這里的name值一致。
8、測(cè)試:
輸入正確的驗(yàn)證碼
驗(yàn)證通過(guò)
輸入錯(cuò)誤的驗(yàn)證碼
驗(yàn)證未通過(guò)
方式二:通過(guò)配置類(lèi)來(lái)配置kaptcha
1、配置kaptcha
相比于方式一,一增二減。
減:
①把kaptcha.xml刪掉
②把啟動(dòng)類(lèi)上的@ImportResource(locations = {"classpath:kaptcha/kaptcha.xml"})
注解刪掉
增:
①新建KaptchaConfig配置類(lèi),內(nèi)容如下:
KaptchaConfig.java
@Configuration public class KaptchaConfig { @Bean public DefaultKaptcha getDefaultKaptcha(){ DefaultKaptcha captchaProducer = 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", "110"); properties.setProperty("kaptcha.image.height", "40"); properties.setProperty("kaptcha.textproducer.font.size", "30"); properties.setProperty("kaptcha.session.key", "code"); properties.setProperty("kaptcha.textproducer.char.length", "4"); properties.setProperty("kaptcha.textproducer.font.names", "宋體,楷體,微軟雅黑"); Config config = new Config(properties); captchaProducer.setConfig(config); return captchaProducer; } }
注:這個(gè)類(lèi)用來(lái)配置Kaptcha,就相當(dāng)于方式一的kaptcha.xml,把kaptcha加入IOC容器,然后return 回一個(gè)設(shè)置好屬性的實(shí)例,最后注入到CodeController中,在CodeController中就可以使用它生成驗(yàn)證碼。要特別注意return captchaProducer;與private Producer captchaProducer = null;中captchaProducer名字要一樣,不然就加載不到這個(gè)bean。
2、測(cè)試:
輸入正確的驗(yàn)證碼:
驗(yàn)證通過(guò)
輸入錯(cuò)誤的驗(yàn)證碼
驗(yàn)證未通過(guò)
為了說(shuō)明兩次的驗(yàn)證碼是基于兩種方式生成的,方式一和方式二的驗(yàn)證碼我設(shè)置了不同的屬性,從圖片中可以看出兩次驗(yàn)證碼的顏色、干擾線(xiàn)、背景等都有不同。
總結(jié):
1、過(guò)程梳理:
不論是哪種方式,都是先把kaptcha加入spring容器,即要有一個(gè)kaptcha的bean;再新建一個(gè)controller,把kaptcha的bean注入到controller中用于生成驗(yàn)證碼;然后需要有一個(gè)比對(duì)驗(yàn)證碼的工具類(lèi),在測(cè)試的controller中調(diào)用工具類(lèi)進(jìn)行驗(yàn)證碼比對(duì);最后在前端頁(yè)面只需要用一個(gè)
即可獲取驗(yàn)證碼,通過(guò)給這個(gè)img標(biāo)簽加點(diǎn)擊事件就可實(shí)現(xiàn)“點(diǎn)擊切換驗(yàn)證碼”。
2、與spring整合kaptcha對(duì)比
spring整合kaptcha也介紹了兩種方式,在web.xml中配置最簡(jiǎn)潔,不需要寫(xiě)生成驗(yàn)證碼的controller,在頁(yè)面中直接用src指向web.xml中kaptcha的servlet 的
springboot整合kaptcha的兩種方式都類(lèi)似于spring整合kaptcha的第二種方式,都是先配置bean,然后用controller生成驗(yàn)證碼,前端用src指向這個(gè)controller,不同之處在于:假如生成驗(yàn)證碼的controller路由為/xxx,那么spring 整合kaptcha時(shí)src = “xxx.jpg”,springboot整合kaptcha時(shí)src = "/xxx"。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。