前沿拓展：

驗(yàn)證碼登錄

摘要 您好，您的問題我已經(jīng)看到了，正在整理**，兩分鐘左右回復(fù)您。請(qǐng)稍等一會(huì)兒哦~ 咨詢記錄 · 回答于2021-12-20 -底部咨詢-883,發(fā)短信過(guò)來(lái),要求驗(yàn)證碼登錄 您好，您的問題我已經(jīng)看到了，正在整理**，兩分鐘左右回復(fù)您。請(qǐng)稍等一會(huì)兒哦~ 以前也一直有這類短信發(fā)過(guò)來(lái)說(shuō)是在信而富借款請(qǐng)問是真是假 您好，只要不是您本人**作登錄APP應(yīng)用，收到任何驗(yàn)證信息直接刪除即可。千萬(wàn)不要點(diǎn)擊這個(gè)鏈接 主要是自己的兒子一兩年都不跟自己聯(lián)系看他在外面借貸 您好，這種都是釣魚**短信，千萬(wàn)不可以相信 每次來(lái)短信或者打電話都不是一個(gè)地區(qū)的而且也不是一個(gè)省的 您好，孩子個(gè)人借貸您是無(wú)法直接查詢的。如果您的孩子還是未成年，您可以選擇報(bào)警處理 主要是孩子已經(jīng)成年都快30歲的人了也不跟家里聯(lián)系總是有這類的**擾作為老人又不懂 您好，這種是**釣魚短信，您不需要回復(fù)及點(diǎn)擊短信里的鏈接 您好，是的。如果您持續(xù)收到這種短信，建議您咨詢警察或在手機(jī)上下載一個(gè)國(guó)家反詐APP。 因?yàn)?*或**不會(huì)“短信或者打電話都不是一個(gè)地區(qū)的而且也不是一個(gè)省的”。

本文大綱

本文大綱前言前后端未分離的驗(yàn)證碼登錄方案驗(yàn)證碼生成流程如下登錄驗(yàn)證流程如下前后端分離的驗(yàn)證碼登錄方案驗(yàn)證碼生成流程如下登錄驗(yàn)證流程如下動(dòng)手?jǐn)]輪子Kaptcha介紹新建項(xiàng)目并加入依賴驗(yàn)證碼獲取和查看代碼獲取

前言

為了防止世界被破壞，為了守護(hù)世界的和平。。。說(shuō)錯(cuò)了，重來(lái)~

為了防止驗(yàn)證系統(tǒng)被暴力破解，很多系統(tǒng)都增加了驗(yàn)證碼效驗(yàn)，比較常見的就是圖片二維碼，業(yè)內(nèi)比較安全的是短信驗(yàn)證碼，當(dāng)然還有一些拼圖驗(yàn)證碼，加入人工智能的二維碼等等，我們今天的主題就是前后端分離的圖片二維碼登錄方案。

前后端未分離的驗(yàn)證碼登錄方案

傳統(tǒng)的項(xiàng)目大都是基于session交互的，前后端都在一個(gè)項(xiàng)目里面，比如傳統(tǒng)的SSH項(xiàng)目或者一些JSP系統(tǒng)，當(dāng)前端頁(yè)面觸發(fā)到獲取驗(yàn)證碼請(qǐng)求，可以將驗(yàn)證碼里面的信息存在上下文中，所以登錄的時(shí)候只需要 用戶名、密碼、驗(yàn)證碼即可。

驗(yàn)證碼生成流程如下

image-20200630193654411

登錄驗(yàn)證流程如下

登錄驗(yàn)證流程

可以發(fā)現(xiàn)，整個(gè)登錄流程還是依賴session上下文的，并且由后端調(diào)整頁(yè)面。

前后端分離的驗(yàn)證碼登錄方案

隨著系統(tǒng)和業(yè)務(wù)的不停升級(jí)，前后端代碼放在一起的項(xiàng)目越來(lái)越臃腫，已經(jīng)無(wú)法快速迭代和職責(zé)區(qū)分了，于是紛紛投入了前后端分離的懷抱，發(fā)現(xiàn)代碼和職責(zé)分離以后，開發(fā)效率越來(lái)越高了，功能迭代還越來(lái)越快，但是以前的驗(yàn)證碼登錄方案就要更改了。

驗(yàn)證碼生成流程如下

對(duì)比原來(lái)的方案，增加了redis中間件，不再是存在session里面了，但是后面怎么區(qū)分這個(gè)驗(yàn)證碼是這個(gè)請(qǐng)求生成的呢？所以我們加入了唯一標(biāo)識(shí)符來(lái)區(qū)分

登錄驗(yàn)證流程如下

可以發(fā)現(xiàn)，基于前后端分離的分布式項(xiàng)目登錄方案對(duì)比原來(lái)，加了一個(gè)redis中間件和token返回，不再依賴上下文session，并且頁(yè)面調(diào)整也是由后端換到了前端

動(dòng)手?jǐn)]輪子

基于驗(yàn)證碼的輪子還是挺多的，本文就以Kaptcha這個(gè)項(xiàng)目為例，通過(guò)springboot項(xiàng)目集成Kaptcha來(lái)實(shí)現(xiàn)驗(yàn)證碼生成和登錄方案。

Kaptcha介紹

Kaptcha是一個(gè)基于SimpleCaptcha的驗(yàn)證碼開源項(xiàng)目

我找的這個(gè)輪子是基于SimpleCaptcha二次封裝的，maven依賴如下

<!–Kaptcha是一個(gè)基于SimpleCaptcha的驗(yàn)證碼開源項(xiàng)目–><dependency>  <groupId>com.github.penggle</groupId>  <artifactId>kaptcha</artifactId>  <version>2.3.2</version></dependency>新建項(xiàng)目并加入依賴

依賴主要有 SpringBoot、Kaptcha、Redis

pom.xml

<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0"         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">    <modelVersion>4.0.0</modelVersion>    <groupId>com.lzp</groupId>    <artifactId>kaptcha</artifactId>    <version>1.0-SNAPSHOT</version>    <parent>        <groupId>org.springframework.boot</groupId>        <artifactId>spring-boot-starter-parent</artifactId>        <version>2.3.0.RELEASE</version>        <relativePath/> <!– lookup parent from repository –>    </parent>        <dependencies>        <!–Kaptcha是一個(gè)基于SimpleCaptcha的驗(yàn)證碼開源項(xiàng)目–>        <dependency>            <groupId>com.github.penggle</groupId>            <artifactId>kaptcha</artifactId>            <version>2.3.2</version>        </dependency>        <dependency>            <groupId>org.springframework.boot</groupId>            <artifactId>spring-boot-starter-web</artifactId>        </dependency>        <dependency>            <groupId>org.springframework.boot</groupId>            <artifactId>spring-boot-starter-data-redis</artifactId>        </dependency>        <!– redis依賴commons-pool 這個(gè)依賴一定要添加 –>        <dependency>            <groupId>org.apache.commons</groupId>            <artifactId>commons-pool2</artifactId>        </dependency>        <dependency>            <groupId>com.alibaba</groupId>            <artifactId>fastjson</artifactId>            <version>1.2.3</version>        </dependency>        <dependency>            <groupId>com.fasterxml.jackson.core</groupId>            <artifactId>jackson-databind</artifactId>        </dependency>    </dependencies>    <build>        <plugins>            <plugin>                <groupId>org.springframework.boot</groupId>                <artifactId>spring-boot-maven-plugin</artifactId>            </plugin>        </plugins>    </build></project>Redis配置類RedisConfig@Configurationpublic class RedisConfig {    @Bean    public RedisTemplate<String, Object> redisTemplate(LettuceConnectionFactory redisConnectionFactory){        RedisTemplate<String, Object> redisTemplate = new RedisTemplate<String, Object>();        redisTemplate.setKeySerializer(new StringRedisSerializer());        redisTemplate.setValueSerializer(new GenericJackson2JsonRedisSerializer());        redisTemplate.setHashKeySerializer(new StringRedisSerializer());        redisTemplate.setHashValueSerializer(new GenericJackson2JsonRedisSerializer());        redisTemplate.setConnectionFactory(redisConnectionFactory);        return redisTemplate;    }}驗(yàn)證碼配置類KaptchaConfig@Configurationpublic class KaptchaConfig {    @Bean    public DefaultKaptcha producer(){        DefaultKaptcha defaultKaptcha = new DefaultKaptcha();        Properties properties = new Properties();        properties.setProperty("kaptcha.border", "no");        properties.setProperty("kaptcha.border.color", "105,179,90");        properties.setProperty("kaptcha.textproducer.font.color", "black");        properties.setProperty("kaptcha.image.width", "110");        properties.setProperty("kaptcha.image.height", "40");        properties.setProperty("kaptcha.textproducer.char.string","23456789abcdefghkmnpqrstuvwxyzABCDEFGHKMNPRSTUVWXYZ");        properties.setProperty("kaptcha.textproducer.font.size", "30");        properties.setProperty("kaptcha.textproducer.char.space","3");        properties.setProperty("kaptcha.session.key", "code");        properties.setProperty("kaptcha.textproducer.char.length", "4");        properties.setProperty("kaptcha.textproducer.font.names", "宋體,楷體,微軟雅黑");//        properties.setProperty("kaptcha.obscurificator.impl","com.xxx");可以重寫實(shí)現(xiàn)類        properties.setProperty("kaptcha.noise.impl","com.google.code.kaptcha.impl.NoNoise");        Config config = new Config(properties);        defaultKaptcha.setConfig(config);        return defaultKaptcha;    }驗(yàn)證碼控制層CaptchaController

為了方便代碼寫一塊了，講究看

package com.lzp.kaptcha.controller;import com.google.code.kaptcha.impl.DefaultKaptcha;import com.lzp.kaptcha.service.CaptchaService;import com.lzp.kaptcha.vo.CaptchaVO;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.bind.annotation.RestController;import sun.misc.BASE64Encoder;import javax.imageio.ImageIO;import java.awt.image.BufferedImage;import java.io.ByteArrayOutputStream;import java.io.IOException;@RestController@RequestMapping("/captcha")public class CaptchaController {    @Autowired    private DefaultKaptcha producer;    @Autowired    private CaptchaService captchaService;    @ResponseBody    @GetMapping("/get")    public CaptchaVO getCaptcha() throws IOException {        // 生成文字驗(yàn)證碼        String content = producer.createText();        // 生成圖片驗(yàn)證碼        ByteArrayOutputStream outputStream = null;        BufferedImage image = producer.createImage(content);        outputStream = new ByteArrayOutputStream();        ImageIO.write(image, "jpg", outputStream);        // 對(duì)字節(jié)數(shù)組Base64編碼        BASE64Encoder encoder = new BASE64Encoder();        String str = "data:image/jpeg;base64,";        String base64Img = str + encoder.encode(outputStream.toByteArray()).replace("\n", "").replace("\r", "");        CaptchaVO captchaVO  =captchaService.cacheCaptcha(content);        captchaVO.setBase64Img(base64Img);        return  captchaVO;    }}驗(yàn)證碼返回對(duì)象CaptchaVOpackage com.lzp.kaptcha.vo;public class CaptchaVO {    /**     * 驗(yàn)證碼標(biāo)識(shí)符     */    private String captchaKey;    /**     * 驗(yàn)證碼過(guò)期時(shí)間     */    private Long expire;    /**     * base64字符串     */    private String base64Img;    public String getCaptchaKey() {        return captchaKey;    }    public void setCaptchaKey(String captchaKey) {        this.captchaKey = captchaKey;    }    public Long getExpire() {        return expire;    }    public void setExpire(Long expire) {        this.expire = expire;    }    public String getBase64Img() {        return base64Img;    }    public void setBase64Img(String base64Img) {        this.base64Img = base64Img;    }}Redis封裝類 RedisUtils

網(wǎng)上隨意找的，類里面注明來(lái)源，將就用，代碼較多就不貼了，文末有代碼獲取

驗(yàn)證碼方法層CaptchaServicepackage com.lzp.kaptcha.service;import com.lzp.kaptcha.utils.RedisUtils;import com.lzp.kaptcha.vo.CaptchaVO;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.beans.factory.annotation.Value;import org.springframework.stereotype.Service;import java.util.UUID;@Servicepublic class CaptchaService {    @Value("${server.session.timeout:300}")    private Long timeout;    @Autowired    private RedisUtils redisUtils;    private final String CAPTCHA_KEY = "captcha:verification:";    public CaptchaVO cacheCaptcha(String captcha){        //生成一個(gè)隨機(jī)標(biāo)識(shí)符        String captchaKey = UUID.randomUUID().toString();        //緩存驗(yàn)證碼并設(shè)置過(guò)期時(shí)間        redisUtils.set(CAPTCHA_KEY.concat(captchaKey),captcha,timeout);        CaptchaVO captchaVO = new CaptchaVO();        captchaVO.setCaptchaKey(captchaKey);        captchaVO.setExpire(timeout);        return captchaVO;    }}用戶登錄對(duì)象封裝LoginDTOpackage com.lzp.kaptcha.dto;public class LoginDTO {    private String userName;    private String pwd;    private String captchaKey;    private String captcha;    public String getUserName() {        return userName;    }    public void setUserName(String userName) {        this.userName = userName;    }    public String getPwd() {        return pwd;    }    public void setPwd(String pwd) {        this.pwd = pwd;    }    public String getCaptchaKey() {        return captchaKey;    }    public void setCaptchaKey(String captchaKey) {        this.captchaKey = captchaKey;    }    public String getCaptcha() {        return captcha;    }    public void setCaptcha(String captcha) {        this.captcha = captcha;    }}登錄控制層UserController

這塊我寫邏輯代碼了，相信大家都看的懂

package com.lzp.kaptcha.controller;import com.lzp.kaptcha.dto.LoginDTO;import com.lzp.kaptcha.utils.RedisUtils;import com.lzp.kaptcha.vo.UserVO;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.RequestBody;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;@RestController@RequestMapping("/user")public class UserController {    @Autowired    private RedisUtils redisUtils;    @PostMapping("/login")    public UserVO login(@RequestBody LoginDTO loginDTO)  {        Object captch = redisUtils.get(loginDTO.getCaptchaKey());        if(captch == null){            // throw 驗(yàn)證碼已過(guò)期        }        if(!loginDTO.getCaptcha().equals(captch)){            // throw 驗(yàn)證碼錯(cuò)誤        }        // 查詢用戶信息        //判斷用戶是否存在 不存在拋出用戶名密碼錯(cuò)誤        //判斷密碼是否正確，不正確拋出用戶名密碼錯(cuò)誤        //構(gòu)造返回到前端的用戶對(duì)象并封裝信息和生成token        return new UserVO();    }}驗(yàn)證碼獲取和查看

代碼獲取

代碼已上傳地址庫(kù)，記得加個(gè)星標(biāo)哦！

https://github.com/pengziliu/GitHub-code-practice/

還可查看往期更多精彩~

拓展知識(shí)：

驗(yàn)證碼登錄

微信忘記密碼又不能用驗(yàn)證碼登錄的情況下，可使用找回密碼的方法：

**作工具：HUAWEIP20，微信7.0.10。

1、首先點(diǎn)擊登錄頁(yè)面下方的“找回密碼”。

2、選擇“申訴找回微信賬號(hào)密碼”。

3、查看頁(yè)面條款，同意條款，點(diǎn)擊“開始申訴”。

4、拖動(dòng)拼圖移動(dòng)到合適位置，完成驗(yàn)證。

5、如圖兩個(gè)選項(xiàng)，選擇“記得微信號(hào)”填寫微信號(hào)和能接受短信的手機(jī)號(hào)碼。

6、如果不記得微信號(hào)，則需要通過(guò)手機(jī)短信驗(yàn)證。

7、然后輸入兩個(gè)微信好友的手機(jī)號(hào)碼點(diǎn)擊“下一步”，等待申訴結(jié)果，一般會(huì)在24小時(shí)內(nèi)通過(guò)短信告知。

本回答被網(wǎng)友采納

驗(yàn)證碼登錄

這驗(yàn)證碼不存在忘不忘，他只是說(shuō)你密碼忘記了的時(shí)候，用這驗(yàn)證碼發(fā)到手機(jī)上，這樣進(jìn)行一個(gè)更改的，登錄的一個(gè)方式。

本回答被網(wǎng)友采納