【Kaptcha】增加登录验证码

src/main/java/cn/stylefeng/guns/modular/kaptcha/KaptchaController.java

@@ -0,0 +1,56 @@
+package cn.stylefeng.guns.modular.kaptcha;
+
+import cn.hutool.captcha.CaptchaUtil;
+import cn.hutool.captcha.CircleCaptcha;
+import cn.hutool.captcha.LineCaptcha;
+import cn.hutool.captcha.ShearCaptcha;
+import cn.stylefeng.guns.core.consts.ProjectConstants;
+import cn.stylefeng.roses.kernel.auth.api.constants.AuthConstants;
+import cn.stylefeng.roses.kernel.resource.api.annotation.ApiResource;
+import cn.stylefeng.roses.kernel.resource.api.annotation.GetResource;
+import cn.stylefeng.roses.kernel.rule.util.HttpServletUtil;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestMethod;
+import org.springframework.web.bind.annotation.ResponseBody;
+
+import javax.servlet.ServletOutputStream;
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+import javax.servlet.http.HttpSession;
+import java.io.IOException;
+
+/**
+ * 生成验证码控制器
+ *
+ * @author chenjinlong
+ * @date 2021/1/14 19:58
+ */
+@Controller
+@Slf4j
+@ApiResource(name = "生成验证码")
+public class KaptchaController {
+
+    /**
+     * 获取验证码
+     *
+     * @author chenjinlong
+     * @date 2021/1/14 20:10
+     */
+    @GetResource(name = "获取验证码", path = "/kaptcha", requiredPermission = false, requiredLogin = false)
+    public void getCode(HttpServletResponse response, HttpSession session) {
+        //定义图形验证码的长、宽、验证码字符数、干扰元素个数
+        CircleCaptcha captcha = CaptchaUtil.createCircleCaptcha(200, 100, 4, 20);
+        //将验证码放入session
+        session.setAttribute(AuthConstants.KAPTCHA_SESSION_KEY, captcha.getCode());
+        try {
+            ServletOutputStream outputStream = response.getOutputStream();
+            captcha.write(outputStream);
+            outputStream.close();
+        } catch (IOException e) {
+            e.printStackTrace();
+        }
+    }
+
+}

src/main/webapp/pages/login.html

@@ -165,14 +165,21 @@
         <h2>用户登录</h2>
         <div class="layui-form-item layui-input-icon-group">
             <i class="layui-icon layui-icon-username"></i>
-            <input class="layui-input" id="username" name="username" placeholder="请输入登录账号" value="admin" autocomplete="off" lay-verType="tips" lay-verify="required" required/>
+            <input class="layui-input" id="username" name="username" placeholder="请输入登录账号" autocomplete="off" lay-verType="tips" lay-verify="required" required/>
         </div>
         <div class="layui-form-item layui-input-icon-group">
             <i class="layui-icon layui-icon-password"></i>
-            <input class="layui-input" id="password" name="password" placeholder="请输入登录密码" value="123456" type="password" lay-verType="tips" lay-verify="required" required/>
+            <input class="layui-input" id="password" name="password" placeholder="请输入登录密码" type="password" lay-verType="tips" lay-verify="required" required/>
         </div>
+        @if(constants.getCaptchaOpen()){
+        <div class="layui-form-item layui-input-icon-group login-captcha-group">
+            <i class="layui-icon layui-icon-auz"></i>
+            <input class="layui-input" id="kaptcha" name="kaptcha" placeholder="请输入验证码" autocomplete="off" lay-verType="tips" lay-verify="required" required/>
+            <img class="login-captcha" alt="" src="${ctxPath}/kaptcha"/>
+        </div>
+        @}
         <div class="layui-form-item">
-            <button class="layui-btn layui-btn-fluid" id="submit">登录</button>
+            <button class="layui-btn layui-btn-fluid" lay-filter="loginSubmit" lay-submit>登录</button>
         </div>
         <div class="layui-form-item login-oauth-group text-center">
             <a href="${ctxPath}/oauth/render/qq"><i class="layui-icon layui-icon-login-qq" style="color:#3492ed;"></i></a>&emsp;
@@ -197,12 +204,18 @@
 <script type="text/javascript" src="${ctxPath}/assets/common/js/common.js?v=${constants.getReleaseVersion()}"></script>
 <script>
     layui.use(['layer', 'form', 'index', 'HttpRequest'], function () {
+        var layer = layui.layer;
         var $ = layui.jquery;
         var layer = layui.layer;
         var form = layui.form;
         var HttpRequest = layui.HttpRequest;
         var index = layui.index;
 
+        // 点击刷新验证码
+        $('img.login-captcha').click(function () {
+            this.src = this.src + '?t=' + (new Date).getTime();
+        });
+
         $('.login-wrapper').removeClass('layui-hide');
 
         var errorMsg = "${tips!}";
@@ -211,7 +224,7 @@
         }
 
         // 登录操作
-        $('#submit').click(function () {
+        form.on('submit(loginSubmit)', function (obj){
             var request = new HttpRequest(Feng.ctxPath + "/loginAction", 'post', function (data) {
                 Feng.success("登录成功!");
                 // 清除顶部选择应用的缓存
@@ -219,10 +232,15 @@
                 // 重定向到首页
                 window.location.href = Feng.ctxPath + "/";
             }, function (data) {
+                @if(constants.getCaptchaOpen()){
+                    //刷新验证码
+                    $('img.login-captcha').attr("src", Feng.ctxPath+'/kaptcha?t=' + (new Date).getTime());
+                @}
                 Feng.error("登录失败!" + data.message);
             });
             request.set("account", $("#username").val());
             request.set("password", $("#password").val());
+            request.set("kaptcha", $("#kaptcha").val());
             request.start(true);
         });