springbooot使用google驗證碼

• 1、使用場景
• 2、springboot使用google驗證碼
• • 1、引入依賴
  • 2、編寫配置類
  • 3、編寫控制層
  • 4、前端實現

1、使用場景

由于需要做一個前后端分離的項目，想著使用google驗證碼，由于年齡大了，這些知識啊，用完就忘，在這里記錄一下。

登錄時驗證碼設計：

• 使用google驗證碼工具，當前端在登錄請求時，在后端生成驗證碼，同時也生成一個隨機數（UUID）與該驗證碼對應。
• 使用redis作為緩存，將該隨機數和驗證碼存儲在redis中。
• 隨機數的目的是將驗證碼與發起登錄請求的用戶聯系起來。
• 當用戶提交登錄表單時，后端根據該隨機數從redis中讀取驗證碼與用戶輸入的驗證碼進行驗證。

大概就是這樣的一個設計思路，具體如下：

2、springboot使用google驗證碼

1、引入依賴

首先在pom文件中引入該驗證碼插件kaptcha

<!-- google 驗證碼 --><!-- https://mvnrepository.com/artifact/com.github.penggle/kaptcha --><dependency><groupId>com.github.penggle</groupId><artifactId>kaptcha</artifactId><version>2.3.2</version></dependency>

2、編寫配置類

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

我的配置類如下：

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 {@BeanDefaultKaptcha producer() { //驗證碼的配置類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、編寫控制層

將下面的代碼放到需要使用驗證碼的controller中

//獲取登錄驗證碼@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方法，并設置了驗證碼過期時間120秒。
hset方法如下：

/*** 向一張hash表中放入數據,如果不存在將創建** @param key 鍵* @param item 項* @param value 值* @param time 時間(秒) 注意:如果已存在的hash表有時間,這里將會替換原有的時間* @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是編寫的統一結果返回類，代碼如下所示：

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

這里沒有編寫對于驗證碼的驗證。

4、前端實現

驗證碼輸入框代碼如下：

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

驗證碼函數如下：

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

總結

以上是生活随笔為你收集整理的springbooot使用google验证码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。