(新增)[后端](增加登录验证码校验)

pom.xml

@@ -141,6 +141,13 @@
             <artifactId>snakerflow-spring-boot-starter</artifactId>
             <version>1.0.6</version>
         </dependency>
+
+        <!-- 验证码 -->
+        <dependency>
+            <groupId>com.github.whvcse</groupId>
+            <artifactId>easy-captcha</artifactId>
+            <version>1.6.2</version>
+        </dependency>
     </dependencies>
 
     <build>

src/main/java/com/laker/admin/config/WebMvcConfig.java

@@ -29,7 +29,11 @@ public class WebMvcConfig implements WebMvcConfigurer {
     public void addInterceptors(InterceptorRegistry registry) {
         // 注册注解拦截器，并排除不需要注解鉴权的接口地址 (与登录拦截器无关)
         registry.addInterceptor(new SaAnnotationInterceptor()).addPathPatterns("/**")
-                .excludePathPatterns("/admin/**", "/admin/login.html", "/error", "/api/v1/login");
+                .excludePathPatterns("/admin/**",
+                        "/admin/login.html",
+                        "/error",
+                        "/api/v1/login",
+                        "/captcha");
     }
 
     @Override

src/main/java/com/laker/admin/framework/cache/ICache.java

+package com.laker.admin.framework.cache;
+
+public interface ICache {
+
+
+    void put(String key, Object value);
+
+    /**
+     * @param key
+     * @param value
+     * @param timeout 单位：秒 s
+     */
+    void put(String key, Object value, long timeout);
+
+    void remove(String key);
+
+    <T> T get(String key);
+}

src/main/java/com/laker/admin/framework/cache/JvmCache.java

+package com.laker.admin.framework.cache;
+
+import cn.hutool.cache.CacheUtil;
+import cn.hutool.cache.impl.LFUCache;
+import org.springframework.stereotype.Component;
+
+/**
+ * @author laker
+ */
+@Component
+public class JvmCache implements ICache {
+    LFUCache<String, Object> CACHE = CacheUtil.newLFUCache(1000);
+
+    @Override
+    public void put(String key, Object value) {
+        CACHE.put(key, value);
+    }
+
+    @Override
+    public void put(String key, Object value, long timeout) {
+        CACHE.put(key, value, timeout * 1000);
+    }
+
+    @Override
+    public void remove(String key) {
+        CACHE.remove(key);
+    }
+
+    @Override
+    public <T> T get(String key) {
+        return (T) CACHE.get(key);
+    }
+}

src/main/java/com/laker/admin/module/sys/controller/IndexController.java

 package com.laker.admin.module.sys.controller;
 
-import cn.hutool.captcha.CaptchaUtil;
-import cn.hutool.captcha.LineCaptcha;
+import cn.hutool.core.lang.Dict;
+import cn.hutool.core.util.IdUtil;
+import com.laker.admin.framework.Response;
+import com.laker.admin.framework.cache.ICache;
+import com.wf.captcha.SpecCaptcha;
 import lombok.extern.slf4j.Slf4j;
+import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.GetMapping;
-
-import javax.servlet.http.HttpServletResponse;
-import java.io.IOException;
+import org.springframework.web.bind.annotation.ResponseBody;
 
 /**
  * /admin/** 无需check login
@@ -15,17 +17,30 @@ import java.io.IOException;
 @Controller
 @Slf4j
 public class IndexController {
+    @Autowired
+    ICache iCache;
 
     @GetMapping({"/admin", "/admin/index", "/admin/"})
     public String adminIndex() {
         return "redirect:/admin/index.html";
     }
 
-
+    /**
+     * 详情参考：https://gitee.com/whvse/EasyCaptcha
+     *
+     * @return
+     */
     @GetMapping("/captcha")
-    public void captcha(HttpServletResponse response) throws IOException {
-        LineCaptcha captcha = CaptchaUtil.createLineCaptcha(100, 40, 4, 2);
-        log.info("当前验证码：{}", captcha.getCode());
-        captcha.write(response.getOutputStream());
+    @ResponseBody
+    public Response captcha() {
+        SpecCaptcha specCaptcha = new SpecCaptcha(130, 48, 5);
+        String verCode = specCaptcha.text().toLowerCase();
+        String uid = IdUtil.simpleUUID();
+        log.info("当前uid:{},验证码：{}", uid, verCode);
+        // 前后端分离，这时还未有会话信息，用于确定uid和验证码的一一映射关系，防止多人串码
+        // 把uuid和图片码一起给前端，验证的时候再一起回来
+        iCache.put(uid, verCode, 3 * 60);
+
+        return Response.ok(Dict.create().set("uid", uid).set("image", specCaptcha.toBase64()));
     }
 }
\ No newline at end of file

src/main/java/com/laker/admin/module/sys/controller/LoginController.java

@@ -2,10 +2,12 @@ package com.laker.admin.module.sys.controller;
 
 import cn.dev33.satoken.annotation.SaCheckLogin;
 import cn.dev33.satoken.stp.StpUtil;
+import cn.hutool.core.util.StrUtil;
 import com.baomidou.mybatisplus.core.toolkit.Wrappers;
 import com.github.xiaoymin.knife4j.annotations.ApiOperationSupport;
 import com.github.xiaoymin.knife4j.annotations.ApiSupport;
 import com.laker.admin.framework.Response;
+import com.laker.admin.framework.cache.ICache;
 import com.laker.admin.framework.repeatedsubmit.RepeatSubmitLimit;
 import com.laker.admin.module.sys.entity.SysUser;
 import com.laker.admin.module.sys.service.ISysUserService;
@@ -26,12 +28,19 @@ public class LoginController {
 
     @Autowired
     ISysUserService sysUserService;
+    @Autowired
+    ICache iCache;
 
     @PostMapping("/api/v1/login")
     @ApiOperationSupport(order = 1)
     @ApiOperation(value = "登录")
     public Response login(@RequestBody LoginDto loginDto) {
         log.info("login {}", loginDto);
+        // 验证码是否正确
+        String code = iCache.get(loginDto.getUid());
+        if (!StrUtil.equalsIgnoreCase(code, loginDto.getCaptchaCode())) {
+            return Response.error("500", "验证码不正确或已失效");
+        }
         // 单机版：在map中创建了会话，token id等映射关系 // 写入cookie
         SysUser sysUser = sysUserService.getOne(Wrappers.<SysUser>lambdaQuery()
                 .eq(SysUser::getUserName, loginDto.getUsername())

src/main/java/com/laker/admin/module/sys/controller/LoginDto.java

@@ -2,10 +2,14 @@ package com.laker.admin.module.sys.controller;
 
 import lombok.Data;
 
+/**
+ * @author laker
+ */
 @Data
 public class LoginDto {
 
     private String username;
     private String password;
     private String captchaCode;
+    private String uid;
 }

web/admin/admin/css/other/login.css

@@ -89,5 +89,5 @@ body {
 .codeImage {
 	float: right;
 	height: 42px;
-	border: #e6e6e6 1px solid;
+	border: #781a1a 2px solid;
 }

web/admin/login.html

@@ -27,7 +27,7 @@
     <div class="layui-form-item">
         <input placeholder="验证码 : " hover name="captchaCode" lay-verify="title"
                class="code layui-input layui-input-inline"/>
-        <img id="captcha" src="admin/captcha" class="codeImage"/>
+        <img id="captcha" class="codeImage"/>
     </div>
     <div class="layui-form-item">
         <input type="checkbox" name="" title="记住密码" lay-skin="primary" checked>
@@ -47,13 +47,12 @@
         var button = layui.button;
         var popup = layui.popup;
         let $ = layui.jquery;
+        var uid;
         captcha();
         // 登 录 提 交
         form.on('submit(login)', function (data) {
-
-            /// 验证
-            console.log(data);
             /// 登录
+            data.field.uid = uid;
             $.ajax({
                 url: EasyAdminContext.url + '/api/v1/login',
                 data: JSON.stringify(data.field),
@@ -70,7 +69,7 @@
                         // 动画
                         button.load({
                             elem: '.login',
-                            time: 500,
+                            time: 200,
                             done: function () {
 
                                 popup.success("登录成功", function () {
@@ -91,7 +90,11 @@
         });
 
         function captcha() {
-            document.getElementById("captcha").src = EasyAdminContext.url + "/captcha" + "?" + Math.random();
+            // 获取验证码
+            $.get(EasyAdminContext.url + '/captcha', function (res) {
+                uid = res.data.uid;
+                $('#captcha').attr('src', res.data.image);
+            }, 'json');
         }
 
         $("#captcha").click(function () {