基于 Vue 和 Spring Boot 實現滑塊驗證碼的機器驗證
- 需求概述
- 技術選型
- 前端實現
- 1. 引入組件
- 2. 修改后端請求URL
- 3. 新增機器驗證頁面
- 4.首頁調用驗證組件
- 后端實現
- 流程梳理
- 具體實現
- 1. 引入依賴
- 2. 增加yml配置
- 3. 代碼實現
- 4.跨域配置(可選)
- 實現效果
- 二次驗證的實現
- 為什么需要二次驗證?
- 前端實現
- 1.APP.vue
- 2.新增登錄和驗證頁面
- 3.配置路由
- 后端實現
- 訪問與實現效果
- 其他問題整合
- 移動端滑動與瀏覽器默認左滑返回上一頁沖突
- Demo地址
本文詳細介紹了如何使用 AJ-Captcha 庫實現一個安全的移動端登錄系統,包含滑塊驗證碼(行為驗證)功能。用戶需要輸入手機號,完成滑塊驗證,并由后端校驗手機號是否存在后才能觸發短信驗證碼發送。本實現參考了 Gitee 的手機號登錄流程。
實現效果如下:
需求概述
登錄流程如下:
- 用戶輸入手機號,前端進行格式校驗。
- 點擊“發送驗證碼”后觸發滑塊驗證碼。
- 滑塊驗證通過后,后端校驗手機號是否存在。
- 手機號存在則發送短信驗證碼,用戶輸入驗證碼后完成登錄。
以下是參考的 Gitee 登錄流程時序圖和界面示意圖:
技術選型
-
采用 AJ-Captcha 行為驗證碼庫,支持滑動拼圖和文字點選兩種驗證方式。AJ-Captcha 提供前后端交互的完整解決方案,支持 Java 后端以及多種前端框架(Vue、React、Flutter 等)。
-
功能特點:
-
嵌入式集成,接入簡單,安全高效。
-
拋棄傳統字符驗證碼,優化用戶體驗。
-
支持多種前端框架和后端緩存方式(Redis、內存等)。
-
提供滑動拼圖和文字點選兩種驗證碼類型。
-
在線文檔:AJ-Captcha 官方文檔
-
前端實現
參考文檔:vue | AJ-Captcha
1. 引入組件
view/vue3/src/components/verifition · anji-plus/AJ-Captcha - 碼云 - 開源中國
# 1.復制view/vue/src/components/verifition文件夾,到自己工程對應目錄下,在登錄頁面插入如下代碼。
# 2.安裝請求和加密依賴
npm install axios crypto-js -S
2. 修改后端請求URL
修改aixos.js中的axios.defaults.baseURL
為后端服務的url
3. 新增機器驗證頁面
<!-- src/views/TestVerification.vue -->
<template><Verify@success="success":mode="'pop'":captchaType="'blockPuzzle'":imgSize="{ width: '330px', height: '155px' }"ref="verify"/><button @click="useVerify">調用驗證組件</button>
</template><script>
import Verify from '../components/verifition/Verify.vue'export default {name: 'TestVerification',components: { Verify },methods: {success(params) {console.log('驗證成功,返回參數:', params)},useVerify() {this.$refs.verify.show()}}
}
</script>
4.首頁調用驗證組件
修改App.vue文件
<template><verify/>
</template><script>
import verify from './views/TestVerification.vue'export default {name: 'App',components: {verify}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>
后端實現
流程梳理
-
用戶輸入手機號 -> 前端格式校驗 -> 點擊“發送驗證碼”
-
調用后端機器校驗初始化接口 -> 返回滑塊校驗參數 -> 跳轉滑塊頁面
-
前端滑塊完成 -> 調用后端滑塊校驗接口 + 傳滑塊驗證數據 + 手機號
-
后端驗證滑塊數據:
- 成功 -> 校驗手機號是否存在
- 存在 -> 返回允許發送驗證碼
- 不存在 -> 返回錯誤提示手機號不存在
- 失敗 -> 返回滑塊驗證失敗
- 成功 -> 校驗手機號是否存在
-
前端收到允許發送驗證碼后 -> 調用發送驗證碼接口(攜帶手機號)
-
用戶輸入驗證碼 -> 調用登錄接口(手機號+驗證碼)
具體實現
1. 引入依賴
<dependency><groupId>com.anji-plus</groupId><artifactId>captcha-spring-boot-starter</artifactId><version>1.4.0</version>
</dependency>
復制 images文件夾到resources目錄下,項目地址:images · anji-plus/AJ-Captcha - 碼云 - 開源中國
2. 增加yml配置
aj:captcha:jigsaw: classpath:images/jigsaw#滑動驗證,底圖路徑,不配置將使用默認圖片##支持全路徑# 支持項目路徑,以classpath:開頭,取resource目錄下路徑,例:classpath:images/pic-clickpic-click: classpath:images/pic-click# 對于分布式部署的應用,我們建議應用自己實現CaptchaCacheService,比如用Redis或者memcache,# 參考CaptchaCacheServiceRedisImpl.java# 如果應用是單點的,也沒有使用redis,那默認使用內存。# 內存緩存只適合單節點部署的應用,否則驗證碼生產與驗證在節點之間信息不同步,導致失敗。# !!! 注意啦,如果應用有使用spring-boot-starter-data-redis,# 請打開CaptchaCacheServiceRedisImpl.java注釋。# redis -----> SPI: 在resources目錄新建META-INF.services文件夾(兩層),參考當前服務resources。# 緩存local/redis...cache-type: local# local緩存的閾值,達到這個值,清除緩存cache-number: 1000# local定時清除過期緩存(單位秒),設置為0代表不執行timing-clear: 180# 驗證碼類型default兩種都實例化。type: default# 漢字統一使用Unicode,保證程序通過@value讀取到是中文,可通過這個在線轉換;yml格式不需要轉換# https://tool.chinaz.com/tools/unicode.aspx 中文轉Unicode# 右下角水印文字(我的水印)water-mark: water-mark# 右下角水印字體(不配置時,默認使用文泉驛正黑)# 由于宋體等涉及到版權,我們jar中內置了開源字體【文泉驛正黑】# 方式一:直接配置OS層的現有的字體名稱,比如:宋體# 方式二:自定義特定字體,請將字體放到工程resources下fonts文件夾,支持ttf\ttc\otf字體# aj.captcha.water-font=WenQuanZhengHei.ttf# water-font: SourceHanSansCN-Normal.otf# 點選文字驗證碼的文字字體(文泉驛正黑)# aj.captcha.font-type=WenQuanZhengHei.ttf# font-type: SourceHanSansCN-Normal.otf# 校驗滑動拼圖允許誤差偏移量(默認5像素)slip-offset: 5# aes加密坐標開啟或者禁用(true|false)aes-status: true# 滑動干擾項(0/1/2)interference-options: 1history-data-clear-enable: true# 接口請求次數一分鐘限制是否開啟 true|falsereq-frequency-limit-enable: true# 驗證失敗5次,get接口鎖定req-get-lock-limit: 5# 驗證失敗后,鎖定時間間隔,sreq-get-lock-seconds: 60# get接口一分鐘內請求數限制req-get-minute-limit: 30# check接口一分鐘內請求數限制req-check-minute-limit: 60# verify接口一分鐘內請求數限制req-verify-minute-limit: 60
3. 代碼實現
新增CaptchaController.java類
package com.zhou.demo.controller;import com.anji.captcha.model.common.ResponseModel;
import com.anji.captcha.model.vo.CaptchaVO;
import com.anji.captcha.service.CaptchaService;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;import javax.annotation.Resource;/*** 驗證碼操作處理** @author cxstar*/
@RestController
public class CaptchaController {@Resourceprivate CaptchaService captchaService;/*** 獲取驗證碼接口** @param captchaVO 驗證碼參數* "captchaType": "blockPuzzle",* "clientUid": "唯一標識"*/@PostMapping("/captcha/get")public ResponseModel get(@RequestBody CaptchaVO captchaVO) {return captchaService.get(captchaVO);}/*** 校驗滑動驗證** @param captchaVO 驗證碼參數* "captchaType": "blockPuzzle",* "pointJson": "QxIVdlJoWUi04iM+65hTow==", //aes加密坐標信息* "token": "71dd26999e314f9abb0c635336976635" //get請求返回的token*/@PostMapping("/captcha/check")public ResponseModel check(@RequestBody CaptchaVO captchaVO) {return captchaService.check(captchaVO);}}
4.跨域配置(可選)
如果報錯如下:
Access to XMLHttpRequest at 'http://localhost:9001/captcha/get' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
在后端增加過濾配置:
package com.zhou.demo;import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration
public class CorsConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**") // 匹配所有接口.allowedOriginPatterns("*") // 允許所有來源(Spring Boot 2.4+ 推薦用 allowedOriginPatterns).allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS").allowedHeaders("*").allowCredentials(true) // 允許攜帶 Cookie.maxAge(3600); // 預檢請求緩存時間,單位秒}
}
實現效果
如上所述已經實現了基礎的驗證功能
二次驗證的實現
為什么需要二次驗證?
若不進行后端二次驗證,攻擊者可直接構造驗證碼發送請求,繞過滑塊驗證,導致短信接口被惡意刷取。二次驗證通過后端校驗滑塊結果,確保請求合法性。
前端實現
以下內容基于上述基礎實現
1.APP.vue
主要去除了原先的測試組件
<template><router-view/>
</template><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;
}nav {padding: 30px;
}nav a {font-weight: bold;color: #2c3e50;
}nav a.router-link-exact-active {color: #42b983;
}
</style>
2.新增登錄和驗證頁面
LoginPage.vue 登錄頁面
<template><div class="login-container"><h2>登錄</h2><div class="input-group"><input type="tel" v-model="phoneNumber" placeholder="請輸入手機號" @input="validatePhone" /><span v-if="phoneError" class="error-message">{{ phoneError }}</span></div><div class="captcha-group"><input type="text" v-model="captcha" placeholder="請輸入驗證碼" /><button @click="goToSlider" class="captcha-btn" :disabled="!!phoneError">獲取驗證碼</button></div><button @click="login" class="login-btn">登錄</button></div>
</template><script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';const phoneNumber = ref('');
const captcha = ref('');
const phoneError = ref('');
const router = useRouter();const validatePhone = () => {const phoneRegex = /^\d{11}$/;if (!phoneNumber.value) {phoneError.value = '手機號不能為空';} else if (!phoneRegex.test(phoneNumber.value)) {phoneError.value = '請輸入有效的11位手機號';} else {phoneError.value = '';}
};const goToSlider = () => {if (!phoneError.value) {console.log('跳轉到滑塊驗證頁面:', phoneNumber.value)router.push({ path: '/slider', query: { phone: phoneNumber.value } });} else {console.log('手機號格式錯誤,未跳轉:', phoneError.value);}
};const login = () => {if (!phoneNumber.value || !captcha.value || phoneError.value) {alert('請填寫正確的手機號和驗證碼!');return;}console.log('登錄中...', {phoneNumber: phoneNumber.value,captcha: captcha.value});
};
</script><style scoped>
/* 保持原有樣式不變 */
.login-container {width: 300px;margin: 100px auto;padding: 20px;border: 1px solid #ccc;border-radius: 5px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);text-align: center;
}h2 {color: #333;margin-bottom: 20px;
}.input-group {margin-bottom: 15px;position: relative;
}input {width: 100%;padding: 10px;border: 1px solid #ccc;border-radius: 5px;font-size: 14px;
}.captcha-group {display: flex;align-items: center;margin-bottom: 15px;
}.captcha-group input {flex: 1;margin-right: 10px;
}.captcha-btn {padding: 10px 20px;background-color: #ff8c00;color: white;border: none;border-radius: 5px;cursor: pointer;font-size: 14px;
}.captcha-btn:hover {background-color: #e07b00;
}.captcha-btn:disabled {background-color: #ccc;cursor: not-allowed;
}.login-btn {width: 100%;padding: 10px;background-color: #ff8c00;color: white;border: none;border-radius: 5px;font-size: 16px;cursor: pointer;
}.login-btn:hover {background-color: #e07b00;
}.error-message {color: #ff0000;font-size: 12px;position: absolute;top: 100%;left: 0;margin-top: 5px;
}
</style>
SliderVerification.vue 驗證頁面
<template><div><div class="phone-input"><inputv-model="phone"type="text"placeholder="請輸入手機號碼"@input="validatePhone"/><span v-if="phoneError" class="error">{{ phoneError }}</span></div><Verify@success="success":mode="'pop'":captchaType="'blockPuzzle'":imgSize="{ width: '330px', height: '155px' }"ref="verify"/></div>
</template><script>
import Verify from "./../components/verifition/Verify";
import request from "@/components/verifition/utils/axios";export default {name: "App",components: {Verify,},data() {return {phone: "",phoneError: "",};},mounted() {// 顯示驗證彈窗this.$refs.verify.show();},methods: {validatePhone() {// 基本的手機號碼驗證(示例:10-12位數字)const phoneRegex = /^\d{10,12}$/;this.phoneError = phoneRegex.test(this.phone)? "": "請輸入有效的手機號碼(10-12位數字)";},success(params) {// 構建 SmsRequest 數據const smsRequest = {// phone: this.phone, // 來自用戶輸入,這里只做二次驗證的演示,因此不傳入phone參數captchaVerification: params.captchaVerification, // 來自 Verify 組件};debugger// 發送請求到后端request({url: "/sendLoginCode",method: "post",data: smsRequest,}).then((response) => {console.log("短信請求成功:", response.data);// 跳轉到登錄頁面this.$router.push("/login");}).catch((error) => {console.error("短信請求失敗:", error);alert("發送驗證碼失敗,請重試。");});},},
};
</script><style scoped>
.phone-input {margin-bottom: 20px;
}input {padding: 10px;width: 200px;border: 1px solid #ccc;border-radius: 4px;
}.error {color: red;font-size: 12px;margin-top: 5px;display: block;
}
</style>
3.配置路由
src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import LoginPage from '../views/LoginPage.vue';
import SliderVerification from '../views/SliderVerification.vue';const routes = [{ path: '/login', component: LoginPage },{path: '/slider',component: SliderVerification,props: (route) => ({ phone: route.query.phone })},{ path: '/', redirect: '/login' }
];const router = createRouter({history: createWebHistory(),routes
});export default router;
后端實現
新增發送驗證碼接口
/*** 發送驗證碼接口,需要二次驗證** @param captchaVO* @return*/
@RequestMapping(value = "/sendLoginCode", method = RequestMethod.POST)
public ResponseModel sendRegisterCode(@RequestBody CaptchaVO captchaVO) {// 判斷是否已經通過滑塊驗證ResponseModel response = captchaService.verification(captchaVO);System.out.println(response.isSuccess() ? "二次驗證通過" : "二次驗證未通過");// todo 發送驗證碼return response;
}
訪問與實現效果
訪問地址:http://localhost:8081/login
其他問題整合
移動端滑動與瀏覽器默認左滑返回上一頁沖突
解決方案:限制滑動區域不貼邊
避免滑塊靠近屏幕左側邊緣(<20px),可在布局上做調整,例如:
.slider-container {margin-left: 20px; /* 留出邊緣,避免觸發左滑返回 */max-width: 90%;
}
參考鏈接:阻止移動端H5開發瀏覽器默認左右滑動行為_h5 touch 與 瀏覽器左右滑沖突-CSDN博客
Demo地址
https://zhouquanquan.lanzn.com/iTLVG2y754ng
密碼:hb4d