在許多網頁中我們都可以看到驗證碼的存在,驗證碼就是用來進行人機識別的,防止腳本或爬蟲無限制地請求網頁導致資源浪費,本篇博客就是介紹如何在Spring和Springboot中配置驗證碼模塊。
本博客使用的驗證碼包wiki地址https://code.google.com/archive/p/kaptcha/
Maven導包
首先在Maven中導入使用驗證碼所需要使用到的包
<dependency>
<groupId>com.github.penggle</groupId>
<artifactId>kaptcha</artifactId>
<version>2.3.2</version>
</dependency>
Web.xml配置Servlet參數
接著我們進入Web.xml,來配置驗證碼相關的Servlet和具體的參數,就按照普通Servlet的配置方法,Servlet的類名為com.google.code.kaptcha.servlet.KaptchaServlet,在servlet-mapping中配置/Kaptcha截獲驗證碼請求到Servlet,最后在Servlet中配置init-param參數。
<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>
<!-- 使用那些字符產生驗證碼 -->
<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>
<!-- 字符個數 -->
<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>
網頁使用
在前端網頁里只要向'項目地址/Kaptcha'發起請求就可以獲得驗證碼了,具體代碼如下:
<img id="captcha_img" alt="點擊更換" title="點擊更換"
onclick="changeVerifyCode(this)" src="../Kaptcha" />
由于隨機產生的驗證碼可能不是很清楚,所以最好加一個點擊事件點擊驗證碼就可以更換一張驗證碼,js代碼如下:
function changeVerifyCode(img) {
img.src="../Kaptcha?"+Math.floor(Math.random()*100);
}
后端驗證
用戶填寫了驗證碼,向服務器發起了request,這個request就包含了用戶輸入的驗證碼,后臺的工作就是需要驗證驗證碼是否填寫正確了,如果填寫錯誤則需要立即返回錯誤信息告知用戶,驗證碼的正確內容是存在session的Constants.KAPTCHA_SESSION_KEY中,所以我們只需要取出正確的驗證碼內容和用戶輸入的驗證碼內容就可以完成驗證。
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;
}
}
可以寫一個工具類來復用代碼
SpringBoot的驗證碼配置
SpringBoot的配置其實和Spring的配置是差不多的,只不過SpringBoot崇尚去xml化,以上所有在xml上書寫的內容都需要在代碼中配置。
首先在application.properties中把要用的參數信息提前寫好
#Kaptcha相關
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配置文件中自行配置一個Servlet來取代之前在Web.xml中的操作,其實具體操作很簡單也和之前很相似,聲明一個映射特定路徑的 Servlet ,或是需要配置初始化參數的話,需要使用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的驗證碼就配置完了。