Google Kaptcha 框架實(shí)現(xiàn)登錄驗(yàn)證碼功能（SSM 和 SpringBoot）

更新時(shí)間：2018年12月07日 11:23:08 作者：csdn_小東

這篇文章主要介紹了Google Kaptcha 實(shí)現(xiàn)登錄驗(yàn)證碼（SSM 和 SpringBoot）功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

一、效果圖：

二、導(dǎo)入 jar 包

1.由于這是大神寫好封裝起來的一個(gè)框架，所有我們使用前得先下載相關(guān)的 jar 包

第一種：maven

<!-- 驗(yàn)證碼 -->
<!-- https://mvnrepository.com/artifact/com.github.penggle/kaptcha -->
<dependency>
    <groupId>com.github.penggle</groupId>
    <artifactId>kaptcha</artifactId>
    <version>2.3.2</version>
</dependency>

第二種：lib

打開鏈接：https://mvnrepository.com/artifact/com.github.penggle/kaptcha

三、SSM 通過 Kaptcha 簡(jiǎn)單實(shí)現(xiàn)驗(yàn)證碼

直接在 web.xml 里面直接配置

驗(yàn)證碼的一些樣式都是通過配置來實(shí)現(xiàn)的，下面是我自己使用的一個(gè)demo，如果需要更改字體顏色還有字體大小什么的等，可以自己根據(jù)注釋來修改。不然直接復(fù)制粘貼也行。由于配置比較簡(jiǎn)單，不作過多解釋，直接上代碼。

<!-- 驗(yàn)證碼相關(guān)屬性的配置 -->
<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>
 <!-- 使用哪些字符生成驗(yàn)證碼 -->
 <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>
 <!-- 字符個(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>

3.前端驗(yàn)證碼的顯示實(shí)現(xiàn)

div class="item-inner">
 <div class="item-title label">驗(yàn)證碼</div>
 <input type="text" id="j_captcha" placeholder="驗(yàn)證碼">
 <div class="item-input">
  <img id="captcha_img" alt="點(diǎn)擊更換" title="點(diǎn)擊更換"
    onclick="changeVerifyCode(this)" src="../Kaptcha"/>
 </div>
</div>
function changeVerifyCode(img){
	img.src="../Kaptcha?" + Math.floor(Math.random()*100);
}

解釋：

驗(yàn)證碼圖片的鏈接 src 中的 "../Kaptcha"，這里的“Kaptcha”是要與剛剛 web.xml 中的 url-pattern 配置的值一樣的，并非隨便寫的。

4.后端進(jìn)行驗(yàn)證碼的輸入驗(yàn)證

實(shí)現(xiàn)思路：我是把驗(yàn)證碼的驗(yàn)證單獨(dú)寫成一個(gè)靜態(tài)類，然后在控制層里面直接調(diào)用就行。

驗(yàn)證碼靜態(tài)類：

public class CodeUtil {
 public static boolean checkVerifyCode(HttpServletRequest request){
  String verifyCodeExpected = (String)request.getSession().getAttribute(
    com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
  //這里相當(dāng)于 request.getParameter("verifyCodeActual");
  String verifyCodeActual = HttpServletRequestUtil.getString(request, "verifyCodeActual");
  if(verifyCodeActual == null || verifyCodeActual.equals(verifyCodeExpected)){
   return false;
  }
  return true;
 }}

控制層調(diào)用代碼：

if(!CodeUtil.checkVerifyCode(request)){
	modelMap.put("success", false);
	modelMap.put("errMsg", "輸入了錯(cuò)誤的驗(yàn)證碼");
	return modelMap;
}
	modelMap.put("success", false);
	modelMap.put("errMsg", "輸入了錯(cuò)誤的驗(yàn)證碼");
	return modelMap;
}

if 里面驗(yàn)證碼不通過（錯(cuò)誤）的時(shí)候，我自己做的一些處理，可以根據(jù)自己的實(shí)際情況進(jìn)行修改。

SSM 環(huán)境下 Kaptcha 的使用就介紹完了。

四、SpringBoot 通過 Kaptcha 簡(jiǎn)單實(shí)現(xiàn)驗(yàn)證碼

思路：將 xml 的形勢(shì)轉(zhuǎn)化成代碼實(shí)現(xiàn)。

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;
 }
}

編寫一個(gè) 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);
  //將驗(yàn)證碼存到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="點(diǎn)擊更換" title="點(diǎn)擊更換"
    onclick="changeVerifyCode(this)" src="../getKaptchaImage"/>

至于點(diǎn)擊切換驗(yàn)證碼還有后臺(tái)如何接受驗(yàn)證，跟前面 SSM 的使用方法一樣，這里就不再贅述。

我們可以直接啟動(dòng) springboot 的項(xiàng)目，在瀏覽器上直接訪問獲取驗(yàn)證碼的接口。

http://localhost:8080/getKaptchaImage

就能在瀏覽器上看到驗(yàn)證碼的圖片了，說明配置是成功的。

五、Kaptcha 屬性表

總結(jié)

以上所述是小編給大家介紹的Google Kaptcha 框架實(shí)現(xiàn)登錄驗(yàn)證碼功能（SSM 和 SpringBoot），希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: