一種注冊登錄系統圖片驗證碼設計與實現

陳義中 李松林

摘要：驗證碼對提高網站安全尤為重要，通對過一些常見驗證碼進行比較分析發現，圖片驗證碼更適合大多數系統或網站的驗證方式。設計并開發了一種注冊登錄系統圖片驗證碼，闡述了其設計構思及關鍵技術實現。

關鍵詞關鍵詞：驗證碼；圖片驗證碼；信息安全

DOIDOI：10.11907/rjdk.161891

中圖分類號：TP319文獻標識碼：A文章編號文章編號：16727800（2016）007008204

0引言

隨著人們網絡安全意識的提高，驗證碼技術越來越受到重視。注冊登錄系統加載驗證碼后可以有效避免不良用戶惡意連續登錄以及黑客的暴力破解與攻擊。國內TOP100論壇中，超過80%的論壇在注冊、登錄或發帖等功能模塊中均采用了圖形驗證碼技術。本文比較分析了一些常見驗證碼，設計開發了一種注冊登錄系統圖片驗證碼，并詳細闡述了其設計構思及關鍵技術實現。1常見驗證碼

驗證碼（CAPTCHA）是“Completely Automated Public Turing test to tell Computers and Humans A-part”，即“全自動區分計算機和人類的圖靈測試”。驗證碼的主要作用是防止一些黑客盜取或惡意破解密碼，以及刷票、論壇灌水、刷頁等操作，以有效預防某個黑客對某一個特定注冊用戶用特定程序暴力破解方式進行不斷的登陸嘗試。隨著驗證碼技術的不斷發展，不同種類的驗證碼相繼出現，但其安全性、時效性、交互性都存在一些不足。1.1純文本式驗證碼

純文本式驗證碼顯示信息包含字母、數字或隨機的4位字符串等。一旦驗證碼中的單個字符能被順利地提取出來，則采用成熟的OCR技術就很容易識別這類驗證碼。這是最早期的驗證碼，安全性非常低，形同虛設，目前基本不被采用。1.2圖片驗證碼

圖片驗證碼采用隨機生成的若干數字或字母組成一張圖像，然后在圖像上布滿雜點等干擾像素或者是對字母數字進行旋轉、變形、扭曲等操作，迫使用戶用肉眼辨認出圖片中的一串符號并手工輸入到文本框，如GIF、PNG、BMP、JPG和XBM格式圖片驗證碼、漢驗圖片驗證碼、韓文或日文圖片驗證碼、問題（計算）圖片驗證碼等。目前，大多數系統或網站都采用圖片驗證碼。1.3郵件驗證碼

當用戶在網頁指定位置填入用戶的電子郵箱后，系統將隨機產生的驗證碼發到用戶電子郵箱，用戶再登錄電子郵箱獲取系統發送的驗證碼，安全性有一定保障。但這種驗證方式較為繁瑣，且耗時較長。1.4手機驗證碼

手機驗證碼需要用戶在網頁中輸入手機號碼來接收驗證碼，是比較有效的驗證碼，但這種方式涉及用戶個人隱私，用戶很排斥，只有少數安全級別要求非常高的行業采用，如銀行、民航等。

綜上所述，圖片驗證碼是一種大多數網站或系統較為適用的驗證方式。本文考慮設計一種圖片驗證碼，其顯示信息是由一組圖片組成（如動植昆蟲類、食品果蔬類等），從圖片信息認知上提高圖片驗證碼的識別難度，從而提高圖片驗證碼的安全性。

2圖片驗證碼設計與實現

2.1設計思路

在服務端新建一個圖片文件夾，然后從該圖片文件夾里找出8張圖片，再將這8張圖片合成一張大圖，并在這8張小圖里面隨機生成一個要用戶驗證的圖片分類，如小狗、啤酒等。當用戶訪問登錄頁面時，將圖片加載上去，用戶選擇提示所需圖片，當用戶點登陸時，根據用戶選擇的所有坐標判斷所選的圖片是否為實際上的驗證圖。驗證流程如圖1所示。

2.2具體實現

2.2.1文件夾建立

在服務端新建一個圖片文件夾，圖片文件結構如圖2所示。文件夾的結構及分類要便于后面生成用戶要選擇的Key圖片以及取出8張小圖合并成大圖。

2.2.2圖片選取

從新建的圖片文件夾中選取圖片，每次選擇8張圖片，并在選取圖片時采用遞歸算法，保存選取的每一個圖片的Path，再進行圖片去重，保證選取的圖片不重復。核心代碼如下：

2.2.3圖片分類

將選取的8張圖片進行分類，并保存在一個數組中，然后用隨機數從分類中選取一個分類作為Key分類，也即用戶要選擇的所有圖片。因為數組是有序的，可以遍歷數組中的元素，獲取每個key分類圖片的位置，在用戶點擊登錄時，進行驗證匹配。核心代碼如下：

2.2.4圖片合并

從圖片文件夾中選取不重復的8張圖片后，再將選取到的這8張圖片合成一張大圖。8張圖片合成效果如圖3所示。

核心代碼如下：

2.2.5分類保存

在Controller層中，先將Key分類保存到Session中，為用戶選擇圖片分類作提示，并為圖片驗證作判斷，然后將圖片流輸出到Response中，就可以生成驗證圖片。驗證碼效果如圖4所示。

在jsp中，為用戶的點擊生成小圖片標記。當用戶點圖片擊時，在父div上添加一個子div標簽，并且將它定位為relative， 并且設置zIndex，然后在這個div上添加一個img標簽，定位為absolute。在用戶點擊時，可以獲取點擊事件，根據點擊事件獲取點擊坐標，然后減去父div的坐標，就可以獲取相對坐標。可以根據自己的喜好定坐標原點，這里的坐標原點是第8個圖片的右下角。點擊圖片標記效果如圖5所示。

核心代碼如下：

2.2.7圖片判斷驗證

用戶根據圖片的提示信息，選擇并點擊驗證碼圖片后，再點擊登錄按鈕，服務器端會加載先前保存的Key分類與用戶選擇并點擊的圖片進行坐標比對判斷，如果一致，驗證登錄成功，否則需要用戶根據提示信息重新選擇認為正確的驗證碼圖片，或者點擊刷新后，按新的提示信息重新選擇。

2.2.8圖片刷新

用戶根據圖片提示信息選擇驗證碼圖片時，對當前顯示的8張圖片不認識或沒把握確認時，或者點擊驗證登錄失敗，都可以點擊刷新按鈕，系統會重新加載8張圖片，刷新功能有利于用戶正確選擇判斷。當點擊刷新生成新的圖片時，由于ajax不支持二進制流，可以自己用原生的xmlHttpRequest對象加html5的blob來完成。核心代碼如下：

3結語

這種注冊登錄系統圖片驗證碼中的圖片來源可以設計得非常豐富，具有信息量大、排列組合多等特點，可在一定程度上有效防止程序自動攻擊和人為破壞，從而提高系統的安全性。并且，這種帶游戲性質的驗證交互方式，也為用戶帶來了更有趣的驗證過程，提升了用戶的交互體驗。此外，在驗證圖片中植入廣告，可起到不錯的宣傳作用并帶來一定的經濟效益

參考文獻：

袁芳.基于ASP.NET 的驗證碼生成技術研究[J].科技廣場，2013（2）：4043.

李志云.基于ASP.NET的漢字驗證碼的研究與實現[J].數字技術與應用，2013（3）：117118.

李德平.一種彩色圖形驗證碼在WEB開發中的應用研究[J].清遠職業技術學院學報，2014，7（3）：