傳統登陸頁面中包含兩個輸入項：
• 用戶名
• 密碼
有時為了防止機器人進行自動登陸操作，或者防止惡意用戶進行用戶信息掃描，需增加動態驗證碼功能。
此時，登陸頁面中包含了三個輸入項：
• 用戶名
• 密碼
• 驗證碼
結合前端以及后端（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值一同提交到后端，完成驗證碼的驗證流程。