Spring Boot + Spring Cloud 實現權限管理系統 後端篇（十七）：登陸驗證碼實現（Captcha）

登陸驗證碼

登陸驗證是通常系統都會有的功能，驗證的方式也多種多樣，好比輸入式驗證碼，拖動式驗證條，拖動式驗證拼圖等等。

咱們這裏先實現常規的輸入驗證碼的方式，右邊顯示驗證碼圖片，點擊可刷新，左邊輸入驗證碼。以下圖爲實現的效果。

實現案例

驗證碼的實現須要先後端協同，脫離彼此則不可用，故將先後端的實現放在一塊兒，再也不另寫前端教程。

後端實現

1.添加依賴

打開 kitty-admin 工程，添加maven依賴。

pom.xml

<!-- kaptcha -->
<dependency>
    <groupId>com.github.axet</groupId>
    <artifactId>kaptcha</artifactId>
    <version>${kaptcha.version}</version>
</dependency>

版本是 <kaptcha.version>0.0.9</kaptcha.version>

2.添加配置

添加驗證碼配置類 KaptchaConfig，配置驗證碼的一些樣式。

KaptchaConfig.java

package com.louis.kitty.admin.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;

/**
 * 驗證碼配置
 * @author Louis
 * @date Oct 29, 2018
 */
@Configuration
public class KaptchaConfig {

    @Bean
    public DefaultKaptcha producer() {
        Properties properties = new Properties();
        properties.put("kaptcha.border", "no");
        properties.put("kaptcha.textproducer.font.color", "black");
        properties.put("kaptcha.textproducer.char.space", "5");
        Config config = new Config(properties);
        DefaultKaptcha defaultKaptcha = new DefaultKaptcha();
        defaultKaptcha.setConfig(config);
        return defaultKaptcha;
    }
}

3.添加驗證碼獲取接口

添加驗證碼獲取接口，並將生成的驗證碼保存起來，在登陸的時候用來跟前臺輸入驗證碼進行匹配。

SysLoginController.java

    @GetMapping("captcha.jpg")
    public void captcha(HttpServletResponse response) throws ServletException, IOException {
        response.setHeader("Cache-Control", "no-store, no-cache");
        response.setContentType("image/jpeg");

        // 生成文字驗證碼
        String text = producer.createText();
        // 生成圖片驗證碼
        BufferedImage image = producer.createImage(text);
        // 保存到驗證碼到 session
        ShiroUtils.setSessionAttribute(Constants.KAPTCHA_SESSION_KEY, text);

        ServletOutputStream out = response.getOutputStream();
        ImageIO.write(image, "jpg", out);    
        IOUtils.closeQuietly(out);
    }

4.登陸接口增長驗證碼驗證

登陸接口增長驗證碼驗證，將以前保存的驗證碼跟前臺輸入驗證碼進行匹配。

SysLoginController.java

    /**
     * 登陸接口
     */
    @PostMapping(value = "/login")
    public HttpResult login(@RequestBody LoginBean loginBean) throws IOException {
        String userName = loginBean.getAccount();
        String password = loginBean.getPassword();
        String captcha = loginBean.getCaptcha();
        
        // 從session中獲取以前保存的驗證碼跟前臺傳來的驗證碼進行匹配
        Object kaptcha = ShiroUtils.getSessionAttribute(Constants.KAPTCHA_SESSION_KEY);
        if(kaptcha == null){
            return HttpResult.error("驗證碼已失效");
        }
        if(!captcha.equals(kaptcha)){
            return HttpResult.error("驗證碼不正確");
        }
        
        // 用戶信息
        SysUser user = sysUserService.findByName(userName);

        // 帳號不存在、密碼錯誤
        if (user == null) {
            return HttpResult.error("帳號不存在");
        }
        
        if (!match(user, password)) {
            return HttpResult.error("密碼不正確");
        }

        // 帳號鎖定
        if (user.getStatus() == 0) {
            return HttpResult.error("帳號已被鎖定,請聯繫管理員");
        }

        // 生成token，並保存到數據庫
        SysUserToken data = sysUserTokenService.createToken(user.getId());
        return HttpResult.ok(data);
    }

5.修改Shiro配置

修改Shiro配置，配置驗證碼生成接口無需進行登陸認證。

ShiroConfig.java

 

到這裏後臺代碼就完成了。

啓動程序，訪問 http://localhost:8001/captcha.jpg，若是結果以下就沒問題了。

前端實現

1.添加組件

打開登陸頁面，在密碼欄下面增長一行驗證碼。

Login.vue

<el-form-item >
  <el-col :span="12">
    <el-form-item prop="captcha">
      <el-input type="test" v-model="loginForm.captcha" auto-complete="off" placeholder="驗證碼, 單擊圖片刷新"
        style="width: 100%;">
      </el-input>
    </el-form-item>
  </el-col>
  <el-col class="line" :span="1">&nbsp;</el-col>
  <el-col :span="11">
    <el-form-item>
        <img style="width: 100%;" class="pointer" :src="loginForm.src" @click="refreshCaptcha">
    </el-form-item>
  </el-col>
</el-form-item>

2.添加組件

添加驗證碼相關的屬性，captcha是驗證碼值，src是驗證碼圖片路徑。

Login.vue

 

3.驗證規則

添加驗證碼驗證規則。

Login.vue

4.傳入驗證碼

在登陸接口調用的時候，一併傳入驗證碼。

Login.vue

let userInfo = {account:this.loginForm.account, password:this.loginForm.password, captcha:this.loginForm.captcha}

5.刷新驗證碼

添加refreshCaptcha方法，增長刷新驗證碼的邏輯。

Login.vue

refreshCaptcha: function(){
      this.loginForm.src = this.global.baseUrl + "/captcha.jpg?t=" + new Date().getTime();
    }

到這裏前端diam也完成了。

最終效果

啓動先後端，最終界面效果以下。

 

源碼下載

後端：https://gitee.com/liuge1988/kitty

前端：https://gitee.com/liuge1988/kitty-ui.git

---

做者：朝雨憶輕塵
出處：https://www.cnblogs.com/xifengxiaoma/ 版權全部，歡迎轉載，轉載請註明原文做者及出處。