短信验证码功能一般是我们经常在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代码片段: