web系统登陆页面增加验证码

传统登陆页面中包含两个输入项：
• 用户名
• 密码
有时为了防止机器人进行自动登陆操作，或者防止恶意用户进行用户信息扫描，需增加动态验证码功能。
此时，登陆页面中包含了三个输入项：
• 用户名
• 密码
• 验证码
结合前端以及后端（java），介绍一个简单的验证码功能实现。

首先介绍一下验证码的整体流程：

两个流程：1、生成验证码，2、验证验证码。

前端

前端的主要工作是从后端获取验证码，并在用户登录时，将验证码提交到后端。
此时，需要知道后端生成验证的url地址。
并且，还要在在登陆页面中，增加验证码的input和显示显示验证码的img。
利用jquery或者其他方式，实现验证码的获取和刷新。

<input type="text" name="checkCode" placeholder="验证码" />

<img id="checkCode_img" alt="点击刷新验证码" />

<script>

var getCodeUrl="/getCode";//获取验证码的后端地址

$('#checkCode_img').attr('src',getCodeUrl+'?t='+ new Date().getTime()).show();

$('#checkCode_img').click(function(){this.src=getCodeUrl+'?t='+ new Date().getTime();});

</script>

获取验证码时的时间参数，可有可无。
这样，在已有登陆页面的基础上，增加了验证码的显示以及输入区域了。
注意：其中/getCode是获取验证的后台地址。

后台

将地址/getCode映射到验证码绘制controller，在此controller中，利用BufferedImage类新建图片绘制的内存空间，使用BufferedImage.createGraphics()获取图片绘制的具体实例。
在图片绘制实例中，可以绘制多种线条和文字，同时可设置绘制时使用的颜色和字体。
在绘制线条和文字时，可进行画布的旋转。

使用java绘制具体可参考网络资料。
http://www.jb51.net/article/73136.htm
http://www.open-open.com/lib/view/open1413428178653.html

图片绘制完后，不要忘记进行dispose操作，释放资源。使用

ByteArrayOutputStream baos = new ByteArrayOutputStream();

ImageIO.write(bi, "jpg", baos);

byte[] bytes = baos.toByteArray();

获取图片的二进制数据，并通过base64编码，传输给前端显示。
在验证码图片绘制的同时，后端可将绘制的文字，保存到session会话中，

request.getSession().setAttribute(codeKey, checkValue);

可在用户提交登录信息时，在登陆验证拦截器程序里面，可以获取到此用户会话中创建的验证码。

request.getSession().getAttribute(codeKey, checkValue);

为了保证在大规模web后端，依然可以使用验证码功能，需要多台web后端共享生成的验证码信息。
此时需要对后端验证码保存方式进行改造。
一种方式就是，为生成的验证码图片计算出一个哈希key来，并将key和验证码文字保存到集中式的缓存中，比如redis。
同时，传输给前端的数据增加一个参数，即验证码的key，前端还需要增加一个input保存此key值，在用户登陆时，将此key值一同提交到后端，完成验证码的验证流程。

巴特西

web系统登陆页面增加验证码

前端

后台

最新文章

热门文章