Vue component LeanCloud implements SMS sending function with graphic verification code-JS Tutorial-php.cn

This article mainly introduces the Vue component LeanCloud to implement the SMS sending function with graphic verification code. Vue is one of the three most widely used front-end frameworks. Its data-driven and componentized features make front-end development faster. convenient. Based on the LeanCloud SMS Bombing and Graphic Verification Code official document, this article develops a simple SMS graphic verification Vue component based on packaging needs. Please refer to this article for specific content details.

There are 150,000 developers using LeanCloud services, including many well-known applications such as Zhihu, Dianqiudi, Aifaner, Lakala, etc. LeanCloud provides one-stop services such as data storage, instant messaging, etc. Based on common user management needs, it provides user account-related services such as email verification, SMS verification, etc.

In order to prevent attackers from maliciously sending massive SMS messages, causing user account losses and affecting normal business, LeanCloud has launched a free graphic verification code service, and you can set "Force the SMS verification service to use graphic verification codes in the application settings" ".

#Vue is one of the three most widely used front-end frameworks. Its data-driven and componentized features make front-end development faster and more convenient.

The customer-initiated SMS sending scenarios provided by LeanCloud mainly include user verification and user password reset. Although there are not many scenarios, it would be time-consuming and labor-intensive if the graphic verification code-related development is carried out separately in each scenario. And it is not flexible enough to adjust some parameters that need to be set uniformly.

The component is named Mobile and is developed based on the Form component and Input component of Element-UI. If the user has special requirements for layout and style, he only needs to change to his own corresponding component, or use native HTML elements and set Just change the style. At the same time, you need to change the $message provided by Element-UI to your own corresponding API call.

Component Behavior

The Mobile component developed is used to send SMS verification codes, so it needs to be able to enter the mobile phone number and graphic verification code, and The action of sending a text message can be triggered. After the action of sending a text message is successfully triggered, the function of sending a text message needs to be disabled and a countdown is performed. The text message can be resent only after the countdown is over.

Therefore, the specific component behavior is mainly the following points:

Provide an input box for entering a mobile phone number. The content of the input box can be input by the user or from Obtained from user information.
Provide an input box for entering the graphic verification code.
The graphic verification code is displayed after the page is loaded.
Provide a button to send a text message. The user clicks the button to send a text message to verify the graphic verification code. If the verification passes, use the mobile phone number and verify it with the graphic verification code. The returned validationToken is used as the option parameter to send text messages.
The text message is sent successfully, disable the button to send the text message, start the timer for countdown, and restore the button to send the text message after the countdown is over.
For the layout of the component using Element-UI's Form component, you need to consider that the labelWidth label width setting of el-form matches the el-form in the parent component.

The behavior of sending text messages must call APIs in different scenarios, so we need to emit the event bound to this button to the parent component, and the parent component decides which API to call.

Component props

Starting from the above component behavior, analyze the props that need to be passed into the component:

represents the mobile phone number attribute. The purpose of sending the SMS verification code is to be ultimately used for subsequent verification or password reset operations. It can be passed in from the outside and can be returned to the parent component after being modified inside the component. Therefore, this property must be two-way bound in the Vue component. There are two types of properties for two-way binding. One is a custom v-model. The property name must be value. The other is a property that can be bound using the .sync modifier. Here, the mobile phone number property is set to the v-model property of the Mobile component. , the attribute name is value.
Property that notifies the Mobile component that the SMS message has been sent. The property is named smsSent and is of type Boolean to disable the button for sending text messages and start the countdown.
The labelWidth attribute of el-form. Set default values and accept data passed from the parent component to keep layout consistent with other elements/components in the parent component.

The props options of the component are as follows:

props: {
 labelWidth: {
 type: String,
 default: &#39;100px&#39;
 },
 value: String,
 smsSent: Boolean
},

Copy after login

In the component template, the considerations related to props mainly include the following three aspects:

The root element of the component is an el-form component, and its label-width attribute is bound to the labelWidth attribute from the parent component, <el-form ref="mobile-form"> .

The mobile phone number input box uses the el-input component and is bound to the value attribute. To achieve two-way binding, v-model cannot be used directly for data binding. Instead, v-model must be bound to Definitely converted to v-bind:value attribute binding and @input event binding, <el-input :value="value" @input="value => $emit('input', value)" > , so that "v-model transparent transmission" can be achieved.

（间接）发送短信按钮的禁用状态。发送短信按钮的禁用状态由倒计时的计数器组件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(&#39;update:smsSent&#39;, 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(&#39;sendSmsCode&#39;, validateToken)
 },
 error: () => {
 this.$message.error(&#39;请输入正确的图形校验码！&#39;)
 }
 })
 })
}

Copy after login

组件使用

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

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

Copy after login

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

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

Copy after login

完整组件代码

<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(&#39;input&#39;, 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 &#39;leancloud-storage&#39;
 export default {
 data () {
 return {
 smsCodeCountingDown: 0
 }
 },
 props: {
 labelWidth: {
 type: String,
 default: &#39;100px&#39;
 },
 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(&#39;update:smsSent&#39;, false)
leancloud  this.$emit(&#39;sendSmsCode&#39;, validateToken)
  },
  error: () => {
  this.$message.error(&#39;请输入正确的图形校验码！&#39;)
  }
 })
 })
 }
 }
</script>
<style scoped>
 .sms-code-form {
 width: 360px;
 }
</style>

Copy after login