修改登录提交

ruoyi-admin/src/main/java/com/ruoyi/web/controller/common/CaptchaController.java

@@ -1,94 +0,0 @@
-package com.ruoyi.web.controller.common;
-
-import java.awt.image.BufferedImage;
-import java.io.IOException;
-import java.util.concurrent.TimeUnit;
-import javax.annotation.Resource;
-import javax.imageio.ImageIO;
-import javax.servlet.http.HttpServletResponse;
-import org.springframework.beans.factory.annotation.Autowired;
-import org.springframework.util.FastByteArrayOutputStream;
-import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.RestController;
-import com.google.code.kaptcha.Producer;
-import com.ruoyi.common.config.RuoYiConfig;
-import com.ruoyi.common.constant.CacheConstants;
-import com.ruoyi.common.constant.Constants;
-import com.ruoyi.common.core.domain.AjaxResult;
-import com.ruoyi.common.core.redis.RedisCache;
-import com.ruoyi.common.utils.sign.Base64;
-import com.ruoyi.common.utils.uuid.IdUtils;
-import com.ruoyi.system.service.ISysConfigService;
-
-/**
- * 验证码操作处理
- * 
- * @author ruoyi
- */
-@RestController
-public class CaptchaController
-{
-    @Resource(name = "captchaProducer")
-    private Producer captchaProducer;
-
-    @Resource(name = "captchaProducerMath")
-    private Producer captchaProducerMath;
-
-    @Autowired
-    private RedisCache redisCache;
-    
-    @Autowired
-    private ISysConfigService configService;
-    /**
-     * 生成验证码
-     */
-    @GetMapping("/captchaImage")
-    public AjaxResult getCode(HttpServletResponse response) throws IOException
-    {
-        AjaxResult ajax = AjaxResult.success();
-        boolean captchaEnabled = configService.selectCaptchaEnabled();
-        ajax.put("captchaEnabled", captchaEnabled);
-        if (!captchaEnabled)
-        {
-            return ajax;
-        }
-
-        // 保存验证码信息
-        String uuid = IdUtils.simpleUUID();
-        String verifyKey = CacheConstants.CAPTCHA_CODE_KEY + uuid;
-
-        String capStr = null, code = null;
-        BufferedImage image = null;
-
-        // 生成验证码
-        String captchaType = RuoYiConfig.getCaptchaType();
-        if ("math".equals(captchaType))
-        {
-            String capText = captchaProducerMath.createText();
-            capStr = capText.substring(0, capText.lastIndexOf("@"));
-            code = capText.substring(capText.lastIndexOf("@") + 1);
-            image = captchaProducerMath.createImage(capStr);
-        }
-        else if ("char".equals(captchaType))
-        {
-            capStr = code = captchaProducer.createText();
-            image = captchaProducer.createImage(capStr);
-        }
-
-        redisCache.setCacheObject(verifyKey, code, Constants.CAPTCHA_EXPIRATION, TimeUnit.MINUTES);
-        // 转换流信息写出
-        FastByteArrayOutputStream os = new FastByteArrayOutputStream();
-        try
-        {
-            ImageIO.write(image, "jpg", os);
-        }
-        catch (IOException e)
-        {
-            return AjaxResult.error(e.getMessage());
-        }
-
-        ajax.put("uuid", uuid);
-        ajax.put("img", Base64.encode(os.toByteArray()));
-        return ajax;
-    }
-}

ruoyi-admin/src/main/java/com/ruoyi/web/controller/system/SysLoginController.java

@@ -45,8 +45,7 @@ public class SysLoginController
     {
         AjaxResult ajax = AjaxResult.success();
         // 生成令牌
-        String token = loginService.login(loginBody.getUsername(), loginBody.getPassword(), loginBody.getCode(),
+        String token = loginService.login(loginBody.getUsername(), loginBody.getPassword(), loginBody.getCode());
-                loginBody.getUuid());
         ajax.put(Constants.TOKEN, token);
         return ajax;
     }

ruoyi-admin/src/main/resources/META-INF/services/com.anji.captcha.service.CaptchaCacheService

@@ -0,0 +1 @@
+com.ruoyi.framework.web.service.CaptchaRedisService

ruoyi-admin/src/main/resources/application.yml

@@ -173,3 +173,19 @@ warm-flow:
 #  logic_not_delete_value: 0
 #  # 当使用JPA时指定JpaPersistenceProvider
 #  jpa_persistence_provider: org.springframework.orm.jpa.vendor.SpringHibernateJpaPersistenceProvider
+
+# 滑块验证码
+aj:
+  captcha:
+    # 缓存类型
+    cache-type: redis
+    # blockPuzzle 滑块 clickWord 文字点选  default默认两者都实例化
+    type: blockPuzzle
+    # 右下角显示字
+    water-mark:
+    # 校验滑动拼图允许误差偏移量(默认5像素)
+    slip-offset: 5
+    # aes加密坐标开启或者禁用(true|false)
+    aes-status: true
+    # 滑动干扰项(0/1/2)
+    interference-options: 0

ruoyi-framework/pom.xml

@@ -35,16 +35,11 @@
             <artifactId>druid-spring-boot-starter</artifactId>
         </dependency>
 
-        <!-- 验证码 -->
+        <!-- 滑块验证码  -->
         <dependency>
-            <groupId>pro.fessional</groupId>
+            <groupId>com.github.anji-plus</groupId>
-            <artifactId>kaptcha</artifactId>
+            <artifactId>captcha-spring-boot-starter</artifactId>
-            <exclusions>
+            <version>1.2.7</version>
-                <exclusion>
-                    <artifactId>servlet-api</artifactId>
-                    <groupId>javax.servlet</groupId>
-                </exclusion>
-            </exclusions>
         </dependency>
 
         <!-- 获取系统信息 -->

ruoyi-framework/src/main/java/com/ruoyi/framework/config/CaptchaConfig.java

@@ -1,83 +0,0 @@
-package com.ruoyi.framework.config;
-
-import java.util.Properties;
-import org.springframework.context.annotation.Bean;
-import org.springframework.context.annotation.Configuration;
-import com.google.code.kaptcha.impl.DefaultKaptcha;
-import com.google.code.kaptcha.util.Config;
-import static com.google.code.kaptcha.Constants.*;
-
-/**
- * 验证码配置
- * 
- * @author ruoyi
- */
-@Configuration
-public class CaptchaConfig
-{
-    @Bean(name = "captchaProducer")
-    public DefaultKaptcha getKaptchaBean()
-    {
-        DefaultKaptcha defaultKaptcha = new DefaultKaptcha();
-        Properties properties = new Properties();
-        // 是否有边框 默认为true 我们可以自己设置yes，no
-        properties.setProperty(KAPTCHA_BORDER, "yes");
-        // 验证码文本字符颜色 默认为Color.BLACK
-        properties.setProperty(KAPTCHA_TEXTPRODUCER_FONT_COLOR, "black");
-        // 验证码图片宽度 默认为200
-        properties.setProperty(KAPTCHA_IMAGE_WIDTH, "160");
-        // 验证码图片高度 默认为50
-        properties.setProperty(KAPTCHA_IMAGE_HEIGHT, "60");
-        // 验证码文本字符大小 默认为40
-        properties.setProperty(KAPTCHA_TEXTPRODUCER_FONT_SIZE, "38");
-        // KAPTCHA_SESSION_KEY
-        properties.setProperty(KAPTCHA_SESSION_CONFIG_KEY, "kaptchaCode");
-        // 验证码文本字符长度 默认为5
-        properties.setProperty(KAPTCHA_TEXTPRODUCER_CHAR_LENGTH, "4");
-        // 验证码文本字体样式 默认为new Font("Arial", 1, fontSize), new Font("Courier", 1, fontSize)
-        properties.setProperty(KAPTCHA_TEXTPRODUCER_FONT_NAMES, "Arial,Courier");
-        // 图片样式 水纹com.google.code.kaptcha.impl.WaterRipple 鱼眼com.google.code.kaptcha.impl.FishEyeGimpy 阴影com.google.code.kaptcha.impl.ShadowGimpy
-        properties.setProperty(KAPTCHA_OBSCURIFICATOR_IMPL, "com.google.code.kaptcha.impl.ShadowGimpy");
-        Config config = new Config(properties);
-        defaultKaptcha.setConfig(config);
-        return defaultKaptcha;
-    }
-
-    @Bean(name = "captchaProducerMath")
-    public DefaultKaptcha getKaptchaBeanMath()
-    {
-        DefaultKaptcha defaultKaptcha = new DefaultKaptcha();
-        Properties properties = new Properties();
-        // 是否有边框 默认为true 我们可以自己设置yes，no
-        properties.setProperty(KAPTCHA_BORDER, "yes");
-        // 边框颜色 默认为Color.BLACK
-        properties.setProperty(KAPTCHA_BORDER_COLOR, "105,179,90");
-        // 验证码文本字符颜色 默认为Color.BLACK
-        properties.setProperty(KAPTCHA_TEXTPRODUCER_FONT_COLOR, "blue");
-        // 验证码图片宽度 默认为200
-        properties.setProperty(KAPTCHA_IMAGE_WIDTH, "160");
-        // 验证码图片高度 默认为50
-        properties.setProperty(KAPTCHA_IMAGE_HEIGHT, "60");
-        // 验证码文本字符大小 默认为40
-        properties.setProperty(KAPTCHA_TEXTPRODUCER_FONT_SIZE, "35");
-        // KAPTCHA_SESSION_KEY
-        properties.setProperty(KAPTCHA_SESSION_CONFIG_KEY, "kaptchaCodeMath");
-        // 验证码文本生成器
-        properties.setProperty(KAPTCHA_TEXTPRODUCER_IMPL, "com.ruoyi.framework.config.KaptchaTextCreator");
-        // 验证码文本字符间距 默认为2
-        properties.setProperty(KAPTCHA_TEXTPRODUCER_CHAR_SPACE, "3");
-        // 验证码文本字符长度 默认为5
-        properties.setProperty(KAPTCHA_TEXTPRODUCER_CHAR_LENGTH, "6");
-        // 验证码文本字体样式 默认为new Font("Arial", 1, fontSize), new Font("Courier", 1, fontSize)
-        properties.setProperty(KAPTCHA_TEXTPRODUCER_FONT_NAMES, "Arial,Courier");
-        // 验证码噪点颜色 默认为Color.BLACK
-        properties.setProperty(KAPTCHA_NOISE_COLOR, "white");
-        // 干扰实现类
-        properties.setProperty(KAPTCHA_NOISE_IMPL, "com.google.code.kaptcha.impl.NoNoise");
-        // 图片样式 水纹com.google.code.kaptcha.impl.WaterRipple 鱼眼com.google.code.kaptcha.impl.FishEyeGimpy 阴影com.google.code.kaptcha.impl.ShadowGimpy
-        properties.setProperty(KAPTCHA_OBSCURIFICATOR_IMPL, "com.google.code.kaptcha.impl.ShadowGimpy");
-        Config config = new Config(properties);
-        defaultKaptcha.setConfig(config);
-        return defaultKaptcha;
-    }
-}

ruoyi-framework/src/main/java/com/ruoyi/framework/config/KaptchaTextCreator.java

@@ -1,68 +0,0 @@
-package com.ruoyi.framework.config;
-
-import java.util.Random;
-import com.google.code.kaptcha.text.impl.DefaultTextCreator;
-
-/**
- * 验证码文本生成器
- *
- * @author ruoyi
- */
-public class KaptchaTextCreator extends DefaultTextCreator
-{
-    private static final String[] CNUMBERS = "0,1,2,3,4,5,6,7,8,9,10".split(",");
-
-    @Override
-    public String getText()
-    {
-        Integer result = 0;
-        Random random = new Random();
-        int x = random.nextInt(10);
-        int y = random.nextInt(10);
-        StringBuilder suChinese = new StringBuilder();
-        int randomoperands = random.nextInt(3);
-        if (randomoperands == 0)
-        {
-            result = x * y;
-            suChinese.append(CNUMBERS[x]);
-            suChinese.append("*");
-            suChinese.append(CNUMBERS[y]);
-        }
-        else if (randomoperands == 1)
-        {
-            if ((x != 0) && y % x == 0)
-            {
-                result = y / x;
-                suChinese.append(CNUMBERS[y]);
-                suChinese.append("/");
-                suChinese.append(CNUMBERS[x]);
-            }
-            else
-            {
-                result = x + y;
-                suChinese.append(CNUMBERS[x]);
-                suChinese.append("+");
-                suChinese.append(CNUMBERS[y]);
-            }
-        }
-        else
-        {
-            if (x >= y)
-            {
-                result = x - y;
-                suChinese.append(CNUMBERS[x]);
-                suChinese.append("-");
-                suChinese.append(CNUMBERS[y]);
-            }
-            else
-            {
-                result = y - x;
-                suChinese.append(CNUMBERS[y]);
-                suChinese.append("-");
-                suChinese.append(CNUMBERS[x]);
-            }
-        }
-        suChinese.append("=?@" + result);
-        return suChinese.toString();
-    }
-}

ruoyi-framework/src/main/java/com/ruoyi/framework/config/SecurityConfig.java

@@ -111,7 +111,7 @@ public class SecurityConfig
             .authorizeHttpRequests((requests) -> {
                 permitAllUrl.getUrls().forEach(url -> requests.antMatchers(url).permitAll());
                 // 对于登录login 注册register 验证码captchaImage 允许匿名访问
-                requests.antMatchers("/login", "/register", "/captchaImage").permitAll()
+                requests.antMatchers("/login", "/register", "/captcha/get", "/captcha/check","/captchaImage").permitAll()
                     // 静态资源，可匿名访问
                     .antMatchers(HttpMethod.GET, "/", "/*.html", "/**/*.html", "/**/*.css", "/**/*.js", "/profile/**").permitAll()
                     .antMatchers("/swagger-ui.html", "/swagger-resources/**", "/webjars/**", "/*/api-docs", "/druid/**").permitAll()

ruoyi-framework/src/main/java/com/ruoyi/framework/web/service/CaptchaRedisService.java

@@ -0,0 +1,58 @@
+package com.ruoyi.framework.web.service;
+
+import com.anji.captcha.service.CaptchaCacheService;
+import org.springframework.data.redis.core.StringRedisTemplate;
+
+import javax.annotation.Resource;
+import java.util.concurrent.TimeUnit;
+
+/**
+ * packageName com.hyp.framework.web.service
+ *
+ * @author wangxy
+ * @version JDK 8
+ * @className CaptchaRedisService
+ * @date 2024/4/28
+ * @description
+ */
+public class CaptchaRedisService implements CaptchaCacheService {
+
+    @Resource
+    private StringRedisTemplate stringRedisTemplate;
+
+    @Override
+    public void set(String key, String value, long expiresInSeconds)
+    {
+        stringRedisTemplate.opsForValue().set(key, value, expiresInSeconds, TimeUnit.SECONDS);
+    }
+
+    @Override
+    public boolean exists(String key)
+    {
+        return Boolean.TRUE.equals(stringRedisTemplate.hasKey(key));
+    }
+
+    @Override
+    public void delete(String key)
+    {
+        stringRedisTemplate.delete(key);
+    }
+
+    @Override
+    public String get(String key)
+    {
+        return stringRedisTemplate.opsForValue().get(key);
+    }
+
+    @Override
+    public Long increment(String key, long val)
+    {
+        return stringRedisTemplate.opsForValue().increment(key, val);
+    }
+
+    @Override
+    public String type()
+    {
+        return "redis";
+    }
+}

ruoyi-framework/src/main/java/com/ruoyi/framework/web/service/SysLoginService.java

@@ -1,6 +1,11 @@
 package com.ruoyi.framework.web.service;
 
 import javax.annotation.Resource;
+
+import com.anji.captcha.model.common.ResponseModel;
+import com.anji.captcha.model.vo.CaptchaVO;
+import com.anji.captcha.service.CaptchaService;
+import org.hibernate.validator.internal.util.stereotypes.Lazy;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.security.authentication.AuthenticationManager;
 import org.springframework.security.authentication.BadCredentialsException;
@@ -52,6 +57,10 @@ public class SysLoginService
     @Autowired
     private ISysConfigService configService;
 
+    @Autowired
+    @Lazy
+    private CaptchaService captchaService;
+
     /**
      * 登录验证
      * 
@@ -61,10 +70,10 @@ public class SysLoginService
      * @param uuid 唯一标识
      * @return 结果
      */
-    public String login(String username, String password, String code, String uuid)
+    public String login(String username, String password, String code)
     {
         // 验证码校验
-        validateCaptcha(username, code, uuid);
+        validateCaptcha(username, code);
         // 登录前置校验
         loginPreCheck(username, password);
         // 用户验证
@@ -105,27 +114,17 @@ public class SysLoginService
      * 
      * @param username 用户名
      * @param code 验证码
-     * @param uuid 唯一标识
      * @return 结果
      */
-    public void validateCaptcha(String username, String code, String uuid)
+    public void validateCaptcha(String username, String code)
     {
-        boolean captchaEnabled = configService.selectCaptchaEnabled();
+        CaptchaVO captchaVO = new CaptchaVO();
-        if (captchaEnabled)
+        captchaVO.setCaptchaVerification(code);
+        ResponseModel response = captchaService.verification(captchaVO);
+        if (!response.isSuccess())
         {
-            String verifyKey = CacheConstants.CAPTCHA_CODE_KEY + StringUtils.nvl(uuid, "");
+            AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_FAIL, MessageUtils.message("user.jcaptcha.error")));
-            String captcha = redisCache.getCacheObject(verifyKey);
+            throw new CaptchaException();
-            if (captcha == null)
-            {
-                AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_FAIL, MessageUtils.message("user.jcaptcha.expire")));
-                throw new CaptchaExpireException();
-            }
-            redisCache.deleteObject(verifyKey);
-            if (!code.equalsIgnoreCase(captcha))
-            {
-                AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_FAIL, MessageUtils.message("user.jcaptcha.error")));
-                throw new CaptchaException();
-            }
         }
     }
 

ruoyi-ui/package.json

@@ -42,6 +42,7 @@
     "axios": "0.28.1",
     "clipboard": "2.0.8",
     "core-js": "3.37.1",
+    "crypto-js": "4.1.1",
     "echarts": "5.4.0",
     "element-ui": "2.15.14",
     "file-saver": "2.0.5",

ruoyi-ui/src/api/login.js

@@ -46,15 +46,3 @@ export function logout() {
     method: 'post'
   })
 }
-
-// 获取验证码
-export function getCodeImg() {
-  return request({
-    url: '/captchaImage',
-    headers: {
-      isToken: false
-    },
-    method: 'get',
-    timeout: 20000
-  })
-}

ruoyi-ui/src/components/Verifition/Verify/VerifyPoints.vue

@@ -0,0 +1,290 @@
+<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 };
+      });
+      return newPointArr;
+    },
+  },
+  watch: {
+    // type变化则全面刷新
+    type: {
+      immediate: true,
+      handler() {
+        this.init();
+      },
+    },
+  },
+  mounted() {
+    // 禁止拖拽
+    this.$el.onselectstart = function () {
+      return false;
+    };
+  },
+};
+</script>

ruoyi-ui/src/components/Verifition/Verify/VerifySlide.vue

@@ -0,0 +1,433 @@
+<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;
+            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>
+

ruoyi-ui/src/components/Verifition/api/index.js

@@ -0,0 +1,19 @@
+import request from '@/utils/request'
+
+//获取验证图片
+export function reqGet(data) {
+    return request({
+        url: '/captcha/get',
+        method: 'post',
+        data
+    })
+}
+
+//滑动或者点选验证
+export function reqCheck(data) {
+    return request({
+        url: '/captcha/check',
+        method: 'post',
+        data
+    })
+}

ruoyi-ui/src/components/Verifition/utils/ase.js

@@ -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();
+}

ruoyi-ui/src/components/Verifition/utils/util.js

@@ -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']

ruoyi-ui/src/views/login.vue

@@ -23,20 +23,13 @@
           <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
         </el-input>
       </el-form-item>
-      <el-form-item prop="code" v-if="captchaEnabled">
+      <Verify
-        <el-input
+        @success="capctchaCheckSuccess"
-          v-model="loginForm.code"
+        :mode="'pop'"
-          auto-complete="off"
+        :captchaType="'blockPuzzle'"
-          placeholder="验证码"
+        :imgSize="{ width: '330px', height: '155px' }"
-          style="width: 63%"
+        ref="verify"
-          @keyup.enter.native="handleLogin"
+      ></Verify>
-        >
-          <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 style="width:100%;">
         <el-button
@@ -62,21 +55,20 @@
 </template>
 
 <script>
-import { getCodeImg } from "@/api/login";
 import Cookies from "js-cookie";
-import { encrypt, decrypt } from '@/utils/jsencrypt'
+import { encrypt, decrypt } from "@/utils/jsencrypt";
+import Verify from "@/components/Verifition/Verify";
 
 export default {
+  components: { Verify },
   name: "Login",
   data() {
     return {
-      codeUrl: "",
       loginForm: {
         username: "admin",
         password: "admin123",
         rememberMe: false,
         code: "",
-        uuid: ""
       },
       loginRules: {
         username: [
@@ -85,11 +77,8 @@ export default {
         password: [
           { required: true, trigger: "blur", message: "请输入您的密码" }
         ],
-        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
       },
       loading: false,
-      // 验证码开关
-      captchaEnabled: true,
       // 注册开关
       register: false,
       redirect: undefined
@@ -104,54 +93,45 @@ export default {
     }
   },
   created() {
-    this.getCode();
     this.getCookie();
   },
   methods: {
-    getCode() {
-      getCodeImg().then(res => {
-        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
-        if (this.captchaEnabled) {
-          this.codeUrl = "data:image/gif;base64," + res.img;
-          this.loginForm.uuid = res.uuid;
-        }
-      });
-    },
     getCookie() {
       const username = Cookies.get("username");
       const password = Cookies.get("password");
-      const rememberMe = Cookies.get('rememberMe')
+      const rememberMe = Cookies.get("rememberMe");
       this.loginForm = {
         username: username === undefined ? this.loginForm.username : username,
         password: password === undefined ? this.loginForm.password : decrypt(password),
         rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
       };
     },
+    capctchaCheckSuccess(params) {
+      this.loginForm.code = params.captchaVerification;
+      this.loading = true;
+      if (this.loginForm.rememberMe) {
+        Cookies.set("username", this.loginForm.username, { expires: 30 });
+        Cookies.set("password", encrypt(this.loginForm.password), { expires: 30, });
+        Cookies.set("rememberMe", this.loginForm.rememberMe, { expires: 30 });
+      } else {
+        Cookies.remove("username");
+        Cookies.remove("password");
+        Cookies.remove("rememberMe");
+      }
+      this.$store.dispatch("Login", this.loginForm).then(() => {
+        this.$router.push({ path: this.redirect || "/" }).catch(() => {});
+      }).catch(() => {
+        this.loading = false;
+      });
+    },
     handleLogin() {
-      this.$refs.loginForm.validate(valid => {
+      this.$refs.loginForm.validate((valid) => {
         if (valid) {
-          this.loading = true;
+          this.$refs.verify.show();
-          if (this.loginForm.rememberMe) {
-            Cookies.set("username", this.loginForm.username, { expires: 30 });
-            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
-            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
-          } else {
-            Cookies.remove("username");
-            Cookies.remove("password");
-            Cookies.remove('rememberMe');
-          }
-          this.$store.dispatch("Login", this.loginForm).then(() => {
-            this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
-          }).catch(() => {
-            this.loading = false;
-            if (this.captchaEnabled) {
-              this.getCode();
-            }
-          });
         }
       });
-    }
+    },
-  }
+  },
 };
 </script>
 
@@ -192,15 +172,6 @@ export default {
   text-align: center;
   color: #bfbfbf;
 }
-.login-code {
-  width: 33%;
-  height: 38px;
-  float: right;
-  img {
-    cursor: pointer;
-    vertical-align: middle;
-  }
-}
 .el-login-footer {
   height: 40px;
   line-height: 40px;
@@ -213,7 +184,4 @@ export default {
   font-size: 12px;
   letter-spacing: 1px;
 }
-.login-code-img {
-  height: 38px;
-}
 </style>