今天我们来继续完善上一篇的 注册教程,在现实注册过程中,手机短信验证码是必不可少的。那么怎么实现呢?
首先我们需要在短信平台开通短信服务功能,大的平台主要有阿里云、腾讯云、聚合数据等( 一般需要拿到短信模板 ID、APPID、发送链接即可 ),一般费用在每条 0.04 元左右,比较大的平台每天需要发送几千、甚至上万条,可见每天总的短信验证码也是有一定的成本的,这还排除了存在恶意刷验证码情况。因此在后台编写验证码部分代码时,一定要加上发送的数量限制,比如:每个手机号每天最多发送条数(比如最多 6 条)、每个 IP 地址每天最多发送条数等,这样即使是遇到恶意刷验证码的情况也可以保证短信数量不至于过多。
这篇文章是按照生产环境来写的,代码部分包含了真实的验证码发送部分,只要配置好相应的短信平台参数就可以实现发送验证码。这篇文章作为学习研究用,特意将验证码 alert() 出来。
效果图:
主要部分:
1> 添加发送验证码的条数限制,每个 IP 每天最多发送 10 条、每个手机号每天最多发送6条,
2> 验证码用 Math.random() 、Math.floor() 生成随机六位数,
3> 用到 koa-session 将生成的验证码存入 session,等到用户点击注册按钮时,将用户输入的验证码与生成的验证码进行比对,
一、前端部分
1.1 向 Register.vue 中加入 验证码输入框 :
1.2 添加 sendSMSCode 方法:
1.3 修改 srcapiindex.js ,添加方法,将手机号发送到后端:
二、后端部分
2.1 首先,我们来安装几个需要用到的插件:
2.1.1 silly-datetime
很便捷的设置时间格式插件,安装好以后,我们在 mall-server 下,新建 tools.js ,用于将用到的工具都封装在这里:
2.1.2 koa-session
安装完毕后,需要在 app.js 中引入:
2.1.3 request:用于简化请求写法
2.1.4 querystring: 用于生成序列化请求路径,用法举例:
2.2 建立手机短信验证码模型,用于验证码发送条数限制统计:
2.3 添加接收前端 post 路由,接收 telnumber:
2.4 添加 dispatchSMSCode,我们将发送 API 封装在 sendSMSCode() 方法里,在下一步介绍,研究用不调用 API ,只将验证码 return 给前端。
2.5 我们将发送 API 封装在 sendSMSCode() 方法里,该方法位于 mall-serversms.js 里。
其中根据你申请的 API 文档,可以找到每一种返回状态码对应的说明,并根据状态码设定不同的返回状态解释。
好了,到这里我们就完整的实现了发送短信验证码功能,有了它,你的注册页面看起来就会有一种高达上的感觉,并且在验证用户手机号的真实性也是很有意义的。
到此这篇发送短信验证码要钱吗?(发送手机短信验证码收费吗)的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章,希望大家都能在编程的领域有一番成就!
版权声明:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符,请将相关资料发送至xkadmin@xkablog.com进行投诉反馈,一经查实,立即处理!
转载请注明出处,原文链接:https://www.xkablog.com/bcyy/18775.html