springbooot使用google驗(yàn)證碼的功能實(shí)現(xiàn)

更新時(shí)間：2023年05月04日 08:49:37 作者：張場(chǎng)長(zhǎng)

這篇文章主要介紹了springbooot使用google驗(yàn)證碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

springbooot使用google驗(yàn)證碼

1、使用場(chǎng)景

由于需要做一個(gè)前后端分離的項(xiàng)目，想著使用google驗(yàn)證碼，由于年齡大了，這些知識(shí)啊，用完就忘，在這里記錄一下。

登錄時(shí)驗(yàn)證碼設(shè)計(jì)：

使用google驗(yàn)證碼工具，當(dāng)前端在登錄請(qǐng)求時(shí)，在后端生成驗(yàn)證碼，同時(shí)也生成一個(gè)隨機(jī)數(shù)（UUID）與該驗(yàn)證碼對(duì)應(yīng)。
使用redis作為緩存，將該隨機(jī)數(shù)和驗(yàn)證碼存儲(chǔ)在redis中。
隨機(jī)數(shù)的目的是將驗(yàn)證碼與發(fā)起登錄請(qǐng)求的用戶聯(lián)系起來(lái)。
當(dāng)用戶提交登錄表單時(shí)，后端根據(jù)該隨機(jī)數(shù)從redis中讀取驗(yàn)證碼與用戶輸入的驗(yàn)證碼進(jìn)行驗(yàn)證。

大概就是這樣的一個(gè)設(shè)計(jì)思路，具體如下：

在這里插入圖片描述

2、springboot使用google驗(yàn)證碼

1、引入依賴

首先在pom文件中引入該驗(yàn)證碼插件kaptcha

 <!-- google 驗(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>

2、編寫配置類

引入依賴之后還需要編寫配置類，在配置類里設(shè)置自己想要的驗(yàn)證碼樣式，包括顏色、大小、寬高等等。

我的配置類如下：

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 KaptchaConfig {
       @Bean
    DefaultKaptcha producer() { //驗(yàn)證碼的配置類
        Properties properties = new Properties();                       
        properties.put("kaptcha.border", "no");                       //邊框
        properties.put("kaptcha.textproducer.font.color", "black");   //字體顏色
        properties.put("kaptcha.textproducer.char.space", "5");       //字體間隔
        properties.put("kaptcha.image.height", "40");                 //圖片高度
        properties.put("kaptcha.image.width", "100");                 //圖片寬度
        properties.put("kaptcha.textproducer.font.size", "30");       //字體大小
        Config config = new Config(properties);                       
        DefaultKaptcha defaultKaptcha = new DefaultKaptcha();         
        defaultKaptcha.setConfig(config);
        return defaultKaptcha;
    }
}

3、編寫控制層

將下面的代碼放到需要使用驗(yàn)證碼的controller中

//獲取登錄驗(yàn)證碼
    @GetMapping("/captcha")
    public Result Captcha() throws IOException {
        String key = UUID.randomUUID().toString();
        String code = producer.createText();
        BufferedImage image = producer.createImage(code);
        ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
        ImageIO.write(image, "jpg", outputStream);
        BASE64Encoder encoder = new BASE64Encoder();
        String str = "data:image/jpeg;base64,";
        String base64Img = str + encoder.encode(outputStream.toByteArray());
        redisUtils.hset(Constants.CAPTCHA_KEY, key, code, 120);
        return Result.succ(
                MapUtil.builder()
                        .put("userKey", key)
                        .put("captchaImg", base64Img)
                        .build()
        );
    }

上面用到了封裝的redis工具類redisUtils中的hset方法，并設(shè)置了驗(yàn)證碼過(guò)期時(shí)間120秒。
hset方法如下：

/**
     * 向一張hash表中放入數(shù)據(jù),如果不存在將創(chuàng)建
     *
     * @param key   鍵
     * @param item  項(xiàng)
     * @param value 值
     * @param time  時(shí)間(秒) 注意:如果已存在的hash表有時(shí)間,這里將會(huì)替換原有的時(shí)間
     * @return true 成功 false失敗
     */
    public boolean hset(String key, String item, Object value, long time) {
        try {
            redisTemplate.opsForHash().put(key, item, value);
            if (time > 0) {
                expire(key, time);
            }
            return true;
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }
    }

Result是編寫的統(tǒng)一結(jié)果返回類，代碼如下所示：

@Data
public class Result_ implements Serializable {
    private int code;
    private String msg;
    private Object data;
    public static Result_ succ(Object data) {
        return succ(200, "操作成功", data);
    }
    public static Result_ fail(String msg) {
        return fail(400, msg, null);
    }
    public static Result_ succ (int code, String msg, Object data) {
        Result_ result = new Result_();
        result.setCode(code);
        result.setMsg(msg);
        result.setData(data);
        return result;
    }
    public static Result_ fail (int code, String msg, Object data) {
        Result_ result = new Result_();
        result.setCode(code);
        result.setMsg(msg);
        result.setData(data);
        return result;
    }
}

這里沒(méi)有編寫對(duì)于驗(yàn)證碼的驗(yàn)證。

4、前端實(shí)現(xiàn)

驗(yàn)證碼輸入框代碼如下：

<el-form-item label="驗(yàn)證碼" prop="code" style="width: 380px">
                          <el-input placeholder="請(qǐng)輸入驗(yàn)證碼"v-model="loginForm.code"style="width: 172px; float: left" ></el-input>
                          <el-image class="captchaImg" :src="captchaImg" @click="getCaptcha()"></el-image>
                      </el-form-item>

驗(yàn)證碼函數(shù)如下：

// 獲取驗(yàn)證碼
        getCaptcha() {
            this.$axios.get('/user/captcha1').then(res => {
                this.loginForm.token = res.data.data.token
                this.captchaImg = res.data.data.captchaImg
                this.loginForm.code = ''
            })
        }

到此這篇關(guān)于springbooot使用google驗(yàn)證碼的文章就介紹到這了,更多相關(guān)springbooot google驗(yàn)證碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: