[发明专利]一种基于React实现图片验证码生成及刷新的方法

说明书

本发明公开了一种基于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.获取服务器返回的图片地址及数字字母验证码，给图片地址加上时间戳并将对应的图片渲染到页面上；