一種注冊登錄系統(tǒng)圖片驗(yàn)證碼設(shè)計(jì)與實(shí)現(xiàn)

陳義中 李松林

摘要：驗(yàn)證碼對提高網(wǎng)站安全尤為重要，通對過一些常見驗(yàn)證碼進(jìn)行比較分析發(fā)現(xiàn)，圖片驗(yàn)證碼更適合大多數(shù)系統(tǒng)或網(wǎng)站的驗(yàn)證方式。設(shè)計(jì)并開發(fā)了一種注冊登錄系統(tǒng)圖片驗(yàn)證碼，闡述了其設(shè)計(jì)構(gòu)思及關(guān)鍵技術(shù)實(shí)現(xiàn)。

關(guān)鍵詞關(guān)鍵詞：驗(yàn)證碼；圖片驗(yàn)證碼；信息安全

DOIDOI：10.11907/rjdk.161891

中圖分類號：TP319文獻(xiàn)標(biāo)識碼：A文章編號文章編號：16727800（2016）007008204

0引言

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

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

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

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

當(dāng)用戶在網(wǎng)頁指定位置填入用戶的電子郵箱后，系統(tǒng)將隨機(jī)產(chǎn)生的驗(yàn)證碼發(fā)到用戶電子郵箱，用戶再登錄電子郵箱獲取系統(tǒng)發(fā)送的驗(yàn)證碼，安全性有一定保障。但這種驗(yàn)證方式較為繁瑣，且耗時(shí)較長。1.4手機(jī)驗(yàn)證碼

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

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

2圖片驗(yàn)證碼設(shè)計(jì)與實(shí)現(xiàn)

2.1設(shè)計(jì)思路

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

2.2具體實(shí)現(xiàn)

2.2.1文件夾建立

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

2.2.2圖片選取

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

2.2.3圖片分類

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

2.2.4圖片合并

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

核心代碼如下：

2.2.5分類保存

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

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

核心代碼如下：

2.2.7圖片判斷驗(yàn)證

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

2.2.8圖片刷新

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

3結(jié)語

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

參考文獻(xiàn)：

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

李志云.基于ASP.NET的漢字驗(yàn)證碼的研究與實(shí)現(xiàn)[J].數(shù)字技術(shù)與應(yīng)用，2013（3）：117118.

李德平.一種彩色圖形驗(yàn)證碼在WEB開發(fā)中的應(yīng)用研究[J].清遠(yuǎn)職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2014，7（3）：