SpringBoot前後端分離實現驗證碼操作

2022-05-16 19:00:36

1.SpringBoot版本

本文基於的Spring Boot的版本是2.6.7 。

2.引入依賴

captcha一款超簡單的驗證碼生成,還挺好玩的.還有中文驗證碼,動態驗證碼. 。在專案中pom.xml組態檔中新增依賴，如下：

<!--驗證碼-->
<dependency>
    <groupId>com.github.whvcse</groupId>
    <artifactId>easy-captcha</artifactId>
    <version>1.6.2</version>
</dependency>

3.實現思路

把生成的驗證碼結果儲存到redis快取中，並設定過期時間。

前端通過提交驗證碼和key，其中key就是儲存到redis中的鍵，通過這個鍵獲取到對應的值，再與前端提交的值對比，相同就通過驗證。

新建驗證碼列舉類

由於captcha這款驗證碼提供了好幾種驗證碼方法，有中文驗證碼,動態驗證碼，算術驗證碼等等，新建一個驗證碼每週類存放這幾種驗證碼型別。程式碼如下：

public enum LoginCodeEnum {
    /**
     * 算數
     */
    ARITHMETIC,
    /**
     * 中文
     */
    CHINESE,
    /**
     * 中文閃圖
     */
    CHINESE_GIF,
    /**
     * 閃圖
     */
    GIF,
    SPEC
}

定義驗證碼設定資訊

該類是定義驗證碼的基本資訊，例如高度、寬度、字型型別、驗證碼型別等等、並且我們把它轉成通過SpringBoot組態檔型別來定義更加方便。

@Data
public class LoginCode {

    /**
     * 驗證碼設定
     */
    private LoginCodeEnum codeType;
    /**
     * 驗證碼有效期 分鐘
     */
    private Long expiration = 2L;
    /**
     * 驗證碼內容長度
     */
    private int length = 2;
    /**
     * 驗證碼寬度
     */
    private int width = 111;
    /**
     * 驗證碼高度
     */
    private int height = 36;
    /**
     * 驗證碼字型
     */
    private String fontName;
    /**
     * 字型大小
     */
    private int fontSize = 25;

    /**
     * 驗證碼字首
     * @return
     */
    private  String   codeKey;


    public LoginCodeEnum getCodeType() {
        return codeType;
    }
}

把組態檔轉換Pojo類的統一設定類

@Configuration
public class ConfigBeanConfiguration {

    @Bean
    @ConfigurationProperties(prefix = "login")
    public LoginProperties loginProperties() {
        return new LoginProperties();
    }
}

定義驗證邏輯生成類

@Data
public class LoginProperties {

    private LoginCode loginCode;


    /**
     * 獲取驗證碼生產類
     * @return
     */
    public Captcha getCaptcha(){
        if(Objects.isNull(loginCode)){
            loginCode = new LoginCode();
            if(Objects.isNull(loginCode.getCodeType())){
                loginCode.setCodeType(LoginCodeEnum.ARITHMETIC);
            }

        }
        return switchCaptcha(loginCode);
    }

    /**
     * 依據設定資訊生產驗證碼
     * @param loginCode
     * @return
     */
    private Captcha switchCaptcha(LoginCode loginCode){
        Captcha captcha = null;
        synchronized (this){
            switch (loginCode.getCodeType()){
                case ARITHMETIC:
                    captcha = new FixedArithmeticCaptcha(loginCode.getWidth(),loginCode.getHeight());
                    captcha.setLen(loginCode.getLength());
                    break;
                case CHINESE:
                    captcha = new ChineseCaptcha(loginCode.getWidth(),loginCode.getHeight());
                    captcha.setLen(loginCode.getLength());
                    break;
                case CHINESE_GIF:
                    captcha = new ChineseGifCaptcha(loginCode.getWidth(),loginCode.getHeight());
                    captcha.setLen(loginCode.getLength());
                    break;
                case GIF:
                    captcha = new GifCaptcha(loginCode.getWidth(),loginCode.getHeight());
                    captcha.setLen(loginCode.getLength());
                    break;
                case SPEC:
                    captcha = new SpecCaptcha(loginCode.getWidth(),loginCode.getHeight());
                    captcha.setLen(loginCode.getLength());
                default:
                    System.out.println("驗證碼設定資訊錯誤！正確設定檢視 LoginCodeEnum ");

            }
        }
        if(StringUtils.isNotBlank(loginCode.getFontName())){
            captcha.setFont(new Font(loginCode.getFontName(),Font.PLAIN,loginCode.getFontSize()));
        }
        return captcha;
    }

    static  class FixedArithmeticCaptcha extends ArithmeticCaptcha{
        public FixedArithmeticCaptcha(int width,int height){
            super(width,height);
        }

        @Override
        protected char[] alphas() {
            // 生成亂數字和運運算元
            int n1 = num(1, 10), n2 = num(1, 10);
            int opt = num(3);

            // 計算結果
            int res = new int[]{n1 + n2, n1 - n2, n1 * n2}[opt];
            // 轉換為字元運運算元
            char optChar = "+-x".charAt(opt);

            this.setArithmeticString(String.format("%s%c%s=?", n1, optChar, n2));
            this.chars = String.valueOf(res);

            return chars.toCharArray();
        }
    }
}

在控制層上定義驗證碼生成介面

   @ApiOperation(value = "獲取驗證碼", notes = "獲取驗證碼")
    @GetMapping("/code")
    public Object getCode(){

        Captcha captcha = loginProperties.getCaptcha();
        String uuid = "code-key-"+IdUtil.simpleUUID();
        //當驗證碼型別為 arithmetic時且長度 >= 2 時，captcha.text()的結果有機率為浮點型
        String captchaValue = captcha.text();
        if(captcha.getCharType()-1 == LoginCodeEnum.ARITHMETIC.ordinal() && captchaValue.contains(".")){
            captchaValue = captchaValue.split("\.")[0];
        }
        // 儲存
        redisUtils.set(uuid,captchaValue,loginProperties.getLoginCode().getExpiration(), TimeUnit.MINUTES);
        // 驗證碼資訊
        Map<String,Object> imgResult = new HashMap<String,Object>(2){{
            put("img",captcha.toBase64());
            put("uuid",uuid);
        }};
        return imgResult;

    }

效果體驗

在前端呼叫介面

<template>
<div class="login-code">
  <img :src="codeUrl" @click="getCode">
</div>
</template>
<script>
    methods: {
    getCode() {
      getCodeImg().then(res => {
        this.codeUrl = res.data.img
        this.loginForm.uuid = res.data.uuid
      })
    },
    }
    created() {
    // 獲取驗證碼
    this.getCode()
  },
 </script>

到此這篇關於SpringBoot前後端分離實現驗證碼操作的文章就介紹到這了,更多相關SpringBoot驗證碼內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！