快捷導(dǎo)航

SpringBoot+kaptcha實現(xiàn)驗證碼花式玩法詳解

更新時間：2022年05月11日 11:14:19 作者：江南一點雨

這篇文章主要想和大家聊聊kaptcha的用法，畢竟這個已經(jīng)有16年歷史的玩意還在有人用，說明它的功能還是相當(dāng)強大的，感興趣的小伙伴可以了解一下

在 vhr 項目中，松哥也跟大家講了驗證碼的用法，不過那個里邊的驗證碼是我們自己寫的，其實功能也還算完整，夠用。不過現(xiàn)在各個網(wǎng)站的驗證碼玩法花樣越來越多，加上最近在搞的 TienChin 項目用的驗證碼是一個老牌開源庫 kaptcha，所以松哥決定還是花點時間，跟大家聊聊 kaptcha 的用法，畢竟這個已經(jīng)有 16 年歷史的玩意還在有人用，說明它的功能還是相當(dāng)強大的。

1. 基本用法

kaptcha 是一個非常老牌的驗證碼生成工具，多老呢？可以追溯到 2006 年。

這么多年過去了，它不僅沒有落寞反而還在被不少人使用，足以說明它的生命力了，值得我們來研究下。

方便起見，我們整一個 Spring Boot 工程來演示它的用法。

首先新建一個 Spring Boot 工程，然后加入 kaptcha 的依賴，如下：

<dependency>
??<groupId>com.github.penggle</groupId>
??<artifactId>kaptcha</artifactId>
??<version>2.3.2</version>
</dependency>

接下來我們只需要提供一個配置 Kaptcha 的 Bean 即可，如下：

@Configuration
public?class?KaptchaConfig?{
????@Bean(name?=?"captchaProducer")
????public?DefaultKaptcha?getKaptchaBean()?{
????????DefaultKaptcha?defaultKaptcha?=?new?DefaultKaptcha();
????????Properties?properties?=?new?Properties();
????????//?是否有邊框?默認(rèn)為true?我們可以自己設(shè)置yes，no
????????properties.setProperty(KAPTCHA_BORDER,?"yes");
????????//?驗證碼文本字符顏色?默認(rèn)為Color.BLACK
????????properties.setProperty(KAPTCHA_TEXTPRODUCER_FONT_COLOR,?"black");
????????//?驗證碼圖片寬度?默認(rèn)為200
????????properties.setProperty(KAPTCHA_IMAGE_WIDTH,?"160");
????????//?驗證碼圖片高度?默認(rèn)為50
????????properties.setProperty(KAPTCHA_IMAGE_HEIGHT,?"60");
????????//?驗證碼文本字符大小?默認(rèn)為40
????????properties.setProperty(KAPTCHA_TEXTPRODUCER_FONT_SIZE,?"38");
????????//?KAPTCHA_SESSION_KEY
????????properties.setProperty(KAPTCHA_SESSION_CONFIG_KEY,?"kaptchaCode");
????????//?驗證碼文本字符長度?默認(rèn)為5
????????properties.setProperty(KAPTCHA_TEXTPRODUCER_CHAR_LENGTH,?"4");
????????//?驗證碼文本字體樣式?默認(rèn)為new?Font("Arial",?1,?fontSize),?new?Font("Courier",?1,?fontSize)
????????properties.setProperty(KAPTCHA_TEXTPRODUCER_FONT_NAMES,?"Arial,Courier");
????????//?圖片樣式?水紋com.google.code.kaptcha.impl.WaterRipple?魚眼com.google.code.kaptcha.impl.FishEyeGimpy?陰影com.google.code.kaptcha.impl.ShadowGimpy
????????properties.setProperty(KAPTCHA_OBSCURIFICATOR_IMPL,?"com.google.code.kaptcha.impl.ShadowGimpy");
????????Config?config?=?new?Config(properties);
????????defaultKaptcha.setConfig(config);
????????return?defaultKaptcha;
????}
}

DefaultKaptcha 中配置驗證碼圖片的各個屬性值。各個屬性的含義，代碼中都有注釋，我就不再多說了。

接下來我們在接口中返回驗證碼圖片，如下：

@Autowired
DefaultKaptcha?defaultKaptcha;
@GetMapping("/img")
public?void?getKaptcha(HttpServletResponse?resp)?throws?IOException?{
????String?text?=?defaultKaptcha.createText();
????BufferedImage?image?=?defaultKaptcha.createImage(text);
????ImageIO.write(image,?"jpg",?resp.getOutputStream());
}

我這里是通過 IO 流的形式將圖片寫到前端的，當(dāng)然也可以將之轉(zhuǎn)為一個 Base64 字符串返回到前端，一樣也是 OK 的。

等等，似乎少了什么！

我們沒有把生成的驗證碼文本存入到 session 中去，這樣一會登錄的時候沒法驗證，有小伙伴可能會說，這還不簡單？接口里邊存一下不就行了？

NONONO！

大家看，當(dāng)我們配置 DefaultKaptcha bean 的時候，其中有這么一行代碼 properties.setProperty(KAPTCHA_SESSION_CONFIG_KEY, "kaptchaCode");，這行代碼的意思就是說會自動將生成的驗證碼文本存入到 session 中，并且 session 的 KEY 是 kaptchaCode。但是在實際測試中，大家會發(fā)現(xiàn)上面的代碼并不會將驗證碼生成的文本存入到 session 中。

原因在于 Kaptcha 工具實際上自己提供了一個生成驗證碼圖片的 Servlet，如果我們直接使用它自己提供的驗證碼 Servlet，那么上面這個配置才會生效，在 Spring Boot 中，如果想要配置 Kaptcha 自己提供的 Servlet，方式如下：

@Bean
ServletRegistrationBean<HttpServlet>?kaptchaServlet()?{
????ServletRegistrationBean<HttpServlet>?bean?=?new?ServletRegistrationBean<>();
????bean.setServlet(new?KaptchaServlet());
????bean.addUrlMappings("/img");
????Properties?properties?=?new?Properties();
????//?是否有邊框?默認(rèn)為true?我們可以自己設(shè)置yes，no
????properties.setProperty(KAPTCHA_BORDER,?"yes");
????//?驗證碼文本字符顏色?默認(rèn)為Color.BLACK
????properties.setProperty(KAPTCHA_TEXTPRODUCER_FONT_COLOR,?"black");
????//?驗證碼圖片寬度?默認(rèn)為200
????properties.setProperty(KAPTCHA_IMAGE_WIDTH,?"160");
????//?驗證碼圖片高度?默認(rèn)為50
????properties.setProperty(KAPTCHA_IMAGE_HEIGHT,?"60");
????//?驗證碼文本字符大小?默認(rèn)為40
????properties.setProperty(KAPTCHA_TEXTPRODUCER_FONT_SIZE,?"38");
????//?KAPTCHA_SESSION_KEY
????properties.setProperty(KAPTCHA_SESSION_CONFIG_KEY,?"kaptchaCode");
????//?驗證碼文本字符長度?默認(rèn)為5
????properties.setProperty(KAPTCHA_TEXTPRODUCER_CHAR_LENGTH,?"4");
????//?驗證碼文本字體樣式?默認(rèn)為new?Font("Arial",?1,?fontSize),?new?Font("Courier",?1,?fontSize)
????properties.setProperty(KAPTCHA_TEXTPRODUCER_FONT_NAMES,?"Arial,Courier");
????//?圖片樣式?水紋com.google.code.kaptcha.impl.WaterRipple?魚眼com.google.code.kaptcha.impl.FishEyeGimpy?陰影com.google.code.kaptcha.impl.ShadowGimpy
????properties.setProperty(KAPTCHA_OBSCURIFICATOR_IMPL,?"com.google.code.kaptcha.impl.ShadowGimpy");
????Map<String,?String>?map?=?new?HashMap<String,String>((Map)properties);
????bean.setInitParameters(map);
????return?bean;
}

項目啟動后，直接訪問 /img 就能看到驗證碼圖片，此時驗證碼的文本也會自動存入到 session 中。當(dāng)用戶登錄的時候，通過 session.getAttribute("kaptchaCode") 就可以獲取到驗證碼的文本內(nèi)容。

然而很多時候，驗證碼接口返回的內(nèi)容都是比較豐富的，可能不僅僅是圖片，還有其他信息。所以我們直接配一個 Servlet 并不能滿足我們的要求，只能自己寫驗證碼的接口，自己寫的話，就要自己把驗證碼圖片存到 session 中去，那么 properties.setProperty(KAPTCHA_SESSION_CONFIG_KEY, "kaptchaCode"); 配置其實就沒用了，可以不用加。

2. 自定義驗證碼文本

當(dāng)然，我們也可以自定義驗證碼文本，只需要提供一個驗證碼文本的實現(xiàn)類即可，如下：

public?class?KaptchaTextCreator?extends?DefaultTextCreator?{
????private?static?final?String[]?CNUMBERS?=?"0,1,2,3,4,5,6,7,8,9,10".split(",");

????@Override
????public?String?getText()?{
????????Integer?result?=?0;
????????Random?random?=?new?Random();
????????int?x?=?random.nextInt(10);
????????int?y?=?random.nextInt(10);
????????StringBuilder?suChinese?=?new?StringBuilder();
????????int?randomoperands?=?(int)?Math.round(Math.random()?*?2);
????????if?(randomoperands?==?0)?{
????????????result?=?x?*?y;
????????????suChinese.append(CNUMBERS[x]);
????????????suChinese.append("*");
????????????suChinese.append(CNUMBERS[y]);
????????}?else?if?(randomoperands?==?1)?{
????????????if?(!(x?==?0)?&&?y?%?x?==?0)?{
????????????????result?=?y?/?x;
????????????????suChinese.append(CNUMBERS[y]);
????????????????suChinese.append("/");
????????????????suChinese.append(CNUMBERS[x]);
????????????}?else?{
????????????????result?=?x?+?y;
????????????????suChinese.append(CNUMBERS[x]);
????????????????suChinese.append("+");
????????????????suChinese.append(CNUMBERS[y]);
????????????}
????????}?else?if?(randomoperands?==?2)?{
????????????if?(x?>=?y)?{
????????????????result?=?x?-?y;
????????????????suChinese.append(CNUMBERS[x]);
????????????????suChinese.append("-");
????????????????suChinese.append(CNUMBERS[y]);
????????????}?else?{
????????????????result?=?y?-?x;
????????????????suChinese.append(CNUMBERS[y]);
????????????????suChinese.append("-");
????????????????suChinese.append(CNUMBERS[x]);
????????????}
????????}?else?{
????????????result?=?x?+?y;
????????????suChinese.append(CNUMBERS[x]);
????????????suChinese.append("+");
????????????suChinese.append(CNUMBERS[y]);
????????}
????????suChinese.append("=?@"?+?result);
????????return?suChinese.toString();
????}
}

這段代碼并不難理解，生成的驗證碼文本類似于 1+1=?@2 這樣的字符串。

將來以@為分界線，將@前面的字符串內(nèi)容繪制到圖片上，@后面的內(nèi)容存到 session 中，和用戶上傳的內(nèi)容進行比較即可。

當(dāng)然，我們還需要在配置驗證碼的時候添加如下屬性，以修改驗證碼文本的提供類：

properties.setProperty(KAPTCHA_TEXTPRODUCER_IMPL,?"org.javaboy.tienchin.framework.config.KaptchaTextCreator");

配置完成后，將來在接口中直接使用這個驗證碼即可，用的時候注意將生成的驗證碼文本拆分后處理，一部分用來繪圖，一部分用來存到 session 中。

完整的代碼，小伙伴們可以參考TienChin項目

以上就是SpringBoot+kaptcha實現(xiàn)驗證碼花式玩法詳解的詳細(xì)內(nèi)容，更多關(guān)于SpringBoot kaptcha驗證碼的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

SpringBoot+kaptcha實現(xiàn)驗證碼花式玩法詳解

目錄

1. 基本用法

2. 自定義驗證碼文本

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具