一种基于React实现图片验证码生成及刷新的方法技术

本发明专利技术公开了一种基于React实现图片验证码生成及刷新的方法，采用react框架，通过用户的操作直接从服务器获取图片及验证码，不需要把数据存入session，就不会存在数据混乱，时效及无法使用的情况，可以让用户在操作时有一定的时间停留，减少用户的频繁操作，减少服务器的压力；提高网站的安全性，同时通过使用react进行图片的及时刷新，让用户有了更好的操作体验，让用户觉得系统正规值得信任，可以有效防止非法用户进行程序恶意登录进行破坏，用来防止字典攻击、机器注册等问题。

【技术实现步骤摘要】
一种基于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.获取服务器返回的图片地址及数字字母验证码，给图片地址加上时间戳并将对应的图片渲染到页面上；C.当用户输入页面上展示的图片的验证码信息时，获取用户输入的验证码与服务器返回的信息进行比对，若用户输入验证码错误则提示用户并重复步骤C，否则进入步骤D；D.提示用户输入登录密码并验证用户输入登录密码是否正确，若用户输入登录密码错误则重新获取用户的唯一码并返回步骤A，否则，响应用户的登录；E.若用户点击刷新图片，则在图片上加上一个点击事件，同时获取带时间戳的图片地址，并将对应的图片渲染到页面上；本专利技术的基于React实现图片验证码生成及刷新的方法，包括第一次加载图片验证码、点击刷新图片和接口错误时自动刷新图片来获取不同图片地址，可以防止不同用户请求同一验证码的情况出现，主要实现是通过对不同浏览器的不同操作，发送不同的唯一码，则不同用户打开页面的同时，在接受任意输入的组件props的更新生命周期中发送下一次唯一码，并用这个唯一码请求图片验证码的图片地址及相应验证码，灵活得运用了react的生命周期以及时间戳，可以是用户已进入网站就能拿到数据，以及及时的刷新浏览器，清除浏览器的缓存；同时，本专利技术的基于React实现图片验证码生成及刷新的方法中，在验证码数据的对比中，与现有技术的最大的不同在于，很多网站直接将拿到的数据存入浏览器的session中，当用户输入完成后，将用户的输入文本与存入session中的验证码进行对比后，再给用户反馈，而本专利技术的基于React实现图片验证码生成及刷新的方法中，很好地运用了react组件化的特性，以及数据的异步请求，通过接口在redux中拿到的数据，直接在用户输入完成后，点击提交的时候，与this.props的数据信息进行对比，很好地避免了session的数据混乱、时效及部分浏览器可能无法使用的问题。进一步地，所述步骤B及步骤E中将图片渲染到页面上时具体是通过对react生命周期的运用与和redux的结合，在接受任意输入的组件props的更新中获取发起请求前的下一次唯一码及redux中存储的数据，使数据在操作的同时获得，并将对应的图片渲染到页面上，由于是异步请求，所以给用户的直接感受就是运行速度快。进一步地，所述步骤E具体为：E.若用户点击刷新图片，在img标签中加上在接受任意输入的组件props的更新中请求接口后得到的图片地址并添加点击事件并绑定一个功能性组件function，在功能性组件function中请求redux中的图片接口，并在接受任意输入的组件props的周期中判段接口是否请求成功，并在成功时获取图片地址并在图片地址后面加上时间戳，再将对应的图片渲染到页面上，则在img标签下点击即可实现同一地址上的刷新，而不用点击后切换地址。进一步地，所述时间戳是获取当前时间后进行倍数处理得到的，所以每次点击的时间戳是不一样的。本专利技术与现有技术相比，具有以下的有益效果：本专利技术的基于React实现图片验证码生成及刷新的方法，采用react框架，通过用户的操作直接从服务器获取图片及验证码，不需要把数据存入session，因此不会存在数据混乱，时效及无法使用的情况，可以让用户在操作时有一定的时间停留，减少用户的频繁操作，减少服务器的压力，提高网站的安全性，同时通过使用react进行图片的及时刷新，让用户有了更好的操作体验，让用户觉得系统正规值得信任，可以有效防止非法用户进行程序恶意登录进行破坏，用来防止字典攻击(暴力猜解)、机器注册等问题。附图说明图1是本专利技术的基于React实现图片验证码生成及刷新的方法中图片展示验证步骤的流程示意图。图2是本专利技术的基于React实现图片验证码生成及刷新的方法中验证码及图片刷新时的流程示意图。具体实施方式下面结合本专利技术的实施例对本专利技术作进一步的阐述和说明。实施例：现有的验证码，没有解决数据的及时性，很有可能出现一些错误，比如按照图片显示的内容正确的输入验证码，但还是提示错误，重新刷新图片后就可以正确输入了，那是因为数据的拿到不及时以及浏览本文档来自技高网...

【技术保护点】
1.一种基于React实现图片验证码生成及刷新的方法，其特征在于，具体包含以下步骤：A.当用户点开登录页面的同时，获取到该用户的该操作的唯一码，并将此唯一码传给服务器，等待服务器返回图片地址及数字字母验证码；B.获取服务器返回的图片地址及数字字母验证码，给图片地址加上时间戳并将对应的图片渲染到页面上；C.当用户输入页面上展示的图片的验证码信息时，获取用户输入的验证码与服务器返回的信息进行比对，若用户输入验证码错误则提示用户并重复步骤C，否则进入步骤D；D.提示用户输入登录密码并验证用户输入登录密码是否正确，若用户输入登录密码错误则重新获取用户的唯一码并返回步骤A，否则，响应用户的登录；E.若用户点击刷新图片，则在图片上加上一个点击事件，同时获取带时间戳的图片地址，并将对应的图片渲染到页面上。

【技术特征摘要】
1.一种基于React实现图片验证码生成及刷新的方法，其特征在于，具体包含以下步骤：A.当用户点开登录页面的同时，获取到该用户的该操作的唯一码，并将此唯一码传给服务器，等待服务器返回图片地址及数字字母验证码；B.获取服务器返回的图片地址及数字字母验证码，给图片地址加上时间戳并将对应的图片渲染到页面上；C.当用户输入页面上展示的图片的验证码信息时，获取用户输入的验证码与服务器返回的信息进行比对，若用户输入验证码错误则提示用户并重复步骤C，否则进入步骤D；D.提示用户输入登录密码并验证用户输入登录密码是否正确，若用户输入登录密码错误则重新获取用户的唯一码并返回步骤A，否则，响应用户的登录；E.若用户点击刷新图片，则在图片上加上一个点击事件，同时获取带时间戳的图片地址，并将对应的图片渲染到页面上。2.根据权利要求1所述的一种基于React实现图片验证码生成及刷新的方法，其特征在于，所述步骤B及步骤E中将图...

【专利技术属性】
技术研发人员：王月凤，李晓燕，唐军，顾舰灵，
申请(专利权)人：四川长虹电器股份有限公司，
类型：发明
国别省市：四川,51