科技

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

SpringBoot SpringCloud · 發表 2018-10-29 18:45:00

摘要：登入驗證碼登入驗證是一般系統都會有的功能，驗證的方式也多種多樣，比如輸入式驗證碼，拖動式驗證條，拖動式驗證拼圖等等。我們這裡先實現常規的輸入驗證碼的方式，右邊顯示驗證碼圖片，點選可重新整理，左邊輸入驗證碼。如下圖為實現的效果。實現案例驗證碼的實現需要前後端協同...

登入驗證碼

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

我們這裡先實現常規的輸入驗證碼的方式，右邊顯示驗證碼圖片，點選可重新整理，左邊輸入驗證碼。如下圖為實現的效果。

實現案例

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

後端實現

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

到這裡後臺程式碼就完成了。

啟動程式，訪問 ofollow,noindex">http://localhost:8001/captcha.jpg ，如果結果如下就沒問題了。

前端實現

1.新增元件

開啟登入頁面，在密碼欄下面增加一行驗證碼。

<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"> </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是驗證碼圖片路徑。

3.驗證規則

新增驗證碼驗證規則。

4.傳入驗證碼

在登入介面呼叫的時候，一併傳入驗證碼。

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

5.重新整理驗證碼

新增refreshCaptcha方法，增加重新整理驗證碼的邏輯。

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/

來源：部落格園精華區

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