图形验证码是验证码的一种，有防止黑客对某一特定注册用户用程序暴力破解私人信息、恶意破解密码、刷票、论坛灌水的作用。

图形验证码是一种区分用户是计算机还是人的公共全自动程序。验证码是现在很多网站通行的方式，由计算机生成并评判，但是只有人类才能解答。

在常用的网站业务中我们不难看出很多登录注册业务上都采用了图形验证码的方式。今天记录一个图形验证码以后端的方式实现的逻辑。

在登录注册业务上集成图片中验证码后的是效果如下图所示：

这里主要推荐Hutool工具中的captcha包中的图形验证码来实现。

验证码功能位于cn.hutool.captcha包中，核心接口为ICaptcha，此接口定义了以下方法：

createCode 创建验证码，实现类需同时生成随机验证码字符串和验证码图片

getCode 获取验证码的文字内容

verify 验证验证码是否正确，建议忽略大小写

write 将验证码写出到目标流中

其中write方法只有一个OutputStream，ICaptcha实现类可以根据这个方法封装写出到文件等方法。

AbstractCaptcha为一个ICaptcha抽象实现类，此类实现了验证码文本生成、非大小写敏感的验证、写出到流和文件等方法，通过继承此抽象类只需实现createImage方法定义图形生成规则即可。

生成方式可参考Hutool官网给定的方式：

生成效果大致如下：

可以看出，这种方式特别简便，大部分实现逻辑已经被封装在工具类内部，并不需要我们了解具体的实现。并且可以验证图形中的验证码信息，非常方便该功能在登陆注册等业务上的验证码校验。

但是需要注意的是，这种方式一般用于输出一个png图片，如果后端处理生成图片后怎么在前端界面上展示也是我们需要考虑的问题。

不过Hutool也给出了另外的输入输出流的方式，因此我们可以在后端利用前端的请求，调用图形验证码生成逻辑相应的图形输出流，然后在前端通过指定的流解析，将图形验证码展示在前端界面上。另外在处理逻辑上，在生成图片输出流的同时去获取图心中的验证码并将验证码给信息存入Redis缓存中，当用户在登陆或注册模块中输入相应信息时，将前端界面的数据代入后端一起校验，如果某个值有错，将对应的错误信息反馈给用户。

首先需要导入Hutool的工具包，至于项目构建的SpringBoot依赖并不在这里一一列举。这里主要是需要使用captcha的依赖，怕麻烦的也可以将Hutool所有的项目依赖hutool-all直接导入：

依赖加载完毕后，就可以使用CaptchaUtil这个工具类了。

然后就通过工具类构建图形验证码构建接口

这里我们将图形验证码写入到输出流，并通过Base64进行编码转换，当前端获取后端请求后的数据后，将“img”对应的输出流以"data:image/gif;base64,"的方式解析出来，这样图片就能成功显示在界面上了。

为了方便校验，这里也为每个请求生成的图形验证码指定一个与之对应的随机id，并为其设置一定的缓存时间，以便在业务中校验。这样在前端界面我们每次点击以及验证码图片就相当于向后端请求一次。（所以这只是一种实现方式，但是并不太可取，毕竟大量请求会消耗服务器）。