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

一、需求背景

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

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

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

如图:

二、需求分析

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

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

三、源代码:

1、/ components / captcha.vue

html 复制代码
<uni-popup ref="popup" type="center">
	<div class="popup-content">
		<image style="width: 130px; height: 50px; background-color: #eeeeee;" :src="captchaBase64" />
		<div style="text-align: right;font-size: 12px;">
			<a href="javascript:void(0);" title="点我换一个" @click="queryList()" class="tar cup c43a3c1">看不清?</a>
		</div>
		<div style="margin-top: 10px;">
			<uni-easyinput v-model="formData.captcha" placeholder="请输入图形码" @keyup.enter.native="submit()" autocomplete="off" clear focus />
		</div>
	</div>
	<div class="popup-footer">
		<button type="primary" class="btn-submit" @click="submit" :disabled="formData.captcha?false:true">{{btnTitle || '验证'}}</button>
	</div>
	<div class="popup-close" @click="close">
		<uni-icons type="close" size="25" color="#bbb"></uni-icons>
	</div>
</uni-popup>
......
......

2、/ pages / login.vue

html 复制代码
......
<captcha ref="captcha" title="请输入图片验证码" :btn-title="'发送短信验证码'" type="getLoginSms" :req-data="captchaData" @success="captchaSuccess()"></captcha>
......

源码链接:vue+uniapp实现图形验证码功能-插件(附源码)

源码链接:vue+uniapp实现图形验证码功能-插件(附源码)

源码链接:vue+uniapp实现图形验证码功能-插件(附源码)

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

  1. 限制每个手机号的每日发送次数,超过次数则拒发送,提示超过当日次数。
  2. 限制每个ip的最大限制次数。超过次数则拒发送,提示超过ip当日发送最大次数。
  3. 限制每个手机号发送的时间间隔,比如两分钟,没超过2分钟,不允许发送,提示操作频繁。
  4. 发送短信增加图片验证码,服务端和输入验证码对比,不一致则拒绝发送。
相关推荐
阿杆15 分钟前
文心快码 3.5S 发布!实测插件开发,Architect 模式令人惊艳
前端·后端·文心快码
文心快码BaiduComate16 分钟前
我用Comate搭建「公园找搭子」神器,再也不孤单啦~
前端·后端·微信小程序
全栈技术负责人27 分钟前
前端全链路质量监控体系建设与实践分享
前端·系统架构·前端框架
sorryhc42 分钟前
0~1构建一个mini blot.new(无AI版本)
前端·前端框架·openai
南方者1 小时前
文心文心,其利锻心!这个古风射覆,它帅到我了!文心快码 3.5S
前端·敏捷开发·文心快码
永日456701 小时前
学习日记-CSS-day53-9.11
前端·css·学习
云枫晖1 小时前
JS核心知识-this的指向
前端·javascript
magnet1 小时前
用img标签渲染的svg VS 直接使用svg标签,有什么区别?
前端·html
ze_juejin1 小时前
createComponent的environmentInjector详解
前端