Vue component development-LeanCloud text message sending function with graphic verification code, vueleancloud

Vue component development-LeanCloud text message sending function with graphic verification code, vueleancloud

0.15 million of developers use the LeanCloud service, including well-known applications such as zhihu, dongqiudi, IFAN er, and lakara. LeanCloud provides data storage and instant messaging ...... And Provides email verification and text message verification based on common user management requirements ...... And other services related to the user account.

LeanCloud provides a free graphic Verification Code Service to prevent attackers from maliciously sending massive text messages, causing loss to users' accounts and affecting normal services, in addition, you can set "Force text message Verification Service to use the graphic verification code" in application settings ".

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

LeanCloud provides customer-initiated text message sending scenarios mainly including user verification and password resetting. Although not many scenarios, if the graphic verification code is developed separately in each scenario, it is time-consuming and labor-consuming, and it is not flexible to adjust some parameters that require unified settings.

The component is named Mobile. It is developed based on the Form component and Input component of Element-UI. If you have special requirements on layout and style, you only need to change it to your own component, you can also use the native HTML Element and set the style. You also need to change the $ message provided by Element-UI to your own API call.

Component Behavior

The developed Mobile component is used to send the SMS verification code. Therefore, you must be able to enter the Mobile phone number and graphic verification code, and trigger the SMS sending action. After the SMS sending action is successfully triggered, you must disable the SMS sending function, and countdown. The text message can be resent only after the countdown is over.

Therefore, the specific component behavior is mainly as follows:

• Provides an input box for entering the mobile phone number. The content of the input box can be entered by the user or obtained from the user information.
• Provides an input box for entering the graphic verification code.
• The graphic verification code is displayed after the page is loaded.
• A button is provided for sending text messages. You can click the send text message button to verify the graphic verification code. If the verification is successful, use the mobile phone number and send the text message using the validataionToken returned by the graphic verification code as the option parameter.
• The text message is sent successfully. The message sending button is disabled, and the timer is enabled for countdown. After the countdown ends, the message sending button is resumed.
• When the component uses the Form component layout of Element-UI, The labelWidth label width setting of el-form must match the el-form in the parent component.

The message sending behavior must call APIs in different scenarios. Therefore, we need to bind the event emit bound to this button to the parent component. The parent component determines which API to call.

Component props

Starting from the above component behavior, analyze the props of the component to be imported:

• Indicates the mobile phone number attribute. The purpose of sending the SMS verification code is to be used for subsequent verification or password reset operations. It can be passed in from outside and can be modified inside the component and returned to the parent component, therefore, this attribute must be bound in two ways. The Vue component has two types of attributes: Custom v-model, attribute name must be value, and attribute name can be used. the property bound to the sync modifier. Here, the Mobile phone number attribute is set to the v-model attribute of the Mobile component, and the property name is value.
• The property of the SMS sent by the notification Mobile component. The property name is smsSent and the type is Boolean. Disable the SMS sending button and start the countdown.
• LabelWidth attribute of el-form. Set the default value and accept the data transmitted from the parent component to maintain the same layout as other elements/components in the parent component.

The props options of the component are as follows:

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

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

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

The mobile phone number input box uses the el-input component to bind to the value attribute. To achieve bidirectional binding, you cannot directly use the v-model for data binding, instead, bind the v-model to the v-bind: value Attribute and bind the @ input event, <el-input :value="value" @input="value => $emit('input', value)"> In this way, you can implement "v-model passthrough ".

(Indirect) the status of the send SMS button. The disabling status of the send SMS button is triggered by the data of the Countdown counter component. when the data is not 0, the send SMS button is disabled. The countdown trigger mode is through the smsSent attribute bound to the parent component. Therefore, you need to watch this attribute in the child component, set the countdown counter when this value is set to true, and perform the countdown through setInterval.

Graphic Verification Code Loading

To display the graphic verification code when a component is loaded, you must call the LeanCloud API in the mounted lifecycle hook of the component.

InAV.Captcha.request()In the callback, bind the verification code input box, graphic verification code elements, and send SMS button elements. The three attributes bound to the parameter object can be string or actual HTMLElement indicating the element id, because we created a Vue component, we directly use the $ refs attribute of the component to specify the actual HTMLElement. Note that, in el-input, the input element is the children [0] of the $ el attribute of ref, while the button element in el-button is the $ el of ref.

The BIND function also needs to pass in the second parameter, which is an object containing the success and error methods. It is used to provide operations for successful and failed graphic verification codes.

Send SMS Verification Code

The SMS verification code is sent in the success method of the second parameter object passed. Here, we first update the smsSent attribute of the component to false. In this way, watcher for the smsSent attribute is triggered only when smsSent is set to true after the SMS is actually sent to the parent component. Note that the smsSent attribute must be bound to the parent component. the sync modifier. Then, customize the sendSmsCode event to the parent component emit, and transparently pass the validateToken parameter in the success callback.

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 ('Enter the correct graphic verification code! ')}})})}

Component usage

First, add the components containing the Mobile component to the component option of the parent component, and then add the mobile component to the template.

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

The method for binding a sendSmsCode event is as follows:

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

Complete component code

<Template> <el-form class = "mobile-form ": label-width = "labelWidth" ref = "mobile-form"> <el-form-item label = "mobile phone number" prop = "mobile"> <el-input: value = "value" @ input = "value => $ emit ('input', value )": maxlength = "11" type = "tel"> </el-input> </el-form-item> <el-form-item label = "graphic verification code"> <el -input type = "text" ref = "captcha"> </el-input>  </el-form-item> <el-form- item> <el-button type = "inf O "ref =" sendSms ": disabled =" smsCodeCountingDown> 0 | value. length! = 11 "> send verification code </el-button> <span v-if =" smsCodeCountingDown> 0 ">{{ smsCodeCountingDown} seconds to resend </span> </ el-form-item> </el-form> </template> <script> import AV from 'leancloud-store' 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. $ em It ('Update: smssent', false) leancloud this. $ emit ('sendsmscode', validateToken)}, error: () =>{ this. $ message. error ('Enter the correct graphic verification code! ') }}) }}</Script> <style scoped>. sms-code-form {width: 360px ;}</style>

Summary

The above section describes the text message sending function of LeanCloud with a graphic verification code developed by the Vue component. I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!