背景
在PC和App中, 常用圖片滑塊來做輔助驗證, 如下圖所示:
滑塊驗證碼.png
分析
圖片素材
- 背景圖片
- 滑塊形狀
- 滑塊陰影
后臺
- 隨機生成滑動的位置, 得到X,Y軸坐標(以左上角為原點), 根據(jù)圖片素材與坐標
(1)用滑塊陰影覆蓋實際滑塊位置, 生成實際背景圖片
(2)將實際滑塊位置圖形與滑塊形狀重疊, 生成實際滑塊形狀圖片 - 返回數(shù)據(jù)給前臺
(1)實際背景圖片以及其尺寸
(2)實際滑塊形狀圖片以及其尺寸
(3)Y軸坐標, X軸用于校驗 (后臺校驗則不返回, 由前臺校驗可返回)
前臺
顯示背景圖片, 根據(jù)Y軸坐標, 放置滑塊位置, 添加滑動事件, 將滑塊實際滑動的X軸距離進行校驗
Java工具類使用
- 滑塊配置
-
將圖片素材放到項目靜態(tài)文件夾下, 如圖:圖片素材.png
配置工具類中圖片素材的數(shù)量與路徑
-
將圖片素材放到項目靜態(tài)文件夾下, 如圖:
public class SliderCheckUtil {
/**
* 背景圖數(shù)量, 隨機生成之一
*/
private static int BG_COUNT = 3;
/**
* 圖片素材路徑
* 滑塊形狀名稱: slider_icon.png
* 滑動陰影名稱: slider_icon_bg.png
*/
private static final String FILE_PATH = "static/sliderCheck";
/**
* 背景圖片路徑
* 默認背景圖片名稱: slider_bg_%d.jpg
*/
private static final String BG_FILE_PATH = FILE_PATH + "/bg";
/**
* 滑動容錯范圍, 默認:10, 表示校驗X軸時左右10個單位內(nèi)都算正確
*/
private static final int SLIDER_RANGE = 10;
}
- 滑塊對象字段說明
public class SliderCheck {
// 原圖(實際背景圖片) base64
private String resourceImg;
// 原圖寬度
private Integer resourceWidth;
// 原圖調(diào)度
private Integer resourceHeight;
// 拼圖(實際滑塊形狀) base64
private String puzzleImg;
// 拼圖寬度
private Integer puzzleWidth;
// 拼圖調(diào)度
private Integer puzzleHeight;
// X軸坐標
private Integer puzzleXAxis;
// Y軸坐標
private Integer puzzleYAxis;
}
- 調(diào)用工具類, 將滑塊對象返回給前臺
SliderCheck sliderCheck = SliderCheckUtil.build();
- 校驗, 根據(jù)X軸坐標與滑動距離比較
// 可配置 SLIDER_RANGE 容錯值, 默認為10
boolean isSuccess = SliderCheckUtil.verifySlider(sliderCheck, distance);
備注
- Demo提供兩套切圖, 分別為PC端和App端使用, 如尺寸不合適請自行切圖
- PC端圖片尺寸
(1)背景圖: 450x300px
(2)滑塊形狀與陰影: 88x88px - App端圖片尺寸(App請注意px與pt的轉(zhuǎn)換)
(1)背景圖: 300x200px
(2)滑塊形狀與陰影: 88x88px
- 校驗方式只根據(jù)X軸距離, 比較簡單, 可自行增加校驗方式提高安全性, 如:
(1)校驗次數(shù)
(2)超時失敗
(3)X軸加Y軸
(4)加密如:MD5
如果還有不懂的問題, 或者出現(xiàn)其它bug
請查看Demo: Demo
或者給我留言, 喜歡的話, 就給作者一個star
