1 验证码

1.1 什么是验证码？

我搜索百度，从百度百科中拿出来一段话：

验证码（CAPTCHA）是“Completely Automated Public Turing test to tell Computers and Humans Apart”（全自动区分计算机和人类的图灵测试）的缩写，是一种区分用户是计算机还是人的公共全自动程序。可以防止：恶意破解密码、刷票、论坛灌水，有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试，实际上用验证码是现在很多网站通行的方式，我们利用比较简易的方式实现了这个功能。这个问题可以由计算机生成并评判，但是必须只有人类才能解答。由于计算机无法解答CAPTCHA的问题，所以回答出问题的用户就可以被认为是人类。

1.2 验证码的历史

验证码这个词最早是在2002年出现在卡内基梅隆大学。

1.3 验证码的作用

防止恶意破解密码、刷票、论坛灌水、刷页。

1.4 验证码的分类

验证码整体来说分为五类，他们分别是

• 静态图片内容验证码：一般都是输入一些随机码，形式上还可以有计算
• Gif动画验证码：动态展示一些随机码，形式上还可以有计算
• 手机短信验证码：发送短信随机验证码
• 手机语音验证码：语音验证码，也可以让你读出一些随机码或计算结果
• 视频验证码：点击视频中的一些随机码，计算结果

了解了验证码之后，我们开始手工实现一些验证码，当然你也可以使用一些已经封装好的工具来实现这个功能，例如Hutool、Google、Baidu、阿里等大佬们封装好的一些工具类直接实现验证码。

2 实现一个验证码

如果我们想要实现一个验证码，那么就得先要了解下验证码的实现原理以及代码实现。

2.1 验证码的原理

网页之间实现验证码大体上有如下步骤：

1）生成一个随机数

2）将随机数写入图片

3）将图片返回到网页

4）用户获取到图片信息，输入图片内容

5）用户提交内容，服务端验证内容的准确性

整体的流程，使用一张图可能会更形象些，大家可以在这图里面体会下。

这里简单使用“静态图片内容验证码”来作为一个实验例子，来实现我们需要的验证码功能。

2.1 生成一个算法验证码

这里同技术：Java-Web基础｜生成图片验证码（一）的逻辑是一样的，这里我就简单的只写这个算法逻辑吧。

生成一个随机码的步骤大体如下：

1）创建一个类RandImagesVerifCode

2）编写一个名叫randomString(String baseString, int length)的方法

3）测试实验

完整的代码如下：

packagecom.liuyc.tooljdk.image;
importjava.util.concurrent.ThreadLocalRandom;
/*** <p> Picture Verification Code </p>** @author Aion.Liu* @version v1.0.0* @description TODO* @since 2022/9/1 22:24*/publicclassRandImagesVerifCode {
publicstaticvoidmain(String[] args) {
Map<String, Object>resultMap=RandImagesVerifCode.randomCalculateString();
System.out.println("需要写入Redis的数据："+resultMap.get("result"));
// System.out.println("需要展示到页面的数据：" + resultMap.get("checkCode"));// 参考上一个章节的内容Stringbase642=RandImagesVerifCode.produceImage(resultMap.get("checkCode").toString());
System.out.println("需要回显到页面的数据："+base642);
    }
/*** 获取100以内计算格式的验证码** @return*/publicstaticMap<String, Object>randomCalculateString() {
Randomrandom=newRandom();
intintTemp;
intintFirst=random.nextInt(100);
intintSec=random.nextInt(100);
StringcheckCode="";
intresult=0;
switch (random.nextInt(6)) {
case0:
if (intFirst<intSec) {
intTemp=intFirst;
intFirst=intSec;
intSec=intTemp;
                }
checkCode=intFirst+"-"+intSec+"=?";
result=intFirst-intSec;
break;
case1:
if (intFirst<intSec) {
intTemp=intFirst;
intFirst=intSec;
intSec=intTemp;
                }
checkCode=intFirst+"-? ="+ (intFirst-intSec);
result=intSec;
break;
case2:
if (intFirst<intSec) {
intTemp=intFirst;
intFirst=intSec;
intSec=intTemp;
                }
checkCode="?-"+intSec+"="+ (intFirst-intSec);
result=intFirst;
break;
case3:
checkCode=intFirst+"+"+intSec+"=?";
result=intFirst+intSec;
break;
case4:
checkCode=intFirst+"+?="+ (intFirst+intSec);
result=intSec;
break;
case5:
checkCode="?+"+intSec+"="+ (intFirst+intSec);
result=intFirst;
break;
        }
Map<String, Object>resultMap=newHashMap<>();
resultMap.put("checkCode", checkCode);
resultMap.put("result", result);
returnresultMap;
    }
}

分步骤解析：

1、public static Map<String, Object> randomCalculateString()

这里是随机生成100以内的加减法，至于获取的结果是算术方式还是结果，我们随机，当然，你也可以按照自己的方式来优化修改这个方法，让它来拥有你想要的计算方式。参数的用途已经写在了代码中。

2、public static String produceImage(String resultCode) throws IOException

这个步骤比较简单

1）生成一张图片，将验证码写入图片，这里其实是将上述的表达式写入图片，而计算的结果写入redis，用于后期校验

2）将图片写入到流中并返回

执行后的结果如下：

需要写入Redis的数据：94

需要回显到页面的数据：data:image/jpg;base64,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

我们可以使用任意编写一个Html，然后将返回的数据写入img标签的src中，

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><imgsrc="data:image/jpg;base64,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"/></body></html>

打开网页后调试下结果如下结果。

现在，我们便完成了网页验证码的开发以及回显示到网页中啦。