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. 发送短信增加图片验证码,服务端和输入验证码对比,不一致则拒绝发送。
相关推荐
DaMu1 小时前
Cesium & Three.js 【移动端手游“户外大逃杀”】 还在“画页面的”前端开发小伙伴们,是时候该“在往前走一走”了!我们必须摆脱“画页面的”标签!
前端·gis
非专业程序员1 小时前
一文读懂Font文件
前端
Asort1 小时前
JavaScript 从零开始(七):函数编程入门——从定义到可重用代码的完整指南
前端·javascript
Johnny_FEer1 小时前
什么是 React 中的远程组件?
前端·react.js
我是日安1 小时前
从零到一打造 Vue3 响应式系统 Day 10 - 为何 Effect 会被指数级触发?
前端·vue.js
知了一笑1 小时前
「AI」网站模版,效果如何?
前端·后端·产品
艾小码1 小时前
用了这么久React,你真的搞懂useEffect了吗?
前端·javascript·react.js
知觉1 小时前
实现@imput支持用户输入最多三位整数,最多一位小数的数值
前端
RoyLin1 小时前
TypeScript设计模式:状态模式
前端·后端·typescript
RoyLin1 小时前
TypeScript设计模式:观察者模式
前端·后端·typescript