在許多網頁中我們都可以看到驗證碼的存在,驗證碼就是用來進行人機識別的,防止指令碼或爬蟲無限制地請求網頁導致資源浪費,本篇部落格就是介紹如何在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的驗證碼就配置完了。