[發明專利]一種基于React實現圖片驗證碼生成及刷新的方法

在審

• 申請號: 201810716576.6
• 申請日: 2018-07-03
• 公開（公告）號: CN108959899A
• 公開（公告）日: 2018-12-07
• 發明（設計）人: 王月鳳;李曉燕;唐軍;顧艦靈
• 申請（專利權）人: 四川長虹電器股份有限公司
• 主分類號: G06F21/36
• 分類號: G06F21/36;G06F21/46
• 代理公司: 四川省成都市天策商標專利事務所 51213
• 代理人: 李潔

本發明公開了一種基于React實現圖片驗證碼生成及刷新的方法，采用react框架，通過用戶的操作直接從服務器獲取圖片及驗證碼，不需要把數據存入session，就不會存在數據混亂，時效及無法使用的情況，可以讓用戶在操作時有一定的時間停留，減少用戶的頻繁操作，減少服務器的壓力；提高網站的安全性，同時通過使用react進行圖片的及時刷新，讓用戶有了更好的操作體驗，讓用戶覺得系統正規值得信任，可以有效防止非法用戶進行程序惡意登錄進行破壞，用來防止字典攻擊、機器注冊等問題。

技術領域

本發明涉及web技術領域，特別涉及一種基于React實現圖片驗證碼生成及刷新的方法。

背景技術

隨著互聯網技術的發展，越來越多的用戶使用互聯網產品，當一個網站出現了多用戶，高并發量的情況，很容易使網站崩潰。圖片驗證碼作為一種可以阻止用戶頻繁操作以及非法用戶進行程序惡意登錄進行破壞的一種方式，其運用范圍廣泛，以及操作簡單。

而React是近期非常熱門的一個前端開發框架，其本身作為MVC中的View層可以用來構建UI，也可以以插件的形式應用到Web應用非UI部分的構建中，輕松實現與其他JS框架的整合，比如AngularJS。同時，React通過對虛擬DOM中的微操作來實對現實際DOM的局部更新，提高性能。其組件的模塊化開發提高了代碼的可維護性。單向數據流的特點，讓每個模塊根據數據量自動更新，讓開發者可以只專注于數據部分，改善程序的可預測性。

目前，在登錄方面，很多網站只要輸入正確的登錄名和密碼就能直接登錄上系統，這樣給了一些非法用戶一個可以攻擊的入口，容易使網站崩潰；或者采用短信方式登錄，然而這種方式運行成本高；在請求數據方面，很多網站并沒有給什么請求的限制，以至于可以一個用戶在一段時間頻繁求情數據，會造成系統的高并發量，所以圖片驗證碼能很好地解決這些問題。而隨著react的使用越來越廣泛，用react實現圖片驗證，運行速度快，單向數據流，兼容性好，便于后期維護。

目前很多網站也采用包含驗證字符內容的圖片驗證碼的登陸方式，阻止惡意登陸，他們的具體實現是服務器生成了一個4位字符串,用這4位字符串生成圖片，寫到response中,返回給瀏覽器,并把這個4位字符串存在了當前session中。當瀏覽器提交輸入返回信息后,用提交的字符串和session中的字符串進行對比,完成驗證碼的校驗。但是，對于將response的數據存入session，會有以下3個缺點：

1.遇到用戶的瀏覽器設置為不支持cookies的時候,session也沒有辦法使用.2.session是有一定的有效期。3.由于可以直接使用session,不需要去定義,所以在開發中會用到很多session，每個session變量的含義是什么？這些都變得不很清晰，就會很容易弄混。

發明內容

本發明的目的是克服上述背景技術中不足，提供一種基于React實現圖片驗證碼生成及刷新的方法，采用react框架，通過用戶的操作直接從服務器獲取圖片及驗證碼，不需要把數據存入session，就不會存在數據混亂，時效及無法使用的情況，可以讓用戶在操作時有一定的時間停留，減少用戶的頻繁操作，減少服務器的壓力；提高網站的安全性，同時通過使用react進行圖片的及時刷新，讓用戶有了更好的操作體驗，讓用戶覺得系統正規值得信任，可以有效防止非法用戶進行程序惡意登錄進行破壞，用來防止字典攻擊(暴力猜解)、機器注冊等問題。

為了達到上述的技術效果，本發明采取以下技術方案：

一種基于React實現圖片驗證碼生成及刷新的方法，具體包含以下步驟：

A.當用戶點開登錄頁面的同時，獲取到該用戶的該操作的唯一碼，并將此唯一碼傳給服務器，等待服務器返回圖片地址及數字字母驗證碼；

B.獲取服務器返回的圖片地址及數字字母驗證碼，給圖片地址加上時間戳并將對應的圖片渲染到頁面上；