mirror of
https://gitee.com/dromara/RuoYi-Vue-Plus.git
synced 2026-09-19 09:55:16 +08:00
Pre Merge pull request !62 from keppel/master
This commit is contained in:
keppel
Gitee
commit
0c44dcc675
8
pom.xml
8
pom.xml
@ -32,6 +32,7 @@
|
||||
<redisson.version>3.15.2</redisson.version>
|
||||
<lock4j.version>2.2.1</lock4j.version>
|
||||
<datasource.version>3.4.0</datasource.version>
|
||||
<captcha.version>1.2.8</captcha.version>
|
||||
</properties>
|
||||
|
||||
<!-- 依赖声明 -->
|
||||
@ -181,6 +182,13 @@
|
||||
<version>${ruoyi-vue-plus.version}</version>
|
||||
</dependency>
|
||||
|
||||
<!-- 滑动验证码 -->
|
||||
<dependency>
|
||||
<groupId>com.anji-plus</groupId>
|
||||
<artifactId>spring-boot-starter-captcha</artifactId>
|
||||
<version>${captcha.version}</version>
|
||||
</dependency>
|
||||
|
||||
</dependencies>
|
||||
</dependencyManagement>
|
||||
|
||||
|
||||
@ -54,6 +54,12 @@
|
||||
<artifactId>ruoyi-demo</artifactId>
|
||||
</dependency>
|
||||
|
||||
<!-- 滑动验证码 -->
|
||||
<dependency>
|
||||
<groupId>com.anji-plus</groupId>
|
||||
<artifactId>spring-boot-starter-captcha</artifactId>
|
||||
</dependency>
|
||||
|
||||
</dependencies>
|
||||
|
||||
<build>
|
||||
|
||||
@ -1,121 +0,0 @@
|
||||
package com.ruoyi.web.controller.common;
|
||||
|
||||
import cn.hutool.captcha.AbstractCaptcha;
|
||||
import cn.hutool.captcha.CircleCaptcha;
|
||||
import cn.hutool.captcha.LineCaptcha;
|
||||
import cn.hutool.captcha.ShearCaptcha;
|
||||
import cn.hutool.captcha.generator.CodeGenerator;
|
||||
import cn.hutool.captcha.generator.RandomGenerator;
|
||||
import cn.hutool.core.convert.Convert;
|
||||
import cn.hutool.core.util.IdUtil;
|
||||
import cn.hutool.core.util.StrUtil;
|
||||
import com.ruoyi.common.constant.Constants;
|
||||
import com.ruoyi.common.core.domain.AjaxResult;
|
||||
import com.ruoyi.common.core.redis.RedisCache;
|
||||
import com.ruoyi.framework.captcha.UnsignedMathGenerator;
|
||||
import com.ruoyi.framework.config.properties.CaptchaProperties;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.web.bind.annotation.GetMapping;
|
||||
import org.springframework.web.bind.annotation.RestController;
|
||||
|
||||
import javax.annotation.Resource;
|
||||
import java.util.HashMap;
|
||||
import java.util.Map;
|
||||
import java.util.concurrent.TimeUnit;
|
||||
|
||||
/**
|
||||
* 验证码操作处理
|
||||
*
|
||||
* @author Lion Li
|
||||
*/
|
||||
@RestController
|
||||
public class CaptchaController {
|
||||
|
||||
// 圆圈干扰验证码
|
||||
@Resource(name = "CircleCaptcha")
|
||||
private CircleCaptcha circleCaptcha;
|
||||
// 线段干扰的验证码
|
||||
@Resource(name = "LineCaptcha")
|
||||
private LineCaptcha lineCaptcha;
|
||||
// 扭曲干扰验证码
|
||||
@Resource(name = "ShearCaptcha")
|
||||
private ShearCaptcha shearCaptcha;
|
||||
|
||||
@Autowired
|
||||
private RedisCache redisCache;
|
||||
|
||||
@Autowired
|
||||
private CaptchaProperties captchaProperties;
|
||||
|
||||
/**
|
||||
* 生成验证码
|
||||
*/
|
||||
@GetMapping("/captchaImage")
|
||||
public AjaxResult getCode() {
|
||||
Map<String, Object> ajax = new HashMap<>();
|
||||
Boolean enabled = captchaProperties.getEnabled();
|
||||
ajax.put("enabled", enabled);
|
||||
if (!enabled) {
|
||||
return AjaxResult.success(ajax);
|
||||
}
|
||||
// 保存验证码信息
|
||||
String uuid = IdUtil.simpleUUID();
|
||||
String verifyKey = Constants.CAPTCHA_CODE_KEY + uuid;
|
||||
String code = null;
|
||||
// 生成验证码
|
||||
CodeGenerator codeGenerator;
|
||||
AbstractCaptcha captcha;
|
||||
switch (captchaProperties.getType()) {
|
||||
case "math":
|
||||
codeGenerator = new UnsignedMathGenerator(captchaProperties.getNumberLength());
|
||||
break;
|
||||
case "char":
|
||||
codeGenerator = new RandomGenerator(captchaProperties.getCharLength());
|
||||
break;
|
||||
default:
|
||||
throw new IllegalArgumentException("验证码类型异常");
|
||||
}
|
||||
switch (captchaProperties.getCategory()) {
|
||||
case "line":
|
||||
captcha = lineCaptcha;
|
||||
break;
|
||||
case "circle":
|
||||
captcha = circleCaptcha;
|
||||
break;
|
||||
case "shear":
|
||||
captcha = shearCaptcha;
|
||||
break;
|
||||
default:
|
||||
throw new IllegalArgumentException("验证码类别异常");
|
||||
}
|
||||
captcha.setGenerator(codeGenerator);
|
||||
captcha.createCode();
|
||||
if ("math".equals(captchaProperties.getType())) {
|
||||
code = getCodeResult(captcha.getCode());
|
||||
} else if ("char".equals(captchaProperties.getType())) {
|
||||
code = captcha.getCode();
|
||||
}
|
||||
redisCache.setCacheObject(verifyKey, code, Constants.CAPTCHA_EXPIRATION, TimeUnit.MINUTES);
|
||||
ajax.put("uuid", uuid);
|
||||
ajax.put("img", captcha.getImageBase64());
|
||||
return AjaxResult.success(ajax);
|
||||
}
|
||||
|
||||
private String getCodeResult(String capStr) {
|
||||
int numberLength = captchaProperties.getNumberLength();
|
||||
int a = Convert.toInt(StrUtil.sub(capStr, 0, numberLength).trim());
|
||||
char operator = capStr.charAt(numberLength);
|
||||
int b = Convert.toInt(StrUtil.sub(capStr, numberLength + 1, numberLength + 1 + numberLength).trim());
|
||||
switch (operator) {
|
||||
case '*':
|
||||
return a * b + "";
|
||||
case '+':
|
||||
return a + b + "";
|
||||
case '-':
|
||||
return a - b + "";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,11 +1,15 @@
|
||||
package com.ruoyi.web.controller.system;
|
||||
|
||||
import com.anji.captcha.model.common.ResponseModel;
|
||||
import com.anji.captcha.model.vo.CaptchaVO;
|
||||
import com.anji.captcha.service.CaptchaService;
|
||||
import com.ruoyi.common.constant.Constants;
|
||||
import com.ruoyi.common.core.domain.AjaxResult;
|
||||
import com.ruoyi.common.core.domain.entity.SysMenu;
|
||||
import com.ruoyi.common.core.domain.entity.SysUser;
|
||||
import com.ruoyi.common.core.domain.model.LoginBody;
|
||||
import com.ruoyi.common.core.domain.model.LoginUser;
|
||||
import com.ruoyi.common.exception.BaseException;
|
||||
import com.ruoyi.common.utils.ServletUtils;
|
||||
import com.ruoyi.framework.web.service.SysLoginService;
|
||||
import com.ruoyi.framework.web.service.SysPermissionService;
|
||||
@ -17,10 +21,7 @@ import org.springframework.web.bind.annotation.PostMapping;
|
||||
import org.springframework.web.bind.annotation.RequestBody;
|
||||
import org.springframework.web.bind.annotation.RestController;
|
||||
|
||||
import java.util.HashMap;
|
||||
import java.util.List;
|
||||
import java.util.Map;
|
||||
import java.util.Set;
|
||||
import java.util.*;
|
||||
|
||||
/**
|
||||
* 登录验证
|
||||
@ -28,70 +29,74 @@ import java.util.Set;
|
||||
* @author ruoyi
|
||||
*/
|
||||
@RestController
|
||||
public class SysLoginController
|
||||
{
|
||||
@Autowired
|
||||
private SysLoginService loginService;
|
||||
public class SysLoginController {
|
||||
@Autowired
|
||||
private SysLoginService loginService;
|
||||
|
||||
@Autowired
|
||||
private ISysMenuService menuService;
|
||||
@Autowired
|
||||
private ISysMenuService menuService;
|
||||
|
||||
@Autowired
|
||||
private SysPermissionService permissionService;
|
||||
@Autowired
|
||||
private SysPermissionService permissionService;
|
||||
|
||||
@Autowired
|
||||
private TokenService tokenService;
|
||||
@Autowired
|
||||
private TokenService tokenService;
|
||||
|
||||
/**
|
||||
* 登录方法
|
||||
*
|
||||
* @param loginBody 登录信息
|
||||
* @return 结果
|
||||
*/
|
||||
@PostMapping("/login")
|
||||
public AjaxResult login(@RequestBody LoginBody loginBody)
|
||||
{
|
||||
Map<String,Object> ajax = new HashMap<>();
|
||||
// 生成令牌
|
||||
String token = loginService.login(loginBody.getUsername(), loginBody.getPassword(), loginBody.getCode(),
|
||||
loginBody.getUuid());
|
||||
ajax.put(Constants.TOKEN, token);
|
||||
return AjaxResult.success(ajax);
|
||||
}
|
||||
@Autowired
|
||||
private CaptchaService captchaService;
|
||||
|
||||
/**
|
||||
* 获取用户信息
|
||||
*
|
||||
* @return 用户信息
|
||||
*/
|
||||
@GetMapping("getInfo")
|
||||
public AjaxResult getInfo()
|
||||
{
|
||||
LoginUser loginUser = tokenService.getLoginUser(ServletUtils.getRequest());
|
||||
SysUser user = loginUser.getUser();
|
||||
// 角色集合
|
||||
Set<String> roles = permissionService.getRolePermission(user);
|
||||
// 权限集合
|
||||
Set<String> permissions = permissionService.getMenuPermission(user);
|
||||
Map<String,Object> ajax = new HashMap<>();
|
||||
ajax.put("user", user);
|
||||
ajax.put("roles", roles);
|
||||
ajax.put("permissions", permissions);
|
||||
return AjaxResult.success(ajax);
|
||||
}
|
||||
/**
|
||||
* 登录方法
|
||||
*
|
||||
* @param loginBody 登录信息
|
||||
* @return 结果
|
||||
*/
|
||||
@PostMapping("/login")
|
||||
public AjaxResult login(@RequestBody LoginBody loginBody) {
|
||||
CaptchaVO vo = new CaptchaVO();
|
||||
vo.setCaptchaVerification(loginBody.getCode());
|
||||
ResponseModel verification = captchaService.verification(vo);
|
||||
if (!Objects.equals("0000", verification.getRepCode())) {
|
||||
throw new BaseException("验证码校验失败！");
|
||||
}
|
||||
// 生成令牌
|
||||
String token = loginService.login(loginBody.getUsername(), loginBody.getPassword());
|
||||
Map<String, String> result = new HashMap<>();
|
||||
result.put(Constants.TOKEN, token);
|
||||
return AjaxResult.success(result);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取路由信息
|
||||
*
|
||||
* @return 路由信息
|
||||
*/
|
||||
@GetMapping("getRouters")
|
||||
public AjaxResult getRouters()
|
||||
{
|
||||
LoginUser loginUser = tokenService.getLoginUser(ServletUtils.getRequest());
|
||||
// 用户信息
|
||||
SysUser user = loginUser.getUser();
|
||||
List<SysMenu> menus = menuService.selectMenuTreeByUserId(user.getUserId());
|
||||
return AjaxResult.success(menuService.buildMenus(menus));
|
||||
}
|
||||
/**
|
||||
* 获取用户信息
|
||||
*
|
||||
* @return 用户信息
|
||||
*/
|
||||
@GetMapping("getInfo")
|
||||
public AjaxResult getInfo() {
|
||||
LoginUser loginUser = tokenService.getLoginUser(ServletUtils.getRequest());
|
||||
SysUser user = loginUser.getUser();
|
||||
// 角色集合
|
||||
Set<String> roles = permissionService.getRolePermission(user);
|
||||
// 权限集合
|
||||
Set<String> permissions = permissionService.getMenuPermission(user);
|
||||
Map<String, Object> ajax = new HashMap<>();
|
||||
ajax.put("user", user);
|
||||
ajax.put("roles", roles);
|
||||
ajax.put("permissions", permissions);
|
||||
return AjaxResult.success(ajax);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取路由信息
|
||||
*
|
||||
* @return 路由信息
|
||||
*/
|
||||
@GetMapping("getRouters")
|
||||
public AjaxResult getRouters() {
|
||||
LoginUser loginUser = tokenService.getLoginUser(ServletUtils.getRequest());
|
||||
// 用户信息
|
||||
SysUser user = loginUser.getUser();
|
||||
List<SysMenu> menus = menuService.selectMenuTreeByUserId(user.getUserId());
|
||||
return AjaxResult.success(menuService.buildMenus(menus));
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,17 +13,26 @@ ruoyi:
|
||||
# 获取ip地址开关
|
||||
addressEnabled: true
|
||||
|
||||
captcha:
|
||||
# 验证码开关
|
||||
enabled: true
|
||||
# 验证码类型 math 数组计算 char 字符验证
|
||||
type: math
|
||||
# line 线段干扰 circle 圆圈干扰 shear 扭曲干扰
|
||||
category: circle
|
||||
# 数字验证码位数
|
||||
numberLength: 1
|
||||
# 字符验证码长度
|
||||
charLength: 4
|
||||
aj:
|
||||
captcha:
|
||||
jigsaw: classpath:images/jigsaw
|
||||
pic-click: classpath:images/pic-click
|
||||
cache-type: local
|
||||
type: default
|
||||
water-mark: 美甲啦
|
||||
slip-offset: 5
|
||||
aes-status: true
|
||||
interference-options: 2
|
||||
history-data-clear-enable: true
|
||||
req-frequency-limit-enable: true
|
||||
req-get-lock-limit: 5
|
||||
req-get-lock-seconds: 360
|
||||
# get接口一分钟内请求数限制
|
||||
req-get-minute-limit: 30
|
||||
# check接口一分钟内请求数限制
|
||||
req-check-minute-limit: 60
|
||||
# verify接口一分钟内请求数限制
|
||||
req-verify-minute-limit: 60
|
||||
|
||||
# 开发环境配置
|
||||
server:
|
||||
|
||||
BIN
ruoyi-admin/src/main/resources/images.pic-click/bg1.png
Normal file
BIN
ruoyi-admin/src/main/resources/images.pic-click/bg1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
ruoyi-admin/src/main/resources/images.pic-click/bg10.png
Normal file
BIN
ruoyi-admin/src/main/resources/images.pic-click/bg10.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
BIN
ruoyi-admin/src/main/resources/images.pic-click/bg2.png
Normal file
BIN
ruoyi-admin/src/main/resources/images.pic-click/bg2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
ruoyi-admin/src/main/resources/images.pic-click/bg3.png
Normal file
BIN
ruoyi-admin/src/main/resources/images.pic-click/bg3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
ruoyi-admin/src/main/resources/images.pic-click/bg4.png
Normal file
BIN
ruoyi-admin/src/main/resources/images.pic-click/bg4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
BIN
ruoyi-admin/src/main/resources/images.pic-click/bg5.png
Normal file
BIN
ruoyi-admin/src/main/resources/images.pic-click/bg5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
ruoyi-admin/src/main/resources/images.pic-click/bg6.png
Normal file
BIN
ruoyi-admin/src/main/resources/images.pic-click/bg6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
ruoyi-admin/src/main/resources/images.pic-click/bg7.png
Normal file
BIN
ruoyi-admin/src/main/resources/images.pic-click/bg7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
BIN
ruoyi-admin/src/main/resources/images.pic-click/bg8.png
Normal file
BIN
ruoyi-admin/src/main/resources/images.pic-click/bg8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
BIN
ruoyi-admin/src/main/resources/images.pic-click/bg9.png
Normal file
BIN
ruoyi-admin/src/main/resources/images.pic-click/bg9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
ruoyi-admin/src/main/resources/images/jigsaw/original/bg1.png
Normal file
BIN
ruoyi-admin/src/main/resources/images/jigsaw/original/bg1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
BIN
ruoyi-admin/src/main/resources/images/jigsaw/original/bg2.png
Normal file
BIN
ruoyi-admin/src/main/resources/images/jigsaw/original/bg2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
BIN
ruoyi-admin/src/main/resources/images/jigsaw/original/bg3.png
Normal file
BIN
ruoyi-admin/src/main/resources/images/jigsaw/original/bg3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
BIN
ruoyi-admin/src/main/resources/images/jigsaw/original/bg4.png
Normal file
BIN
ruoyi-admin/src/main/resources/images/jigsaw/original/bg4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
BIN
ruoyi-admin/src/main/resources/images/jigsaw/original/bg5.png
Normal file
BIN
ruoyi-admin/src/main/resources/images/jigsaw/original/bg5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
BIN
ruoyi-admin/src/main/resources/images/jigsaw/original/bg6.png
Normal file
BIN
ruoyi-admin/src/main/resources/images/jigsaw/original/bg6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
BIN
ruoyi-admin/src/main/resources/images/jigsaw/original/bg7.png
Normal file
BIN
ruoyi-admin/src/main/resources/images/jigsaw/original/bg7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
BIN
ruoyi-admin/src/main/resources/images/jigsaw/original/bg8.png
Normal file
BIN
ruoyi-admin/src/main/resources/images/jigsaw/original/bg8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
BIN
ruoyi-admin/src/main/resources/images/jigsaw/original/bg9.png
Normal file
BIN
ruoyi-admin/src/main/resources/images/jigsaw/original/bg9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
BIN
ruoyi-admin/src/main/resources/images/jigsaw/slidingBlock/1.png
Normal file
BIN
ruoyi-admin/src/main/resources/images/jigsaw/slidingBlock/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
ruoyi-admin/src/main/resources/images/jigsaw/slidingBlock/2.png
Normal file
BIN
ruoyi-admin/src/main/resources/images/jigsaw/slidingBlock/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
ruoyi-admin/src/main/resources/images/jigsaw/slidingBlock/3.png
Normal file
BIN
ruoyi-admin/src/main/resources/images/jigsaw/slidingBlock/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
ruoyi-admin/src/main/resources/images/jigsaw/slidingBlock/4.png
Normal file
BIN
ruoyi-admin/src/main/resources/images/jigsaw/slidingBlock/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
@ -1,85 +0,0 @@
|
||||
package com.ruoyi.framework.captcha;
|
||||
|
||||
import cn.hutool.captcha.generator.CodeGenerator;
|
||||
import cn.hutool.core.math.Calculator;
|
||||
import cn.hutool.core.util.CharUtil;
|
||||
import cn.hutool.core.util.RandomUtil;
|
||||
import cn.hutool.core.util.StrUtil;
|
||||
|
||||
/**
|
||||
* 无符号计算生成器
|
||||
*
|
||||
* @author Lion Li
|
||||
*/
|
||||
public class UnsignedMathGenerator implements CodeGenerator {
|
||||
|
||||
private static final long serialVersionUID = -5514819971774091076L;
|
||||
|
||||
private static final String operators = "+-*";
|
||||
|
||||
/**
|
||||
* 参与计算数字最大长度
|
||||
*/
|
||||
private final int numberLength;
|
||||
|
||||
/**
|
||||
* 构造
|
||||
*/
|
||||
public UnsignedMathGenerator() {
|
||||
this(2);
|
||||
}
|
||||
|
||||
/**
|
||||
* 构造
|
||||
*
|
||||
* @param numberLength 参与计算最大数字位数
|
||||
*/
|
||||
public UnsignedMathGenerator(int numberLength) {
|
||||
this.numberLength = numberLength;
|
||||
}
|
||||
|
||||
@Override
|
||||
public String generate() {
|
||||
final int limit = getLimit();
|
||||
int min = RandomUtil.randomInt(limit);
|
||||
int max = RandomUtil.randomInt(min, limit);
|
||||
String number1 = Integer.toString(max);
|
||||
String number2 = Integer.toString(min);
|
||||
number1 = StrUtil.padAfter(number1, this.numberLength, CharUtil.SPACE);
|
||||
number2 = StrUtil.padAfter(number2, this.numberLength, CharUtil.SPACE);
|
||||
|
||||
return number1 + RandomUtil.randomChar(operators) + number2 + '=';
|
||||
}
|
||||
|
||||
@Override
|
||||
public boolean verify(String code, String userInputCode) {
|
||||
int result;
|
||||
try {
|
||||
result = Integer.parseInt(userInputCode);
|
||||
} catch (NumberFormatException e) {
|
||||
// 用户输入非数字
|
||||
return false;
|
||||
}
|
||||
|
||||
final int calculateResult = (int) Calculator.conversion(code);
|
||||
return result == calculateResult;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取验证码长度
|
||||
*
|
||||
* @return 验证码长度
|
||||
*/
|
||||
public int getLength() {
|
||||
return this.numberLength * 2 + 2;
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据长度获取参与计算数字最大值
|
||||
*
|
||||
* @return 最大值
|
||||
*/
|
||||
private int getLimit() {
|
||||
return Integer.parseInt("1" + StrUtil.repeat('0', this.numberLength));
|
||||
}
|
||||
}
|
||||
@ -1,55 +0,0 @@
|
||||
package com.ruoyi.framework.config;
|
||||
|
||||
import java.awt.*;
|
||||
|
||||
import cn.hutool.captcha.*;
|
||||
import org.springframework.context.annotation.Bean;
|
||||
import org.springframework.context.annotation.Configuration;
|
||||
|
||||
/**
|
||||
* 验证码配置
|
||||
*
|
||||
* @author Lion Li
|
||||
*/
|
||||
@Configuration
|
||||
public class CaptchaConfig {
|
||||
|
||||
private final int width = 160;
|
||||
private final int height = 60;
|
||||
private final Color background = Color.PINK;
|
||||
private final Font font = new Font("Arial", Font.BOLD, 48);
|
||||
|
||||
/**
|
||||
* 圆圈干扰验证码
|
||||
*/
|
||||
@Bean(name = "CircleCaptcha")
|
||||
public CircleCaptcha getCircleCaptcha() {
|
||||
CircleCaptcha captcha = CaptchaUtil.createCircleCaptcha(width, height);
|
||||
captcha.setBackground(background);
|
||||
captcha.setFont(font);
|
||||
return captcha;
|
||||
}
|
||||
|
||||
/**
|
||||
* 线段干扰的验证码
|
||||
*/
|
||||
@Bean(name = "LineCaptcha")
|
||||
public LineCaptcha getLineCaptcha() {
|
||||
LineCaptcha captcha = CaptchaUtil.createLineCaptcha(width, height);
|
||||
captcha.setBackground(background);
|
||||
captcha.setFont(font);
|
||||
return captcha;
|
||||
}
|
||||
|
||||
/**
|
||||
* 扭曲干扰验证码
|
||||
*/
|
||||
@Bean(name = "ShearCaptcha")
|
||||
public ShearCaptcha getShearCaptcha() {
|
||||
ShearCaptcha captcha = CaptchaUtil.createShearCaptcha(width, height);
|
||||
captcha.setBackground(background);
|
||||
captcha.setFont(font);
|
||||
return captcha;
|
||||
}
|
||||
|
||||
}
|
||||
@ -101,7 +101,7 @@ public class SecurityConfig extends WebSecurityConfigurerAdapter
|
||||
// 过滤请求
|
||||
.authorizeRequests()
|
||||
// 对于登录login 验证码captchaImage 允许匿名访问
|
||||
.antMatchers("/login", "/captchaImage").anonymous()
|
||||
.antMatchers("/login", "/captcha/get", "/captcha/check").anonymous()
|
||||
.antMatchers(
|
||||
HttpMethod.GET,
|
||||
"/*.html",
|
||||
|
||||
@ -1,41 +0,0 @@
|
||||
package com.ruoyi.framework.config.properties;
|
||||
|
||||
import lombok.Data;
|
||||
import org.springframework.boot.context.properties.ConfigurationProperties;
|
||||
import org.springframework.stereotype.Component;
|
||||
|
||||
/**
|
||||
* 验证码 配置属性
|
||||
*
|
||||
* @author Lion Li
|
||||
*/
|
||||
@Data
|
||||
@Component
|
||||
@ConfigurationProperties(prefix = "captcha")
|
||||
public class CaptchaProperties {
|
||||
|
||||
/**
|
||||
* 验证码开关
|
||||
*/
|
||||
private Boolean enabled;
|
||||
|
||||
/**
|
||||
* 验证码类型
|
||||
*/
|
||||
private String type;
|
||||
|
||||
/**
|
||||
* 验证码类别
|
||||
*/
|
||||
private String category;
|
||||
|
||||
/**
|
||||
* 数字验证码位数
|
||||
*/
|
||||
private Integer numberLength;
|
||||
|
||||
/**
|
||||
* 字符验证码长度
|
||||
*/
|
||||
private Integer charLength;
|
||||
}
|
||||
@ -5,13 +5,10 @@ import com.ruoyi.common.core.domain.entity.SysUser;
|
||||
import com.ruoyi.common.core.domain.model.LoginUser;
|
||||
import com.ruoyi.common.core.redis.RedisCache;
|
||||
import com.ruoyi.common.exception.CustomException;
|
||||
import com.ruoyi.common.exception.user.CaptchaException;
|
||||
import com.ruoyi.common.exception.user.CaptchaExpireException;
|
||||
import com.ruoyi.common.exception.user.UserPasswordNotMatchException;
|
||||
import com.ruoyi.common.utils.DateUtils;
|
||||
import com.ruoyi.common.utils.MessageUtils;
|
||||
import com.ruoyi.common.utils.ServletUtils;
|
||||
import com.ruoyi.framework.config.properties.CaptchaProperties;
|
||||
import com.ruoyi.system.service.ISysUserService;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.security.authentication.AuthenticationManager;
|
||||
@ -29,87 +26,63 @@ import javax.servlet.http.HttpServletRequest;
|
||||
* @author ruoyi
|
||||
*/
|
||||
@Component
|
||||
public class SysLoginService
|
||||
{
|
||||
@Autowired
|
||||
private TokenService tokenService;
|
||||
public class SysLoginService {
|
||||
@Autowired
|
||||
private TokenService tokenService;
|
||||
|
||||
@Resource
|
||||
private AuthenticationManager authenticationManager;
|
||||
|
||||
@Autowired
|
||||
private RedisCache redisCache;
|
||||
@Resource
|
||||
private AuthenticationManager authenticationManager;
|
||||
|
||||
@Autowired
|
||||
private CaptchaProperties captchaProperties;
|
||||
private RedisCache redisCache;
|
||||
|
||||
/* @Autowired
|
||||
private CaptchaProperties captchaProperties;*/
|
||||
|
||||
@Autowired
|
||||
private ISysUserService userService;
|
||||
private ISysUserService userService;
|
||||
|
||||
@Autowired
|
||||
private AsyncService asyncService;
|
||||
|
||||
/**
|
||||
* 登录验证
|
||||
*
|
||||
* @param username 用户名
|
||||
* @param password 密码
|
||||
* @param code 验证码
|
||||
* @param uuid 唯一标识
|
||||
* @return 结果
|
||||
*/
|
||||
public String login(String username, String password, String code, String uuid)
|
||||
{
|
||||
/**
|
||||
* 登录验证
|
||||
*
|
||||
* @param username 用户名
|
||||
* @param password 密码
|
||||
* @return 结果
|
||||
*/
|
||||
public String login(String username, String password) {
|
||||
HttpServletRequest request = ServletUtils.getRequest();
|
||||
if(captchaProperties.getEnabled()) {
|
||||
String verifyKey = Constants.CAPTCHA_CODE_KEY + uuid;
|
||||
String captcha = redisCache.getCacheObject(verifyKey);
|
||||
redisCache.deleteObject(verifyKey);
|
||||
if (captcha == null) {
|
||||
asyncService.recordLogininfor(username, Constants.LOGIN_FAIL, MessageUtils.message("user.jcaptcha.expire"), request);
|
||||
throw new CaptchaExpireException();
|
||||
}
|
||||
if (!code.equalsIgnoreCase(captcha)) {
|
||||
asyncService.recordLogininfor(username, Constants.LOGIN_FAIL, MessageUtils.message("user.jcaptcha.error"), request);
|
||||
throw new CaptchaException();
|
||||
// 用户验证
|
||||
Authentication authentication;
|
||||
try {
|
||||
// 该方法会去调用UserDetailsServiceImpl.loadUserByUsername
|
||||
authentication = authenticationManager
|
||||
.authenticate(new UsernamePasswordAuthenticationToken(username, password));
|
||||
} catch (Exception e) {
|
||||
if (e instanceof BadCredentialsException) {
|
||||
asyncService.recordLogininfor(username, Constants.LOGIN_FAIL, MessageUtils.message("user.password.not.match"), request);
|
||||
throw new UserPasswordNotMatchException();
|
||||
} else {
|
||||
asyncService.recordLogininfor(username, Constants.LOGIN_FAIL, e.getMessage(), request);
|
||||
throw new CustomException(e.getMessage());
|
||||
}
|
||||
}
|
||||
// 用户验证
|
||||
Authentication authentication = null;
|
||||
try
|
||||
{
|
||||
// 该方法会去调用UserDetailsServiceImpl.loadUserByUsername
|
||||
authentication = authenticationManager
|
||||
.authenticate(new UsernamePasswordAuthenticationToken(username, password));
|
||||
}
|
||||
catch (Exception e)
|
||||
{
|
||||
if (e instanceof BadCredentialsException)
|
||||
{
|
||||
asyncService.recordLogininfor(username, Constants.LOGIN_FAIL, MessageUtils.message("user.password.not.match"), request);
|
||||
throw new UserPasswordNotMatchException();
|
||||
}
|
||||
else
|
||||
{
|
||||
asyncService.recordLogininfor(username, Constants.LOGIN_FAIL, e.getMessage(), request);
|
||||
throw new CustomException(e.getMessage());
|
||||
}
|
||||
}
|
||||
asyncService.recordLogininfor(username, Constants.LOGIN_SUCCESS, MessageUtils.message("user.login.success"), request);
|
||||
LoginUser loginUser = (LoginUser) authentication.getPrincipal();
|
||||
recordLoginInfo(loginUser.getUser());
|
||||
// 生成token
|
||||
return tokenService.createToken(loginUser);
|
||||
}
|
||||
LoginUser loginUser = (LoginUser) authentication.getPrincipal();
|
||||
recordLoginInfo(loginUser.getUser());
|
||||
// 生成token
|
||||
return tokenService.createToken(loginUser);
|
||||
}
|
||||
|
||||
/**
|
||||
* 记录登录信息
|
||||
*/
|
||||
public void recordLoginInfo(SysUser user)
|
||||
{
|
||||
user.setLoginIp(ServletUtils.getClientIP());
|
||||
user.setLoginDate(DateUtils.getNowDate());
|
||||
/**
|
||||
* 记录登录信息
|
||||
*/
|
||||
public void recordLoginInfo(SysUser user) {
|
||||
user.setLoginIp(ServletUtils.getClientIP());
|
||||
user.setLoginDate(DateUtils.getNowDate());
|
||||
user.setUpdateBy(user.getUserName());
|
||||
userService.updateUserProfile(user);
|
||||
}
|
||||
userService.updateUserProfile(user);
|
||||
}
|
||||
}
|
||||
|
||||
@ -40,6 +40,7 @@
|
||||
"axios": "0.21.0",
|
||||
"clipboard": "2.0.6",
|
||||
"core-js": "3.8.1",
|
||||
"crypto-js": "^4.0.0",
|
||||
"echarts": "4.9.0",
|
||||
"element-ui": "2.15.2",
|
||||
"file-saver": "2.0.4",
|
||||
@ -50,6 +51,7 @@
|
||||
"jsencrypt": "3.0.0-rc.1",
|
||||
"nprogress": "0.2.0",
|
||||
"quill": "1.3.7",
|
||||
"quill-image-super-solution-module": "^2.0.0",
|
||||
"screenfull": "5.0.2",
|
||||
"sortablejs": "1.10.2",
|
||||
"vue": "2.6.12",
|
||||
|
||||
BIN
ruoyi-ui/src/assets/images/default.jpg
Normal file
BIN
ruoyi-ui/src/assets/images/default.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
492
ruoyi-ui/src/components/Verifition/Verify.vue
Normal file
492
ruoyi-ui/src/components/Verifition/Verify.vue
Normal file
File diff suppressed because one or more lines are too long
256
ruoyi-ui/src/components/Verifition/Verify/VerifyPoints.vue
Normal file
256
ruoyi-ui/src/components/Verifition/Verify/VerifyPoints.vue
Normal file
@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<div style="position: relative"
|
||||
>
|
||||
<div class="verify-img-out">
|
||||
<div class="verify-img-panel" :style="{'width': setSize.imgWidth,
|
||||
'height': setSize.imgHeight,
|
||||
'background-size' : setSize.imgWidth + ' '+ setSize.imgHeight,
|
||||
'margin-bottom': vSpace + 'px'}"
|
||||
>
|
||||
<div class="verify-refresh" style="z-index:3" @click="refresh" v-show="showRefresh">
|
||||
<i class="iconfont icon-refresh"></i>
|
||||
</div>
|
||||
<img :src="pointBackImgBase?('data:image/png;base64,'+pointBackImgBase):defaultImg"
|
||||
ref="canvas"
|
||||
alt="" style="width:100%;height:100%;display:block"
|
||||
@click="bindingClick?canvasClick($event):undefined">
|
||||
|
||||
<div v-for="(tempPoint, index) in tempPoints" :key="index" class="point-area"
|
||||
:style="{
|
||||
'background-color':'#1abd6c',
|
||||
color:'#fff',
|
||||
'z-index':9999,
|
||||
width:'20px',
|
||||
height:'20px',
|
||||
'text-align':'center',
|
||||
'line-height':'20px',
|
||||
'border-radius': '50%',
|
||||
position:'absolute',
|
||||
top:parseInt(tempPoint.y-10) + 'px',
|
||||
left:parseInt(tempPoint.x-10) + 'px'
|
||||
}">
|
||||
{{index + 1}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 'height': this.barSize.height, -->
|
||||
<div class="verify-bar-area"
|
||||
:style="{'width': setSize.imgWidth,
|
||||
'color': this.barAreaColor,
|
||||
'border-color': this.barAreaBorderColor,
|
||||
'line-height':this.barSize.height}">
|
||||
<span class="verify-msg">{{text}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/babel">
|
||||
/**
|
||||
* VerifyPoints
|
||||
* @description 点选
|
||||
* */
|
||||
import {resetSize, _code_chars, _code_color1, _code_color2} from './../utils/util'
|
||||
import {aesEncrypt} from "./../utils/ase"
|
||||
import {reqGet,reqCheck} from "./../api/index"
|
||||
|
||||
export default {
|
||||
name: 'VerifyPoints',
|
||||
props: {
|
||||
//弹出式pop，固定fixed
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'fixed'
|
||||
},
|
||||
captchaType:{
|
||||
type:String,
|
||||
},
|
||||
//间隔
|
||||
vSpace: {
|
||||
type: Number,
|
||||
default: 5
|
||||
},
|
||||
imgSize: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
width: '310px',
|
||||
height: '155px'
|
||||
}
|
||||
}
|
||||
},
|
||||
barSize: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
width: '310px',
|
||||
height: '40px'
|
||||
}
|
||||
}
|
||||
},
|
||||
defaultImg: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
secretKey:'', //后端返回的ase加密秘钥
|
||||
checkNum:3, //默认需要点击的字数
|
||||
fontPos: [], //选中的坐标信息
|
||||
checkPosArr: [], //用户点击的坐标
|
||||
num: 1, //点击的记数
|
||||
pointBackImgBase:'', //后端获取到的背景图片
|
||||
poinTextList:[], //后端返回的点击字体顺序
|
||||
backToken:'', //后端返回的token值
|
||||
setSize: {
|
||||
imgHeight: 0,
|
||||
imgWidth: 0,
|
||||
barHeight: 0,
|
||||
barWidth: 0
|
||||
},
|
||||
tempPoints: [],
|
||||
text: '',
|
||||
barAreaColor: undefined,
|
||||
barAreaBorderColor: undefined,
|
||||
showRefresh: true,
|
||||
bindingClick: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
resetSize() {
|
||||
return resetSize
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
//加载页面
|
||||
this.fontPos.splice(0, this.fontPos.length)
|
||||
this.checkPosArr.splice(0, this.checkPosArr.length)
|
||||
this.num = 1
|
||||
this.getPictrue();
|
||||
this.$nextTick(() => {
|
||||
this.setSize = this.resetSize(this) //重新设置宽度高度
|
||||
this.$parent.$emit('ready', this)
|
||||
})
|
||||
},
|
||||
canvasClick(e) {
|
||||
this.checkPosArr.push(this.getMousePos(this.$refs.canvas, e));
|
||||
if (this.num == this.checkNum) {
|
||||
this.num = this.createPoint(this.getMousePos(this.$refs.canvas, e));
|
||||
//按比例转换坐标值
|
||||
this.checkPosArr = this.pointTransfrom(this.checkPosArr,this.setSize);
|
||||
//等创建坐标执行完
|
||||
setTimeout(() => {
|
||||
// var flag = this.comparePos(this.fontPos, this.checkPosArr);
|
||||
//发送后端请求
|
||||
var captchaVerification = this.secretKey? aesEncrypt(this.backToken+'---'+JSON.stringify(this.checkPosArr),this.secretKey):this.backToken+'---'+JSON.stringify(this.checkPosArr)
|
||||
let data = {
|
||||
captchaType:this.captchaType,
|
||||
"pointJson":this.secretKey? aesEncrypt(JSON.stringify(this.checkPosArr),this.secretKey):JSON.stringify(this.checkPosArr),
|
||||
"token":this.backToken
|
||||
}
|
||||
reqCheck(data).then(res=>{
|
||||
if (res.repCode == "0000") {
|
||||
this.barAreaColor = '#4cae4c'
|
||||
this.barAreaBorderColor = '#5cb85c'
|
||||
this.text = '验证成功'
|
||||
this.bindingClick = false
|
||||
if (this.mode=='pop') {
|
||||
setTimeout(()=>{
|
||||
this.$parent.clickShow = false;
|
||||
this.refresh();
|
||||
},1500)
|
||||
}
|
||||
this.$parent.$emit('success', {captchaVerification})
|
||||
}else{
|
||||
this.$parent.$emit('error', this)
|
||||
this.barAreaColor = '#d9534f'
|
||||
this.barAreaBorderColor = '#d9534f'
|
||||
this.text = '验证失败'
|
||||
setTimeout(() => {
|
||||
this.refresh();
|
||||
}, 700);
|
||||
}
|
||||
})
|
||||
}, 400);
|
||||
}
|
||||
if (this.num < this.checkNum) {
|
||||
this.num = this.createPoint(this.getMousePos(this.$refs.canvas, e));
|
||||
}
|
||||
},
|
||||
|
||||
//获取坐标
|
||||
getMousePos: function (obj, e) {
|
||||
var x = e.offsetX
|
||||
var y = e.offsetY
|
||||
return {x, y}
|
||||
},
|
||||
//创建坐标点
|
||||
createPoint: function (pos) {
|
||||
this.tempPoints.push(Object.assign({}, pos))
|
||||
return ++this.num;
|
||||
},
|
||||
refresh: function () {
|
||||
this.tempPoints.splice(0, this.tempPoints.length)
|
||||
this.barAreaColor = '#000'
|
||||
this.barAreaBorderColor = '#ddd'
|
||||
this.bindingClick = true
|
||||
this.fontPos.splice(0, this.fontPos.length)
|
||||
this.checkPosArr.splice(0, this.checkPosArr.length)
|
||||
this.num = 1
|
||||
this.getPictrue();
|
||||
this.text = '验证失败'
|
||||
this.showRefresh = true
|
||||
},
|
||||
|
||||
// 请求背景图片和验证图片
|
||||
getPictrue(){
|
||||
let data = {
|
||||
captchaType:this.captchaType,
|
||||
clientUid: localStorage.getItem('point'),
|
||||
ts: Date.now(), // 现在的时间戳
|
||||
}
|
||||
reqGet(data).then(res=>{
|
||||
if (res.repCode == "0000") {
|
||||
this.pointBackImgBase = res.repData.originalImageBase64
|
||||
this.backToken = res.repData.token
|
||||
this.secretKey = res.repData.secretKey
|
||||
this.poinTextList = res.repData.wordList
|
||||
this.text = '请依次点击【' + this.poinTextList.join(",") + '】'
|
||||
}else{
|
||||
this.text = res.repMsg;
|
||||
}
|
||||
|
||||
// 判断接口请求次数是否失效
|
||||
if(res.repCode == '6201') {
|
||||
this.pointBackImgBase = null
|
||||
}
|
||||
})
|
||||
},
|
||||
//坐标转换函数
|
||||
pointTransfrom(pointArr,imgSize){
|
||||
var newPointArr = pointArr.map(p=>{
|
||||
let x = Math.round(310 * p.x/parseInt(imgSize.imgWidth))
|
||||
let y =Math.round(155 * p.y/parseInt(imgSize.imgHeight))
|
||||
return {x,y}
|
||||
})
|
||||
// console.log(newPointArr,"newPointArr");
|
||||
return newPointArr
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// type变化则全面刷新
|
||||
type: {
|
||||
immediate: true,
|
||||
handler() {
|
||||
this.init()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 禁止拖拽
|
||||
this.$el.onselectstart = function () {
|
||||
return false
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
359
ruoyi-ui/src/components/Verifition/Verify/VerifySlide.vue
Normal file
359
ruoyi-ui/src/components/Verifition/Verify/VerifySlide.vue
Normal file
@ -0,0 +1,359 @@
|
||||
<template>
|
||||
<div style="position: relative;">
|
||||
<div v-if="type === '2'" class="verify-img-out"
|
||||
:style="{height: (parseInt(setSize.imgHeight) + vSpace) + 'px'}"
|
||||
>
|
||||
<div class="verify-img-panel" :style="{width: setSize.imgWidth,
|
||||
height: setSize.imgHeight,}">
|
||||
<img :src="backImgBase?('data:image/png;base64,'+backImgBase):defaultImg" alt="" style="width:100%;height:100%;display:block">
|
||||
<div class="verify-refresh" @click="refresh" v-show="showRefresh"><i class="iconfont icon-refresh"></i>
|
||||
</div>
|
||||
<transition name="tips">
|
||||
<span class="verify-tips" v-if="tipWords" :class="passFlag ?'suc-bg':'err-bg'">{{tipWords}}</span>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 公共部分 -->
|
||||
<div class="verify-bar-area" :style="{width: setSize.imgWidth,
|
||||
height: barSize.height,
|
||||
'line-height':barSize.height}">
|
||||
<span class="verify-msg" v-text="text"></span>
|
||||
<div class="verify-left-bar"
|
||||
:style="{width: (leftBarWidth!==undefined)?leftBarWidth: barSize.height, height: barSize.height, 'border-color': leftBarBorderColor, transaction: transitionWidth}">
|
||||
<span class="verify-msg" v-text="finishText"></span>
|
||||
<div class="verify-move-block"
|
||||
@touchstart="start"
|
||||
@mousedown="start"
|
||||
:style="{width: barSize.height, height: barSize.height, 'background-color': moveBlockBackgroundColor, left: moveBlockLeft, transition: transitionLeft}">
|
||||
<i :class="['verify-icon iconfont', iconClass]"
|
||||
:style="{color: iconColor}"></i>
|
||||
<div v-if="type === '2'" class="verify-sub-block"
|
||||
:style="{'width':Math.floor(parseInt(setSize.imgWidth)*47/310)+ 'px',
|
||||
'height': setSize.imgHeight,
|
||||
'top':'-' + (parseInt(setSize.imgHeight) + vSpace) + 'px',
|
||||
'background-size': setSize.imgWidth + ' ' + setSize.imgHeight,
|
||||
}">
|
||||
<img :src="'data:image/png;base64,'+blockBackImgBase" alt="" style="width:100%;height:100%;display:block">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/babel">
|
||||
/**
|
||||
* VerifySlide
|
||||
* @description 滑块
|
||||
* */
|
||||
import {aesEncrypt} from "./../utils/ase"
|
||||
import {resetSize} from './../utils/util'
|
||||
import {reqGet,reqCheck} from "./../api/index"
|
||||
|
||||
// "captchaType":"blockPuzzle",
|
||||
export default {
|
||||
name: 'VerifySlide',
|
||||
props: {
|
||||
captchaType:{
|
||||
type:String,
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: '1'
|
||||
},
|
||||
//弹出式pop，固定fixed
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'fixed'
|
||||
},
|
||||
vSpace: {
|
||||
type: Number,
|
||||
default: 5
|
||||
},
|
||||
explain: {
|
||||
type: String,
|
||||
default: '向右滑动完成验证'
|
||||
},
|
||||
imgSize: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
width: '310px',
|
||||
height: '155px'
|
||||
}
|
||||
}
|
||||
},
|
||||
blockSize: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
width: '50px',
|
||||
height: '50px'
|
||||
}
|
||||
}
|
||||
},
|
||||
barSize: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
width: '310px',
|
||||
height: '40px'
|
||||
}
|
||||
}
|
||||
},
|
||||
defaultImg: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
secretKey:'', //后端返回的加密秘钥 字段
|
||||
passFlag:'', //是否通过的标识
|
||||
backImgBase:'', //验证码背景图片
|
||||
blockBackImgBase:'', //验证滑块的背景图片
|
||||
backToken:"", //后端返回的唯一token值
|
||||
startMoveTime:"", //移动开始的时间
|
||||
endMovetime:'', //移动结束的时间
|
||||
tipsBackColor:'', //提示词的背景颜色
|
||||
tipWords:'',
|
||||
text: '',
|
||||
finishText:'',
|
||||
setSize: {
|
||||
imgHeight: 0,
|
||||
imgWidth: 0,
|
||||
barHeight: 0,
|
||||
barWidth: 0
|
||||
},
|
||||
top: 0,
|
||||
left: 0,
|
||||
moveBlockLeft: undefined,
|
||||
leftBarWidth: undefined,
|
||||
// 移动中样式
|
||||
moveBlockBackgroundColor: undefined,
|
||||
leftBarBorderColor: '#ddd',
|
||||
iconColor: undefined,
|
||||
iconClass: 'icon-right',
|
||||
status: false, //鼠标状态
|
||||
isEnd: false, //是够验证完成
|
||||
showRefresh: true,
|
||||
transitionLeft: '',
|
||||
transitionWidth: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
barArea() {
|
||||
return this.$el.querySelector('.verify-bar-area')
|
||||
},
|
||||
resetSize() {
|
||||
return resetSize
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.text = this.explain
|
||||
this.getPictrue();
|
||||
this.$nextTick(() => {
|
||||
let setSize = this.resetSize(this) //重新设置宽度高度
|
||||
for (let key in setSize) {
|
||||
this.$set(this.setSize, key, setSize[key])
|
||||
}
|
||||
this.$parent.$emit('ready', this)
|
||||
})
|
||||
|
||||
var _this = this
|
||||
|
||||
window.removeEventListener("touchmove", function (e) {
|
||||
_this.move(e);
|
||||
});
|
||||
window.removeEventListener("mousemove", function (e) {
|
||||
_this.move(e);
|
||||
});
|
||||
|
||||
//鼠标松开
|
||||
window.removeEventListener("touchend", function () {
|
||||
_this.end();
|
||||
});
|
||||
window.removeEventListener("mouseup", function () {
|
||||
_this.end();
|
||||
});
|
||||
|
||||
window.addEventListener("touchmove", function (e) {
|
||||
_this.move(e);
|
||||
});
|
||||
window.addEventListener("mousemove", function (e) {
|
||||
_this.move(e);
|
||||
});
|
||||
|
||||
//鼠标松开
|
||||
window.addEventListener("touchend", function () {
|
||||
_this.end();
|
||||
});
|
||||
window.addEventListener("mouseup", function () {
|
||||
_this.end();
|
||||
});
|
||||
},
|
||||
|
||||
//鼠标按下
|
||||
start: function (e) {
|
||||
e = e || window.event
|
||||
if (!e.touches) { //兼容PC端
|
||||
var x = e.clientX;
|
||||
} else { //兼容移动端
|
||||
var x = e.touches[0].pageX;
|
||||
}
|
||||
this.startLeft =Math.floor(x - this.barArea.getBoundingClientRect().left);
|
||||
this.startMoveTime = +new Date(); //开始滑动的时间
|
||||
if (this.isEnd == false) {
|
||||
this.text = ''
|
||||
this.moveBlockBackgroundColor = '#337ab7'
|
||||
this.leftBarBorderColor = '#337AB7'
|
||||
this.iconColor = '#fff'
|
||||
e.stopPropagation();
|
||||
this.status = true;
|
||||
}
|
||||
},
|
||||
//鼠标移动
|
||||
move: function (e) {
|
||||
e = e || window.event
|
||||
if (this.status && this.isEnd == false) {
|
||||
if (!e.touches) { //兼容PC端
|
||||
var x = e.clientX;
|
||||
} else { //兼容移动端
|
||||
var x = e.touches[0].pageX;
|
||||
}
|
||||
var bar_area_left = this.barArea.getBoundingClientRect().left;
|
||||
var move_block_left = x - bar_area_left //小方块相对于父元素的left值
|
||||
if (move_block_left >= this.barArea.offsetWidth - parseInt(parseInt(this.blockSize.width) / 2) - 2) {
|
||||
move_block_left = this.barArea.offsetWidth - parseInt(parseInt(this.blockSize.width) / 2) - 2;
|
||||
}
|
||||
if (move_block_left <= 0) {
|
||||
move_block_left = parseInt(parseInt(this.blockSize.width) / 2);
|
||||
}
|
||||
//拖动后小方块的left值
|
||||
this.moveBlockLeft = (move_block_left - this.startLeft) + "px"
|
||||
this.leftBarWidth = (move_block_left - this.startLeft) + "px"
|
||||
}
|
||||
},
|
||||
|
||||
//鼠标松开
|
||||
end: function () {
|
||||
this.endMovetime = +new Date();
|
||||
var _this = this;
|
||||
//判断是否重合
|
||||
if (this.status && this.isEnd == false) {
|
||||
var moveLeftDistance = parseInt((this.moveBlockLeft || '').replace('px', ''));
|
||||
moveLeftDistance = moveLeftDistance * 310/ parseInt(this.setSize.imgWidth)
|
||||
let data = {
|
||||
captchaType:this.captchaType,
|
||||
"pointJson":this.secretKey ? aesEncrypt(JSON.stringify({x:moveLeftDistance,y:5.0}),this.secretKey):JSON.stringify({x:moveLeftDistance,y:5.0}),
|
||||
"token":this.backToken
|
||||
}
|
||||
reqCheck(data).then(res=>{
|
||||
if (res.repCode == "0000") {
|
||||
this.moveBlockBackgroundColor = '#5cb85c'
|
||||
this.leftBarBorderColor = '#5cb85c'
|
||||
this.iconColor = '#fff'
|
||||
this.iconClass = 'icon-check'
|
||||
this.showRefresh = false
|
||||
this.isEnd = true;
|
||||
if (this.mode=='pop') {
|
||||
setTimeout(()=>{
|
||||
this.$parent.clickShow = false;
|
||||
this.refresh();
|
||||
},1500)
|
||||
}
|
||||
this.passFlag = true
|
||||
this.tipWords = `${((this.endMovetime-this.startMoveTime)/1000).toFixed(2)}s验证成功`
|
||||
var captchaVerification = this.secretKey ? aesEncrypt(this.backToken+'---'+JSON.stringify({x:moveLeftDistance,y:5.0}),this.secretKey):this.backToken+'---'+JSON.stringify({x:moveLeftDistance,y:5.0})
|
||||
setTimeout(()=>{
|
||||
this.tipWords = ""
|
||||
this.$parent.closeBox();
|
||||
this.$parent.$emit('success', {captchaVerification})
|
||||
},1000)
|
||||
}else{
|
||||
this.moveBlockBackgroundColor = '#d9534f'
|
||||
this.leftBarBorderColor = '#d9534f'
|
||||
this.iconColor = '#fff'
|
||||
this.iconClass = 'icon-close'
|
||||
this.passFlag = false
|
||||
setTimeout(function () {
|
||||
_this.refresh();
|
||||
}, 1000);
|
||||
this.$parent.$emit('error',this)
|
||||
this.tipWords = "验证失败"
|
||||
setTimeout(()=>{
|
||||
this.tipWords = ""
|
||||
},1000)
|
||||
}
|
||||
})
|
||||
this.status = false;
|
||||
}
|
||||
},
|
||||
|
||||
refresh: function () {
|
||||
this.showRefresh = true
|
||||
this.finishText = ''
|
||||
|
||||
this.transitionLeft = 'left .3s'
|
||||
this.moveBlockLeft = 0
|
||||
|
||||
this.leftBarWidth = undefined
|
||||
this.transitionWidth = 'width .3s'
|
||||
|
||||
this.leftBarBorderColor = '#ddd'
|
||||
this.moveBlockBackgroundColor = '#fff'
|
||||
this.iconColor = '#000'
|
||||
this.iconClass = 'icon-right'
|
||||
this.isEnd = false
|
||||
|
||||
this.getPictrue()
|
||||
setTimeout(() => {
|
||||
this.transitionWidth = ''
|
||||
this.transitionLeft = ''
|
||||
this.text = this.explain
|
||||
}, 300)
|
||||
},
|
||||
|
||||
// 请求背景图片和验证图片
|
||||
getPictrue(){
|
||||
let data = {
|
||||
captchaType:this.captchaType,
|
||||
clientUid: localStorage.getItem('slider'),
|
||||
ts: Date.now(), // 现在的时间戳
|
||||
}
|
||||
reqGet(data).then(res=>{
|
||||
if (res.repCode == "0000") {
|
||||
this.backImgBase = res.repData.originalImageBase64
|
||||
this.blockBackImgBase = res.repData.jigsawImageBase64
|
||||
this.backToken = res.repData.token
|
||||
this.secretKey = res.repData.secretKey
|
||||
}else{
|
||||
this.tipWords = res.repMsg;
|
||||
}
|
||||
|
||||
// 判断接口请求次数是否失效
|
||||
if(res.repCode == '6201') {
|
||||
this.backImgBase = null
|
||||
this.blockBackImgBase = null
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
// type变化则全面刷新
|
||||
type: {
|
||||
immediate: true,
|
||||
handler() {
|
||||
this.init()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 禁止拖拽
|
||||
this.$el.onselectstart = function () {
|
||||
return false
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
27
ruoyi-ui/src/components/Verifition/api/index.js
Normal file
27
ruoyi-ui/src/components/Verifition/api/index.js
Normal file
@ -0,0 +1,27 @@
|
||||
/**
|
||||
* 此处可直接引用自己项目封装好的 axios 配合后端联调
|
||||
*/
|
||||
|
||||
|
||||
import request from "./../utils/axios" //组件内部封装的axios
|
||||
// import request from "@/api/axios.js" //调用项目封装的axios
|
||||
|
||||
//获取验证图片 以及token
|
||||
export function reqGet(data) {
|
||||
return request({
|
||||
url: '/dev-api/captcha/get',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
//滑动或者点选验证
|
||||
export function reqCheck(data) {
|
||||
return request({
|
||||
url: '/dev-api/captcha/check',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
11
ruoyi-ui/src/components/Verifition/utils/ase.js
Normal file
11
ruoyi-ui/src/components/Verifition/utils/ase.js
Normal file
@ -0,0 +1,11 @@
|
||||
import CryptoJS from 'crypto-js'
|
||||
/**
|
||||
* @word 要加密的内容
|
||||
* @keyWord String 服务器随机返回的关键字
|
||||
* */
|
||||
export function aesEncrypt(word,keyWord="XwKsGlMcdPMEhR1B"){
|
||||
var key = CryptoJS.enc.Utf8.parse(keyWord);
|
||||
var srcs = CryptoJS.enc.Utf8.parse(word);
|
||||
var encrypted = CryptoJS.AES.encrypt(srcs, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
|
||||
return encrypted.toString();
|
||||
}
|
||||
30
ruoyi-ui/src/components/Verifition/utils/axios.js
Normal file
30
ruoyi-ui/src/components/Verifition/utils/axios.js
Normal file
@ -0,0 +1,30 @@
|
||||
import axios from 'axios';
|
||||
|
||||
axios.defaults.baseURL = process.env.BASE_API;
|
||||
|
||||
const service = axios.create({
|
||||
timeout: 40000,
|
||||
headers: {
|
||||
'X-Requested-With': 'XMLHttpRequest',
|
||||
'Content-Type': 'application/json; charset=UTF-8'
|
||||
},
|
||||
})
|
||||
service.interceptors.request.use(
|
||||
config => {
|
||||
return config
|
||||
},
|
||||
error => {
|
||||
Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
// response interceptor
|
||||
service.interceptors.response.use(
|
||||
response => {
|
||||
const res = response.data;
|
||||
return res
|
||||
},
|
||||
error => {
|
||||
}
|
||||
)
|
||||
export default service
|
||||
36
ruoyi-ui/src/components/Verifition/utils/util.js
Normal file
36
ruoyi-ui/src/components/Verifition/utils/util.js
Normal file
@ -0,0 +1,36 @@
|
||||
export function resetSize(vm) {
|
||||
var img_width, img_height, bar_width, bar_height; //图片的宽度、高度，移动条的宽度、高度
|
||||
|
||||
var parentWidth = vm.$el.parentNode.offsetWidth || window.offsetWidth
|
||||
var parentHeight = vm.$el.parentNode.offsetHeight || window.offsetHeight
|
||||
|
||||
if (vm.imgSize.width.indexOf('%') != -1) {
|
||||
img_width = parseInt(this.imgSize.width) / 100 * parentWidth + 'px'
|
||||
} else {
|
||||
img_width = this.imgSize.width;
|
||||
}
|
||||
|
||||
if (vm.imgSize.height.indexOf('%') != -1) {
|
||||
img_height = parseInt(this.imgSize.height) / 100 * parentHeight + 'px'
|
||||
} else {
|
||||
img_height = this.imgSize.height
|
||||
}
|
||||
|
||||
if (vm.barSize.width.indexOf('%') != -1) {
|
||||
bar_width = parseInt(this.barSize.width) / 100 * parentWidth + 'px'
|
||||
} else {
|
||||
bar_width = this.barSize.width
|
||||
}
|
||||
|
||||
if (vm.barSize.height.indexOf('%') != -1) {
|
||||
bar_height = parseInt(this.barSize.height) / 100 * parentHeight + 'px'
|
||||
} else {
|
||||
bar_height = this.barSize.height
|
||||
}
|
||||
|
||||
return {imgWidth: img_width, imgHeight: img_height, barWidth: bar_width, barHeight: bar_height}
|
||||
}
|
||||
|
||||
export const _code_chars = [1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
|
||||
export const _code_color1 = ['#fffff0', '#f0ffff', '#f0fff0', '#fff0f0']
|
||||
export const _code_color2 = ['#FF0033', '#006699', '#993366', '#FF9900', '#66CC66', '#FF33CC']
|
||||
@ -28,19 +28,26 @@
|
||||
>
|
||||
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
|
||||
</el-input>
|
||||
<div class="login-code">
|
||||
<img :src="codeUrl" @click="getCode" class="login-code-img"/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
|
||||
<el-form-item prop="code">
|
||||
<Verify
|
||||
@success="verifySuccess"
|
||||
:mode="'pop'"
|
||||
:captchaType="'blockPuzzle'"
|
||||
:imgSize="{ width: '330px', height: '155px' }"
|
||||
ref="verify"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width:100%;">
|
||||
<el-button
|
||||
:loading="loading"
|
||||
size="medium"
|
||||
type="primary"
|
||||
style="width:100%;"
|
||||
@click.native.prevent="handleLogin"
|
||||
@click.native.prevent="useVerify"
|
||||
>
|
||||
<!-- @click.native.prevent="handleLogin"-->
|
||||
<span v-if="!loading">登 录</span>
|
||||
<span v-else>登 录 中...</span>
|
||||
</el-button>
|
||||
@ -54,12 +61,15 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCodeImg } from "@/api/login";
|
||||
import Verify from "@/components/Verifition/Verify";
|
||||
import Cookies from "js-cookie";
|
||||
import { encrypt, decrypt } from '@/utils/jsencrypt'
|
||||
|
||||
export default {
|
||||
name: "Login",
|
||||
components: {
|
||||
Verify
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
codeUrl: "",
|
||||
@ -78,7 +88,6 @@ export default {
|
||||
password: [
|
||||
{ required: true, trigger: "blur", message: "密码不能为空" }
|
||||
],
|
||||
code: [{ required: true, trigger: "change", message: "验证码不能为空" }]
|
||||
},
|
||||
loading: false,
|
||||
redirect: undefined,
|
||||
@ -94,19 +103,24 @@ export default {
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getCode();
|
||||
this.getCookie();
|
||||
},
|
||||
methods: {
|
||||
getCode() {
|
||||
getCodeImg().then(res => {
|
||||
this.captchaEnabled = res.data.enabled;
|
||||
if(res.data.enabled){
|
||||
this.codeUrl = "data:image/gif;base64," + res.data.img;
|
||||
this.loginForm.uuid = res.data.uuid;
|
||||
verifySuccess(params){
|
||||
// params 返回的二次验证参数, 和登录参数一起回传给登录接口，方便后台进行二次验证
|
||||
this.loginForm.code = params.captchaVerification;
|
||||
|
||||
this.handleLogin();
|
||||
},
|
||||
|
||||
useVerify() {
|
||||
this.$refs.loginForm.validate((valid) => {
|
||||
if (valid) {
|
||||
this.$refs.verify.show();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
getCookie() {
|
||||
const username = Cookies.get("username");
|
||||
const password = Cookies.get("password");
|
||||
@ -134,7 +148,6 @@ export default {
|
||||
this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
|
||||
}).catch(() => {
|
||||
this.loading = false;
|
||||
this.getCode();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user