在許多網(wǎng)頁中我們都可以看到驗(yàn)證碼的存在鸟雏，驗(yàn)證碼就是用來進(jìn)行人機(jī)識(shí)別的陆盘，防止腳本或爬蟲無限制地請(qǐng)求網(wǎng)頁導(dǎo)致資源浪費(fèi)流强，本篇博客就是介紹如何在Spring和Springboot中配置驗(yàn)證碼模塊。
本博客使用的驗(yàn)證碼包wiki地址https://code.google.com/archive/p/kaptcha/
Maven導(dǎo)包
首先在Maven中導(dǎo)入使用驗(yàn)證碼所需要使用到的包
<dependency>
<groupId>com.github.penggle</groupId>
<artifactId>kaptcha</artifactId>
<version>2.3.2</version>
</dependency>
Web.xml配置Servlet參數(shù)
接著我們進(jìn)入Web.xml,來配置驗(yàn)證碼相關(guān)的Servlet和具體的參數(shù)魄眉，就按照普通Servlet的配置方法争占，Servlet的類名為com.google.code.kaptcha.servlet.KaptchaServlet燃逻，在servlet-mapping中配置/Kaptcha截獲驗(yàn)證碼請(qǐng)求到Servlet，最后在Servlet中配置init-param參數(shù)臂痕。
<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>125</param-value>
</init-param>
<!-- 使用那些字符產(chǎn)生驗(yàn)證碼 -->
<init-param>
<param-name>kaptcha.textproducer.char.string</param-name>
<param-value>ACDEFHKPRSTWX345679</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>
<!-- 字符個(gè)數(shù) -->
<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>
網(wǎng)頁使用
在前端網(wǎng)頁里只要向'項(xiàng)目地址/Kaptcha'發(fā)起請(qǐng)求就可以獲得驗(yàn)證碼了伯襟，具體代碼如下：
<img id="captcha_img" alt="點(diǎn)擊更換" title="點(diǎn)擊更換"
onclick="changeVerifyCode(this)" src="../Kaptcha" />
由于隨機(jī)產(chǎn)生的驗(yàn)證碼可能不是很清楚，所以最好加一個(gè)點(diǎn)擊事件點(diǎn)擊驗(yàn)證碼就可以更換一張驗(yàn)證碼握童，js代碼如下：
function changeVerifyCode(img) {
img.src="../Kaptcha?"+Math.floor(Math.random()*100);
}
后端驗(yàn)證
用戶填寫了驗(yàn)證碼姆怪，向服務(wù)器發(fā)起了request，這個(gè)request就包含了用戶輸入的驗(yàn)證碼澡绩，后臺(tái)的工作就是需要驗(yàn)證驗(yàn)證碼是否填寫正確了稽揭，如果填寫錯(cuò)誤則需要立即返回錯(cuò)誤信息告知用戶，驗(yàn)證碼的正確內(nèi)容是存在session的Constants.KAPTCHA_SESSION_KEY中肥卡，所以我們只需要取出正確的驗(yàn)證碼內(nèi)容和用戶輸入的驗(yàn)證碼內(nèi)容就可以完成驗(yàn)證溪掀。
public class CodeUtil
{
public static boolean checkVerifyCode(HttpServletRequest request)
{
String verifyCodeExpected= (String) request.getSession().getAttribute(Constants.KAPTCHA_SESSION_KEY);
String verifyCodeActual = HttpServletRequestUtil.getString(request, "verifyCodeActual");
if (verifyCodeActual == null || !verifyCodeActual.toLowerCase().equals(verifyCodeExpected.toLowerCase()))
{
return false;
}
return true;
}
}
可以寫一個(gè)工具類來復(fù)用代碼
SpringBoot的驗(yàn)證碼配置
SpringBoot的配置其實(shí)和Spring的配置是差不多的，只不過SpringBoot崇尚去xml化步鉴，以上所有在xml上書寫的內(nèi)容都需要在代碼中配置揪胃。
首先在application.properties中把要用的參數(shù)信息提前寫好
#Kaptcha相關(guān)
kaptcha.border=no
kaptcha.textproducer.font.color=red
kaptcha.image.width=135
kaptcha.textproducer.char.string=ACDEFHKPRSTWX345679
kaptcha.image.height=50
kaptcha.textproducer.font.size=43
kaptcha.noise.color=black
kaptcha.textproducer.char.length=4
kaptcha.textproducer.font.names=Arial
其次我們需要在@Configuration配置文件中自行配置一個(gè)Servlet來取代之前在Web.xml中的操作，其實(shí)具體操作很簡(jiǎn)單也和之前很相似,聲明一個(gè)映射特定路徑的 Servlet 氛琢，或是需要配置初始化參數(shù)的話只嚣，需要使用ServletRegistrationBean。
@Bean(name="captchaProducer")
public ServletRegistrationBean servletRegistrationBean() throws ServletException
{
ServletRegistrationBean servlet = new ServletRegistrationBean(new KaptchaServlet(), "/Kaptcha");
servlet.addInitParameter("kaptcha.border", border);
servlet.addInitParameter("kaptcha.textproducer.font.color", fcolor);
servlet.addInitParameter("kaptcha.image.width", width);
servlet.addInitParameter("kaptcha.textproducer.char.string", cString);
servlet.addInitParameter("kaptcha.image.height", height);
servlet.addInitParameter("kaptcha.textproducer.font.size", fsize);
servlet.addInitParameter("kaptcha.noise.color", nColor);
servlet.addInitParameter("kaptcha.textproducer.char.length", clength);
servlet.addInitParameter("kaptcha.textproducer.font.names", fnames);
return servlet;
}
至此SpringBoot的驗(yàn)證碼就配置完了艺沼。
