vue+uniapp实现图形验证码功能-插件（附源码）

一、需求背景

vue+uniapp实���图形验证码功能-插件（附源码）

在登录系统时，除了密码登录，还需要提供验证码登录。

涉及验证码，为了安全，一般会加入图形验证码，然后再发短信验证码。

如图：

二、需求分析

为了系统安全，不能是js前端生成图形码，容易在本地就被破解和获取。

一般是前端请求，通过服务后台生成图形码流，返回给前端显示，然后提交业务时，校验图形码。

三、源代码：

1、/ components / captcha.vue

看不清？




 {{btnTitle || '验证'}} 

 ...... ...... 

2、/ pages / login.vue

...... ...... 

源码链接：vue+uniapp实现图形验证码功能-插件（附源码）

源码链接：vue+uniapp实现图形验证码功能-插件（附源码）

源码链接：vue+uniapp实现图形验证码功能-插件（附源码）

三、附：发短信相关安全机制

1. 限制每个手机号的每日发送次数，超过次数则拒发送，提示超过当日次数。
2. 限制每个ip的最大限制次数。超过次数则拒发送，提示超过ip当日发送最大次数。
3. 限制每个手机号发送的时间间隔，比如两分钟，没超过2分钟，不允许发送，提示操作频繁。
4. 发送短信增加图片验证码，服务端和输入验证码对比，不一致则拒绝发送。