有15萬開發(fā)者使用LeanCloud服務(wù)，其中不乏知乎、懂球帝、愛范兒、拉卡拉等知名應(yīng)用，LeanCloud提供了數(shù)據(jù)存儲(chǔ)、即時(shí)消息……等一站式服務(wù)，并從常用的用戶管理需求出發(fā)，提供了郵箱驗(yàn)證、短信驗(yàn)證……等用戶賬戶相關(guān)的服務(wù)。

為防止攻擊者惡意發(fā)送海量短信造成用戶賬戶損失并影響正常業(yè)務(wù)，LeanCloud推出了免費(fèi)圖形校驗(yàn)碼服務(wù)，并且可以在應(yīng)用設(shè)置中設(shè)置“強(qiáng)制短信驗(yàn)證服務(wù)使用圖形校驗(yàn)碼”。

Vue是目前使用較廣泛的三大前端框架之一，其數(shù)據(jù)驅(qū)動(dòng)及組件化的特性使得前端開發(fā)更為快捷便利。

LeanCloud提供的由客戶發(fā)起的短信發(fā)送場景主要有用戶驗(yàn)證、用戶密碼重置，雖然不是很多場景，但如果每個(gè)場景下都單獨(dú)進(jìn)行圖形校驗(yàn)碼相關(guān)開發(fā)，則費(fèi)時(shí)費(fèi)力且對一些需要統(tǒng)一設(shè)置的參數(shù)調(diào)整不夠靈活。

組件命名為Mobile，基于Element-UI的Form組件和Input組件進(jìn)行開發(fā)，如果用戶對布局和樣式有特殊要求，只需要改為自己相應(yīng)的組件，或者使用原生HTML元素并設(shè)置樣式即可，同時(shí)需要將Element-UI提供的$message改為自己相應(yīng)的API調(diào)用。

組件行為

開發(fā)的Mobile組件用于發(fā)送短信驗(yàn)證碼，因此需要能夠輸入手機(jī)號(hào)碼和圖形校驗(yàn)碼，并可觸發(fā)發(fā)送短信的動(dòng)作，觸發(fā)發(fā)送短信動(dòng)作成功后，需要禁用發(fā)送短信功能，并進(jìn)行倒計(jì)時(shí)，倒計(jì)時(shí)結(jié)束后才能重新發(fā)送短信。

因此具體的組件行為主要是以下幾點(diǎn)：

• 提供一個(gè)輸入手機(jī)號(hào)的輸入框，該輸入框內(nèi)容可以由用戶輸入，也可以從用戶信息中獲取。
• 提供一個(gè)輸入圖形校驗(yàn)碼的輸入框。
• 頁面加載完畢顯示圖形校驗(yàn)碼。
• 提供一個(gè)發(fā)送短信的按鈕，用戶點(diǎn)擊發(fā)送短信的按鈕，校驗(yàn)圖形校驗(yàn)碼，若校驗(yàn)通過，使用手機(jī)號(hào)碼，并以圖形校驗(yàn)碼校驗(yàn)返回的validataionToken作為option參數(shù)發(fā)送短信。
• 短信發(fā)送成功，禁用發(fā)送短信的按鈕，啟動(dòng)定時(shí)器進(jìn)行倒計(jì)時(shí)，倒計(jì)時(shí)結(jié)束后恢復(fù)發(fā)送短信的按鈕。
• 組件使用Element-UI的Form組件的布局，需要考慮el-form的labelWidth標(biāo)簽寬度設(shè)置與父組件中的el-form匹配。

其中發(fā)送短信的行為必須調(diào)用不同場景下的API，因此我們需要將此按鈕綁定的事件emit到父組件，由父組件決定具體調(diào)用哪個(gè)API。

組件props

從上述組件行為出發(fā)，分析需要傳入組件的props：

• 表示手機(jī)號(hào)碼屬性。我們發(fā)送短信驗(yàn)證碼的目的是最終用于后續(xù)的驗(yàn)證或密碼重置操作，可以從外部傳入，并且能夠在組件內(nèi)部修改后返回父組件，因此該屬性必須是雙向綁定的，Vue組件中雙向綁定的屬性有兩種，一是自定義v-model，屬性名必須是value，一是可以使用.sync修飾符綁定的屬性，這里將手機(jī)號(hào)碼屬性設(shè)置為Mobile組件的v-model屬性，屬性名為value。
• 通知Mobile組件短信已發(fā)送的屬性。屬性名為smsSent，類型為Boolean，以禁用發(fā)送短信的按鈕，并啟動(dòng)倒計(jì)時(shí)。
• el-form的labelWidth屬性。設(shè)置默認(rèn)值，并接受來自父組件中傳遞的數(shù)據(jù)以保持與父組件中其他元素/組件布局一致。

組件的props選項(xiàng)如下：

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

組件模板中，與props相關(guān)的考量主要有如下三方面：

組件的根元素是一個(gè)el-form組件，其label-width屬性綁定到來自父組件的labelWidth屬性， <el-form ref="mobile-form"> 。

手機(jī)號(hào)碼輸入框使用el-input組件，綁定到value屬性，要實(shí)現(xiàn)雙向綁定，不能直接使用v-model進(jìn)行數(shù)據(jù)綁定，而是要將v-model綁定轉(zhuǎn)換為v-bind:value屬性綁定和@input事件綁定， <el-input :value="value" @input="value => $emit('input', value)"> ，這樣就可以實(shí)現(xiàn)“v-model透傳”。

（間接）發(fā)送短信按鈕的禁用狀態(tài)。發(fā)送短信按鈕的禁用狀態(tài)由倒計(jì)時(shí)的計(jì)數(shù)器組件data數(shù)據(jù)觸發(fā)，當(dāng)該數(shù)據(jù)不為0時(shí)，發(fā)送短信的按鈕禁用。倒計(jì)時(shí)觸發(fā)方式是通過父組件中綁定的smsSent屬性，因此需要在子組件中watch該屬性，并在該值為真是設(shè)置倒計(jì)時(shí)計(jì)數(shù)器，并通過setInterval進(jìn)行倒計(jì)時(shí)。

圖形校驗(yàn)碼加載

為在組件加載時(shí)顯示圖形校驗(yàn)碼，需要在組件的mounted生命周期鉤子中調(diào)用LeanCloud的API。

在AV.Captcha.request()的回調(diào)中綁定校驗(yàn)碼輸入框、圖形校驗(yàn)碼元素以及發(fā)送短信按鈕元素，綁定參數(shù)對象的三個(gè)屬性均可以是表示元素id的string或?qū)嶋HHTMLElement，由于我們創(chuàng)建的是Vue組件，因此直接使用組件的$refs屬性來指定實(shí)際HTMLElement，需要注意的是，el-input中input元素是ref的$el屬性的children[0]，而el-button中button元素是ref的$el。

綁定函數(shù)還需要傳入第二個(gè)參數(shù)，這是一個(gè)含有success和error方法的對象，用于提供圖形校驗(yàn)碼校驗(yàn)成功和失敗的操作。

發(fā)送短信驗(yàn)證碼

發(fā)送短信驗(yàn)證碼在傳遞的第二個(gè)參數(shù)對象的success方法中進(jìn)行，在這里，我們首先更新組件的smsSent屬性為false，這樣，當(dāng)在父組件中實(shí)際完成短信發(fā)送之后設(shè)置smsSent為true時(shí)才會(huì)觸發(fā)針對smsSent屬性的watcher，同時(shí)，需要注意在父組件中綁定smsSent屬性時(shí)，必須使用.sync修飾符。然后向父組件emit自定義sendSmsCode事件，并將success回調(diào)時(shí)的validateToken參數(shù)透傳過去。

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('請輸入正確的圖形校驗(yàn)碼！')
 }
 })
 })
}

組件使用

首先在父組件的組件選項(xiàng)中添加包含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="手機(jī)號(hào)碼" prop="mobile">
 <el-input :value="value"
  @input="value => $emit('input', value)"
  :maxlength="11"
  type="tel">
 </el-input>
 </el-form-item>
 <el-form-item label="圖形校驗(yàn)碼">
 <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">
 發(fā)送驗(yàn)證碼
 </el-button>
 <span v-if="smsCodeCountingDown > 0">
   {{smsCodeCountingDown}} 秒后重新發(fā)送
  </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('請輸入正確的圖形校驗(yàn)碼！')
  }
 })
 })
 }
 }
</script>
<style scoped>
 .sms-code-form {
 width: 360px;
 }
</style>

總結(jié)

以上所述是小編給大家介紹的Vue組件開發(fā)之LeanCloud帶圖形校驗(yàn)碼的短信發(fā)送功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論