Vue组件开发之LeanCloud带图形校验码的短信发送功能


Posted in Javascript onNovember 07, 2017

有15万开发者使用LeanCloud服务,其中不乏知乎、懂球帝、爱范儿、拉卡拉等知名应用,LeanCloud提供了数据存储、即时消息……等一站式服务,并从常用的用户管理需求出发,提供了邮箱验证、短信验证……等用户账户相关的服务。

为防止攻击者恶意发送海量短信造成用户账户损失并影响正常业务,LeanCloud推出了免费图形校验码服务,并且可以在应用设置中设置“强制短信验证服务使用图形校验码”。

Vue组件开发之LeanCloud带图形校验码的短信发送功能

Vue是目前使用较广泛的三大前端框架之一,其数据驱动及组件化的特性使得前端开发更为快捷便利。

LeanCloud提供的由客户发起的短信发送场景主要有用户验证、用户密码重置,虽然不是很多场景,但如果每个场景下都单独进行图形校验码相关开发,则费时费力且对一些需要统一设置的参数调整不够灵活。

组件命名为Mobile,基于Element-UI的Form组件和Input组件进行开发,如果用户对布局和样式有特殊要求,只需要改为自己相应的组件,或者使用原生HTML元素并设置样式即可,同时需要将Element-UI提供的$message改为自己相应的API调用。

组件行为

开发的Mobile组件用于发送短信验证码,因此需要能够输入手机号码和图形校验码,并可触发发送短信的动作,触发发送短信动作成功后,需要禁用发送短信功能,并进行倒计时,倒计时结束后才能重新发送短信。

因此具体的组件行为主要是以下几点:

  • 提供一个输入手机号的输入框,该输入框内容可以由用户输入,也可以从用户信息中获取。
  • 提供一个输入图形校验码的输入框。
  • 页面加载完毕显示图形校验码。
  • 提供一个发送短信的按钮,用户点击发送短信的按钮,校验图形校验码,若校验通过,使用手机号码,并以图形校验码校验返回的validataionToken作为option参数发送短信。
  • 短信发送成功,禁用发送短信的按钮,启动定时器进行倒计时,倒计时结束后恢复发送短信的按钮。
  • 组件使用Element-UI的Form组件的布局,需要考虑el-form的labelWidth标签宽度设置与父组件中的el-form匹配。

其中发送短信的行为必须调用不同场景下的API,因此我们需要将此按钮绑定的事件emit到父组件,由父组件决定具体调用哪个API。

组件props

从上述组件行为出发,分析需要传入组件的props:

  • 表示手机号码属性。我们发送短信验证码的目的是最终用于后续的验证或密码重置操作,可以从外部传入,并且能够在组件内部修改后返回父组件,因此该属性必须是双向绑定的,Vue组件中双向绑定的属性有两种,一是自定义v-model,属性名必须是value,一是可以使用.sync修饰符绑定的属性,这里将手机号码属性设置为Mobile组件的v-model属性,属性名为value。
  • 通知Mobile组件短信已发送的属性。属性名为smsSent,类型为Boolean,以禁用发送短信的按钮,并启动倒计时。
  • el-form的labelWidth属性。设置默认值,并接受来自父组件中传递的数据以保持与父组件中其他元素/组件布局一致。

组件的props选项如下:

props: {
 labelWidth: {
 type: String,
 default: '100px'
 },
 value: String,
 smsSent: Boolean
},

组件模板中,与props相关的考量主要有如下三方面:

组件的根元素是一个el-form组件,其label-width属性绑定到来自父组件的labelWidth属性, <el-form ref="mobile-form">

手机号码输入框使用el-input组件,绑定到value属性,要实现双向绑定,不能直接使用v-model进行数据绑定,而是要将v-model绑定转换为v-bind:value属性绑定和@input事件绑定, <el-input :value="value" @input="value => $emit('input', value)"> ,这样就可以实现“v-model透传”。

(间接)发送短信按钮的禁用状态。发送短信按钮的禁用状态由倒计时的计数器组件data数据触发,当该数据不为0时,发送短信的按钮禁用。倒计时触发方式是通过父组件中绑定的smsSent属性,因此需要在子组件中watch该属性,并在该值为真是设置倒计时计数器,并通过setInterval进行倒计时。

图形校验码加载

为在组件加载时显示图形校验码,需要在组件的mounted生命周期钩子中调用LeanCloud的API。

AV.Captcha.request()的回调中绑定校验码输入框、图形校验码元素以及发送短信按钮元素,绑定参数对象的三个属性均可以是表示元素id的string或实际HTMLElement,由于我们创建的是Vue组件,因此直接使用组件的$refs属性来指定实际HTMLElement,需要注意的是,el-input中input元素是ref的$el属性的children[0],而el-button中button元素是ref的$el。

绑定函数还需要传入第二个参数,这是一个含有success和error方法的对象,用于提供图形校验码校验成功和失败的操作。

发送短信验证码

发送短信验证码在传递的第二个参数对象的success方法中进行,在这里,我们首先更新组件的smsSent属性为false,这样,当在父组件中实际完成短信发送之后设置smsSent为true时才会触发针对smsSent属性的watcher,同时,需要注意在父组件中绑定smsSent属性时,必须使用.sync修饰符。然后向父组件emit自定义sendSmsCode事件,并将success回调时的validateToken参数透传过去。

mounted () {
 this.$emit('update:smsSent', false)
 AV.Captcha.request().then((captcha) => {
 captcha.bind({
 textInput: this.$refs.captcha.$el.children[0],
 image: this.$refs.captchaImage,
 verifyButton: this.$refs.sendSms.$el
 }, {
 success: (validateToken) => {
 this.$emit('sendSmsCode', validateToken)
 },
 error: () => {
 this.$message.error('请输入正确的图形校验码!')
 }
 })
 })
}

组件使用

首先在父组件的组件选项中添加包含Mobile组件的components,然后在模板中添加mobile组件。

<mobile v-model="mobileForm.mobile"
 :sms-sent.sync="mobileForm.smsSent"
 @sendSmsCode="sendSms"></mobile>

其中绑定sendSmsCode事件的方法如下:

sendSms (validateToken) {
 this.sendSmsCode({
 mobile: this.mobileForm.mobile,
 validateToken
 }).then(() => {
 this.mobileForm.smsSent = true
 })
},

完整组件代码

<template>
 <el-form class="mobile-form"
  :label-width="labelWidth"
  ref="mobile-form">
 <el-form-item label="手机号码" prop="mobile">
 <el-input :value="value"
  @input="value => $emit('input', value)"
  :maxlength="11"
  type="tel">
 </el-input>
 </el-form-item>
 <el-form-item label="图形校验码">
 <el-input type="text" ref="captcha"></el-input>
 <img ref="captchaImage">
 </el-form-item>
 <el-form-item>
 <el-button type="info"
   ref="sendSms"
   :disabled="smsCodeCountingDown > 0 ||
    value.length !== 11">
 发送验证码
 </el-button>
 <span v-if="smsCodeCountingDown > 0">
   {{smsCodeCountingDown}} 秒后重新发送
  </span>
 </el-form-item>
 </el-form>
</template>
<script>
 import AV from 'leancloud-storage'
 export default {
 data () {
 return {
 smsCodeCountingDown: 0
 }
 },
 props: {
 labelWidth: {
 type: String,
 default: '100px'
 },
 value: String,
 smsSent: Boolean
 },
 watch: {
 smsSent (val) {
 if (val) {
  this.smsCodeCountingDown = 30
  let countingDownInterval = setInterval(() => {
  this.smsCodeCountingDown--
  if (this.smsCodeCountingDown === 0) {
  clearInterval(countingDownInterval)
  }
  }, 1000)
 }
 }
 },
 mounted () {
 AV.Captcha.request().then((captcha) => {
 captcha.bind({
  textInput: this.$refs.captcha.$el.children[0],
  image: this.$refs.captchaImage,
  verifyButton: this.$refs.sendSms.$el
 }, {
  success: (validateToken) => {
  this.$emit('update:smsSent', false)
leancloud  this.$emit('sendSmsCode', validateToken)
  },
  error: () => {
  this.$message.error('请输入正确的图形校验码!')
  }
 })
 })
 }
 }
</script>
<style scoped>
 .sms-code-form {
 width: 360px;
 }
</style>

总结

以上所述是小编给大家介绍的Vue组件开发之LeanCloud带图形校验码的短信发送功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
Feb 27 Javascript
jquery 利用show和hidden实现级联菜单示例代码
Aug 09 Javascript
JavaScript改变CSS样式的方法汇总
May 07 Javascript
JS实现的论坛Ajax打分效果完整实例
Oct 31 Javascript
温习Javascript基础语法之词法结构
May 31 Javascript
jQuery弹出层插件popShow(改进版)用法示例
Jan 23 Javascript
jQuery实用密码强度检测
Mar 02 Javascript
bootstrap多层模态框滚动条消失的问题
Jul 21 Javascript
浅析JavaScript异步代码优化
Mar 18 Javascript
Node.js API详解之 assert模块用法实例分析
May 26 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
Jun 03 Javascript
Echarts如何重新渲染实例详解
May 30 Javascript
EasyUI实现下拉框多选功能
Nov 07 #Javascript
ES6中字符串string常用的新增方法小结
Nov 07 #Javascript
ES6中数组array新增方法实例总结
Nov 07 #Javascript
vue组件父子间通信详解(三)
Nov 07 #Javascript
浅谈ES6 模板字符串的具体使用方法
Nov 07 #Javascript
微信小程序上传图片到服务器实例代码
Nov 07 #Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
Nov 07 #Javascript
You might like
PHP array_push 数组函数
2009/12/26 PHP
jQuery代码优化之基本事件
2011/11/01 Javascript
javascript中onclick(this)用法介绍
2013/04/19 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
2014/03/21 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
2014/06/06 Javascript
常用的JS验证和函数汇总
2014/12/23 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
2015/01/07 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
JS判断图片是否加载完成方法汇总(最新版)
2016/05/13 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
vue简单练习 桌面时钟的实现代码实例
2019/09/19 Javascript
Angular处理未可知异常错误的方法详解
2021/01/17 Javascript
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
python 性能优化方法小结
2017/03/31 Python
浅谈Python处理PDF的方法
2017/11/10 Python
python随机取list中的元素方法
2018/04/08 Python
python 集合 并集、交集 Series list set 转换的实例
2018/05/29 Python
python读取TXT每行,并存到LIST中的方法
2018/10/26 Python
Python中使用遍历在列表中添加字典遇到的坑
2019/02/27 Python
Python实现的排列组合、破解密码算法示例
2019/04/12 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
python二维键值数组生成转json的例子
2019/12/06 Python
解决matplotlib.pyplot在Jupyter notebook中不显示图像问题
2020/04/22 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
Java爬虫技术框架之Heritrix框架详解
2020/07/22 Python
泰国王权免税店官方网站:KingPower
2019/03/11 全球购物
荷兰音乐会和音乐剧门票订购网站:Topticketshop
2019/08/27 全球购物
华美博弈C/VC工程师笔试试题
2012/07/16 面试题
个人自我鉴定怎么写
2013/10/28 职场文书
信息技术教学反思
2014/02/12 职场文书
感谢信的格式
2015/01/21 职场文书
有关西游记的读书笔记
2015/06/25 职场文书
2015小学教育教学工作总结
2015/07/21 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
你有一份《诚信考试承诺书》待领取
2019/11/13 职场文书
给numpy.array增加维度的超简单方法
2021/06/02 Python