NO.4 [移动开发]基于WEUI的短信验证码开发中需要注意的问题

短信验证码功能一般是我们经常在PC网站,移动网站遇到的一个功能,简单的说来是由我们的应用,在通过短信平台API返回结果到我们的应用,完成整个短信验证码获取的过程。

其实这个功能没有什么值得可以提的,但是有一点我们经常容易忽略的地方,我想提一下:

什么是短信验证码?

当我们填写手机号,获取验证码的一瞬间发生了什么过程?

1 我们用户的手机浏览器,或者PC浏览器访问到了应用的网页,或者WEBAPP的URL地址

2 服务端将基于html协议的二进制数据,通过运营商的移动网络,或者宽带 tcp/ip层传输,到用户的浏览器

3 用户浏览器根据标准的浏览器W3C标准进行解析和编译,它有一套自己的解释和编译规则

4经过浏览器解析,我们看到了页面,并输入手机号,点击获取验证码过程

5 点击按钮,程序自动链接第三方短信中心的程序API接口,将指令发送给第三方短信运营商,第三方运营商获取到需要接收的电话号码,和内容指令,然后将内容组合发送到需要接收的终端,同时返回状态给我们的应用

6 我们的应用服务器记录到状态,并将状态返回给用户,比如发送短信成功,或者失败等状态

7 用户输入获取的短信验证码,提交后台进行匹配;

至此一个简单的流程基本描述完成。

关于WEUI界面

先说下WEUI界面,WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI 库。

WeUI 是一套同微信原生视觉体验一致的基础样式库,为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素

采用WEIUI开发的界面,基本满足了和微信一致的界面风格和特性,非常简洁和标准化,从用户体验度来说是非常友好的;这里我就不多介绍了,具体可以查看 http://weui.github.io/weui/ 

先看下界面效果:

  

在发送验证码的时候?我们需要注意的问题是什么呢?

手机发送验证码的时候,在前端是有JS限制,不能重复提交,但后台部分遗忘了对数据包重复提交的限制问题,这样会导致,如果有刷短信验证码的规则程序,同一台电脑,可以不断用新的手机号,获取验证码,导致短信充值很快消耗完;

如何解决?

a 短信程序需要记录用户第一次访问的时间,和IP地址,并设定我们的禁止刷新的时间间隔参数

b 在第二次访问的时候,算出两次访问应用的时间差

c 每一次访问的时候,计算我们的时间差 和 我们设置的时间间隔的关系,记录每次新访问的IP记录 ,同时做比对,有两种情况 1 如果我们的访问时间间隔,在限制的时间间隔之外,我们重置所有的参数,记录新的IP 和 新的访问时间段,2 如果在时间间隔内,我们判断用户的IP地址是否为同一个IP地址,如果相同,我们则结束程序,停止发送短信。做一个简单的判断,可以防范短信验证码受到的被刷现象;

部分PHP代码片段: