基于 Kaptcha 實(shí)現(xiàn)分布式驗(yàn)證碼登錄

作者：一安 2025-04-01 00:44:04

傳統(tǒng)的項(xiàng)目大都是基于session交互的，前后端都在一個(gè)項(xiàng)目里面，比如傳統(tǒng)的SSH項(xiàng)目或者一些JSP系統(tǒng)，當(dāng)前端頁(yè)面觸發(fā)到獲取驗(yàn)證碼請(qǐng)求，可以將驗(yàn)證碼里面的信息存在上下文中，所以登錄的時(shí)候只需要?用戶名、密碼、驗(yàn)證碼即可。

前言

為了防止驗(yàn)證系統(tǒng)被暴力破解，很多系統(tǒng)都增加了驗(yàn)證碼效驗(yàn)，比較常見(jiàn)的就是圖片二維碼，業(yè)內(nèi)比較安全的是短信驗(yàn)證碼，當(dāng)然還有一些拼圖驗(yàn)證碼，加入人工智能的二維碼等等，我們今天的主題就是前后端分離的圖片二維碼登錄方案。

未分離驗(yàn)證碼登錄方案

驗(yàn)證碼生成流程如下

圖片

登錄驗(yàn)證流程如下

圖片

可以發(fā)現(xiàn)，整個(gè)登錄流程還是依賴session上下文的，并且由后端調(diào)整頁(yè)面。

分離驗(yàn)證碼登錄方案

隨著系統(tǒng)和業(yè)務(wù)的不停升級(jí)，前后端代碼放在一起的項(xiàng)目越來(lái)越臃腫，已經(jīng)無(wú)法快速迭代和職責(zé)區(qū)分了，于是紛紛投入了前后端分離的懷抱，發(fā)現(xiàn)代碼和職責(zé)分離以后，開(kāi)發(fā)效率越來(lái)越高了，功能迭代還越來(lái)越快，但是以前的驗(yàn)證碼登錄方案就要更改了。

驗(yàn)證碼生成流程如下

圖片

對(duì)比原來(lái)的方案，增加了redis中間件，不再是存在session里面了，但是后面怎么區(qū)分這個(gè)驗(yàn)證碼是這個(gè)請(qǐng)求生成的呢？所以我們加入了唯一標(biāo)識(shí)符來(lái)區(qū)分

登錄驗(yàn)證流程如下

圖片

可以發(fā)現(xiàn)，基于前后端分離的分布式項(xiàng)目登錄方案對(duì)比原來(lái)，加了一個(gè)redis中間件和token返回，不再依賴上下文session，并且頁(yè)面調(diào)整也是由后端換到了前端

動(dòng)手?jǐn)]輪子

基于驗(yàn)證碼的輪子還是挺多的，本文就以Kaptcha這個(gè)項(xiàng)目為例，通過(guò)springboot項(xiàng)目集成Kaptcha來(lái)實(shí)現(xiàn)驗(yàn)證碼生成和登錄方案。

Kaptcha介紹

Kaptcha是一個(gè)基于SimpleCaptcha的驗(yàn)證碼開(kāi)源項(xiàng)目

我找的這個(gè)輪子是基于SimpleCaptcha二次封裝的，maven依賴如下

<!--Kaptcha是一個(gè)基于SimpleCaptcha的驗(yàn)證碼開(kāi)源項(xiàng)目-->
<dependency>
  <groupId>com.github.penggle</groupId>
  <artifactId>kaptcha</artifactId>
  <version>2.3.2</version>
</dependency>

新建項(xiàng)目并加入依賴

依賴主要有 SpringBoot、Kaptcha、Redis

pom.xml
<?xml versinotallow="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.lzp</groupId>
    <artifactId>kaptcha</artifactId>
    <version>1.0-SNAPSHOT</version>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.3.0.RELEASE</version>
        <relativePath/><!-- lookup parent from repository -->
    </parent>
    
    <dependencies>
        <!--Kaptcha是一個(gè)基于SimpleCaptcha的驗(yàn)證碼開(kāi)源項(xiàng)目-->
        <dependency>
            <groupId>com.github.penggle</groupId>
            <artifactId>kaptcha</artifactId>
            <version>2.3.2</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>


        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-redis</artifactId>
        </dependency>

        <!-- redis依賴commons-pool 這個(gè)依賴一定要添加 -->
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-pool2</artifactId>
        </dependency>

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.3</version>
        </dependency>

        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
        </dependency>

    </dependencies>


    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

Redis配置類RedisConfig

@Configuration
publicclass RedisConfig {

    @Bean
    public RedisTemplate<String, Object> redisTemplate(LettuceConnectionFactory redisConnectionFactory){
        RedisTemplate<String, Object> redisTemplate = new RedisTemplate<String, Object>();
        redisTemplate.setKeySerializer(new StringRedisSerializer());
        redisTemplate.setValueSerializer(new GenericJackson2JsonRedisSerializer());
        redisTemplate.setHashKeySerializer(new StringRedisSerializer());
        redisTemplate.setHashValueSerializer(new GenericJackson2JsonRedisSerializer());
        redisTemplate.setConnectionFactory(redisConnectionFactory);
        return redisTemplate;
    }

}

驗(yàn)證碼配置類KaptchaConfig

@Configuration
publicclass KaptchaConfig {
    @Bean
    public DefaultKaptcha producer(){

        DefaultKaptcha defaultKaptcha = new DefaultKaptcha();
        Properties properties = new Properties();
        properties.setProperty("kaptcha.border", "no");
        properties.setProperty("kaptcha.border.color", "105,179,90");
        properties.setProperty("kaptcha.textproducer.font.color", "black");
        properties.setProperty("kaptcha.image.width", "110");
        properties.setProperty("kaptcha.image.height", "40");
        properties.setProperty("kaptcha.textproducer.char.string","23456789abcdefghkmnpqrstuvwxyzABCDEFGHKMNPRSTUVWXYZ");
        properties.setProperty("kaptcha.textproducer.font.size", "30");
        properties.setProperty("kaptcha.textproducer.char.space","3");
        properties.setProperty("kaptcha.session.key", "code");
        properties.setProperty("kaptcha.textproducer.char.length", "4");
        properties.setProperty("kaptcha.textproducer.font.names", "宋體,楷體,微軟雅黑");
//        properties.setProperty("kaptcha.obscurificator.impl","com.xxx");可以重寫實(shí)現(xiàn)類
        properties.setProperty("kaptcha.noise.impl","com.google.code.kaptcha.impl.NoNoise");
        Config config = new Config(properties);
        defaultKaptcha.setConfig(config);

        return defaultKaptcha;
    }

驗(yàn)證碼控制層CaptchaController

為了方便代碼寫一塊了，講究看；

import com.google.code.kaptcha.impl.DefaultKaptcha;
import com.lzp.kaptcha.service.CaptchaService;
import com.lzp.kaptcha.vo.CaptchaVO;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import sun.misc.BASE64Encoder;

import javax.imageio.ImageIO;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.IOException;

@RestController
@RequestMapping("/captcha")
publicclass CaptchaController {

    @Autowired
    private DefaultKaptcha producer;

    @Autowired
    private CaptchaService captchaService;

    @ResponseBody
    @GetMapping("/get")
    public CaptchaVO getCaptcha() throws IOException {

        // 生成文字驗(yàn)證碼
        String content = producer.createText();
        // 生成圖片驗(yàn)證碼
        ByteArrayOutputStream outputStream = null;
        BufferedImage image = producer.createImage(content);

        outputStream = new ByteArrayOutputStream();
        ImageIO.write(image, "jpg", outputStream);
        // 對(duì)字節(jié)數(shù)組Base64編碼
        BASE64Encoder encoder = new BASE64Encoder();

        String str = "data:image/jpeg;base64,";
        String base64Img = str + encoder.encode(outputStream.toByteArray()).replace("\n", "").replace("\r", "");

        CaptchaVO captchaVO  =captchaService.cacheCaptcha(content);
        captchaVO.setBase64Img(base64Img);

        return  captchaVO;
    }

}

驗(yàn)證碼返回對(duì)象CaptchaVO

public class CaptchaVO {
    /**
     * 驗(yàn)證碼標(biāo)識(shí)符
     */
    private String captchaKey;
    /**
     * 驗(yàn)證碼過(guò)期時(shí)間
     */
    private Long expire;
    /**
     * base64字符串
     */
    private String base64Img;

    public String getCaptchaKey() {
        return captchaKey;
    }

    public void setCaptchaKey(String captchaKey) {
        this.captchaKey = captchaKey;
    }

    public Long getExpire() {
        return expire;
    }

    public void setExpire(Long expire) {
        this.expire = expire;
    }

    public String getBase64Img() {
        return base64Img;
    }

    public void setBase64Img(String base64Img) {
        this.base64Img = base64Img;
    }
}

驗(yàn)證碼方法層CaptchaService

import com.lzp.kaptcha.utils.RedisUtils;
import com.lzp.kaptcha.vo.CaptchaVO;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;

import java.util.UUID;

@Service
publicclass CaptchaService {

    @Value("${server.session.timeout:300}")
    private Long timeout;

    @Autowired
    private RedisUtils redisUtils;


    privatefinal String CAPTCHA_KEY = "captcha:verification:";

    public CaptchaVO cacheCaptcha(String captcha){
        //生成一個(gè)隨機(jī)標(biāo)識(shí)符
        String captchaKey = UUID.randomUUID().toString();

        //緩存驗(yàn)證碼并設(shè)置過(guò)期時(shí)間
        redisUtils.set(CAPTCHA_KEY.concat(captchaKey),captcha,timeout);

        CaptchaVO captchaVO = new CaptchaVO();
        captchaVO.setCaptchaKey(captchaKey);
        captchaVO.setExpire(timeout);

        return captchaVO;
    }

}

用戶登錄對(duì)象封裝LoginDTO

package com.lzp.kaptcha.dto;

publicclass LoginDTO {

    private String userName;

    private String pwd;

    private String captchaKey;

    private String captcha;

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public String getPwd() {
        return pwd;
    }

    public void setPwd(String pwd) {
        this.pwd = pwd;
    }

    public String getCaptchaKey() {
        return captchaKey;
    }

    public void setCaptchaKey(String captchaKey) {
        this.captchaKey = captchaKey;
    }

    public String getCaptcha() {
        return captcha;
    }

    public void setCaptcha(String captcha) {
        this.captcha = captcha;
    }
}

登錄控制層UserController

這塊我寫邏輯代碼了，相信大家都看的懂；

import com.lzp.kaptcha.dto.LoginDTO;
import com.lzp.kaptcha.utils.RedisUtils;
import com.lzp.kaptcha.vo.UserVO;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/user")
publicclass UserController {

    @Autowired
    private RedisUtils redisUtils;

    @PostMapping("/login")
    public UserVO login(@RequestBody LoginDTO loginDTO)  {
        Object captch = redisUtils.get(loginDTO.getCaptchaKey());
        if(captch == null){
            // throw 驗(yàn)證碼已過(guò)期
        }
        if(!loginDTO.getCaptcha().equals(captch)){
            // throw 驗(yàn)證碼錯(cuò)誤
        }
        // 查詢用戶信息

        //判斷用戶是否存在 不存在拋出用戶名密碼錯(cuò)誤

        //判斷密碼是否正確，不正確拋出用戶名密碼錯(cuò)誤

        //構(gòu)造返回到前端的用戶對(duì)象并封裝信息和生成token

        returnnew UserVO();
    }
}

驗(yàn)證碼獲取和查看

圖片

責(zé)任編輯：武曉燕來(lái)源：一安未來(lái)

分布式驗(yàn)證碼登錄