Foreword: Behavior verification code adopts embedded integration method, which is easy to access, safe and efficient. Abandoning the traditional character-type verification code display - filling in characters - comparing answers, the verification code display - collecting user behavior - analyzing user behavior process is adopted. Users only need to generate specified behavior trajectories without manual keyboard input, which is greatly optimized. It solves the problem of poor user experience with traditional verification codes; at the same time, it quickly and accurately returns human-machine judgment results.
Behavior verification code AJ-Captcha
Githu address: Githu address
Code cloud address: Code cloud address
Document address: Document address
1. There are two types of verification codes:
Slider verification code
Text verification code
2. The project introduces AJ-Captcha
2.1 Add dependencies
<dependency>
<groupId>com.anji-plus</groupId>
<artifactId>captcha</artifactId>
<version>1.3.0</version>
</dependency>
2.2 We can just use the official demo directly
1. Backend SpringBoot
The official demo is very complete and can be used right out of the box. The official documentation is also very detailed. It should be noted that the three methods of the control layer are not accessible.
/get is used to obtain images, /check is used for verification, and /verify is used for secondary verification.
@Resource
private CaptchaService captchaService;
@PostMapping("/get") // 获取图片
public ResponseModel get(@RequestBody CaptchaVO data, HttpServletRequest request) {
assert request.getRemoteHost()!=null;
data.setBrowserInfo(getRemoteId(request));
return captchaService.get(data);
}
@PostMapping("/check") // 进行校验
public ResponseModel check(@RequestBody CaptchaVO data, HttpServletRequest request) {
data.setBrowserInfo(getRemoteId(request));
return captchaService.check(data);
}
@PostMapping("/verify") // 二次校验
public ResponseModel verify(@RequestBody CaptchaVO data, HttpServletRequest request) {
return captchaService.verification(data);
}
public static final String getRemoteId(HttpServletRequest request) {
String xfwd = request.getHeader("X-Forwarded-For");
String ip = getRemoteIpFromXfwd(xfwd);
String ua = request.getHeader("user-agent");
if (StringUtils.isNotBlank(ip)) {
return ip + ua;
}
return request.getRemoteAddr() + ua;
}
private static String getRemoteIpFromXfwd(String xfwd) {
if (StringUtils.isNotBlank(xfwd)) {
String[] ipList = xfwd.split(",");
return StringUtils.trim(ipList[0]);
}
return null;
}
1. Get the verification code interface: http://:/captcha/get
Enter:
{
"captchaType": "blockPuzzle", //验证码类型 clickWord
"clientUid": "唯一标识" //客户端UI组件id,组件初始化时设置一次，UUID（非必传参数）
}
Circulation:
{
"repCode": "0000",
"repData": {
"originalImageBase64": "底图base64",
"point": {
//默认不返回的，校验的就是该坐标信息，允许误差范围
"x": 205,
"y": 5
},
"jigsawImageBase64": "滑块图base64",
"token": "71dd26999e314f9abb0c635336976635", //一次校验唯一标识
"secretKey": "16位随机字符串", //aes秘钥，开关控制，前端根据此值决定是否加密
"result": false,
"opAdmin": false
},
"success": true,
"error": false
}
2. Check the verification code interface: http://:/captcha/check
Enter:
{
"captchaType": "blockPuzzle",
"pointJson": "QxIVdlJoWUi04iM+65hTow==", //aes加密坐标信息
"token": "71dd26999e314f9abb0c635336976635" //get请求返回的token
}
Circulation:
{
"repCode": "0000",
"repData": {
"captchaType": "blockPuzzle",
"token": "71dd26999e314f9abb0c635336976635",
"result": true,
"opAdmin": false
},
"success": true,
"error": false
}
2. Front-end Vue
1. Compatibility
IE8+, Chrome, Firefox.(Others not tested)
2. Initialize components
1) Copy the view/vue/src/components/verifition folder to the corresponding directory of your project, and insert the following code on the login page.
2) Install requests and encryption dependencies
npm install axios crypto-js -S
3. Basic example
<template>
<Verify
@success="success" //验证成功的回调函数
:mode="pop" //调用的模式
:captchaType="blockPuzzle" //调用的类型 点选或者滑动
:imgSize="{ width: '330px', height: '155px' }" //图片的大小对象
ref="verify"
></Verify>
//mode="pop"模式
<button @click="useVerify">调用验证组件</button>
</template>
****注: mode为"pop"时,使用组件需要给组件添加ref值,并且手动调用show方法 例: this.$refs.verify.show()****
****注: mode为"fixed"时,无需添加ref值,无需调用show()方法****
<script>
//引入组件
import Verify from "./../../components/verifition/Verify";
export default {
name: 'app',
components: {
Verify
}
methods:{
success(params){
// params 返回的二次验证参数, 和登录参数一起回传给登录接口，方便后台进行二次验证
},
useVerify(){
this.$refs.verify.show()
}
}
}
</script>
4. Callback events
| parameter | type | illustrate |
|---|---|---|
| success(params) | funciton | The callback function after the verification code is successfully matched. Params is the secondary verification parameters that need to be returned to the server. |
| error | funciton | Callback function after verification code matching fails |
| ready | funciton | Callback function for successful verification code initialization |
5. Verification code parameters
| parameter | type | illustrate |
|---|---|---|
| captchaType | String | 1) sliding puzzle blockPuzzle 2) text click clickWord |
| mode | String | Verification code display mode, pop-up, fixed, default: mode: 'pop' |
| vSpace | String | The distance between the verification code image and the mobile bar container. The default unit is px. For example: the interval is 5px, default: vSpace:5 |
| explain | String | The prompt in the slide bar, if not set, the default is: 'Swipe right to complete verification' |
| imgSize | Object | It contains two parameters, width and height, which represent the width and height of the image respectively. It supports percentage settings such as: {width:'400px',height:'200px'} |
6. Default interface api address
| Request URL | Request method |
|---|---|
| /captcha/get | Post |
| /captcha/check | Post |