Die Vue-Komponente LeanCloud implementiert eine SMS-Versandfunktion mit grafischem Bestätigungscode-js-Tutorial-php.cn

In diesem Artikel wird hauptsächlich die Vue-Komponente LeanCloud zur Implementierung der SMS-Versandfunktion mit grafischem Verifizierungscode vorgestellt. Vue ist eines der drei am häufigsten verwendeten Front-End-Frameworks. Seine datengesteuerten und komponentenbasierten Funktionen beschleunigen die Front-End-Entwicklung. komfortabel. Basierend auf dem offiziellen Dokument LeanCloud SMS Bombing and Graphic Verification Code entwickelt dieser Artikel eine einfache Vue-Komponente für die grafische SMS-Verifizierung basierend auf den Verpackungsanforderungen. Einzelheiten zum spezifischen Inhalt finden Sie in diesem Artikel.

Es gibt 150.000 Entwickler, die LeanCloud-Dienste nutzen, darunter viele bekannte Anwendungen wie Zhihu, Dongqiudi, Aifaner, Lakala usw. LeanCloud bietet One-Stop-Dienste wie Datenspeicherung, Instant Messaging usw. Basierend auf Es erfüllt allgemeine Benutzerverwaltungsanforderungen und bietet benutzerkontobezogene Dienste wie E-Mail-Verifizierung, SMS-Verifizierung usw.

Um Angreifer daran zu hindern, in böswilliger Absicht umfangreiche SMS-Nachrichten zu versenden, was zum Verlust von Benutzerkonten führt und den normalen Geschäftsbetrieb beeinträchtigt, hat LeanCloud einen kostenlosen grafischen Verifizierungscode-Dienst eingeführt, und Sie können „SMS-Verifizierungsdienst zur Verwendung grafischer Verifizierung erzwingen“ einstellen Code“ in den Anwendungseinstellungen „.

Vue ist eines der drei am weitesten verbreiteten Front-End-Frameworks. Seine datengesteuerten und komponentenbasierten Funktionen machen die Front-End-Entwicklung schneller und komfortabler.

Die von LeanCloud bereitgestellten Szenarien für den vom Kunden initiierten SMS-Versand umfassen hauptsächlich die Benutzerüberprüfung und das Zurücksetzen des Benutzerkennworts. Obwohl es nicht viele Szenarien gibt, wird dies der Fall sein, wenn die Entwicklung des grafischen Überprüfungscodes in jedem Szenario separat durchgeführt wird zeitaufwändig und mühsam und es ist nicht flexibel genug, einige Parameter anzupassen, die einheitlich eingestellt werden müssen.

Die Komponente heißt Mobile und basiert auf der Form-Komponente und der Input-Komponente von Element-UI. Wenn der Benutzer besondere Anforderungen an Layout und Stil hat, muss er nur zu seiner eigenen entsprechenden Komponente wechseln, oder Verwenden Sie native HTML-Elemente und legen Sie einfach den Stil fest. Gleichzeitig müssen Sie die von Element-UI bereitgestellte $message in Ihren eigenen entsprechenden API-Aufruf ändern.

Verhalten der Komponente

Die entwickelte Mobile-Komponente wird zum Senden von SMS-Bestätigungscodes verwendet und muss daher in der Lage sein, die Mobiltelefonnummer einzugeben und grafischer Bestätigungscode, und die Aktion zum Senden einer Textnachricht kann ausgelöst werden. Nachdem die Aktion zum Senden einer Textnachricht erfolgreich ausgelöst wurde, muss die Funktion zum Senden einer Textnachricht deaktiviert werden und ein Countdown ausgeführt werden erst nach Ablauf des Countdowns erneut gesendet werden.

Daher ist das spezifische Verhalten der Komponente hauptsächlich wie folgt:

Stellen Sie ein Eingabefeld zur Eingabe einer Mobiltelefonnummer bereit. Der Inhalt des Eingabefelds kann eingegeben werden des Benutzers oder von Benutzerinformationen erhalten.
Bietet ein Eingabefeld zur Eingabe des grafischen Verifizierungscodes.
Der grafische Bestätigungscode wird nach dem Laden der Seite angezeigt.
Bietet eine Schaltfläche zum Senden einer Textnachricht. Der Benutzer klickt auf die Schaltfläche, um eine Textnachricht zu senden, um den grafischen Bestätigungscode zu bestätigen. Wenn die Überprüfung erfolgreich ist, verwenden Sie die Mobiltelefonnummer und bestätigen Sie Es wird mit dem grafischen Bestätigungscode als Optionsparameter zum Senden von Textnachrichten verwendet.
Die Textnachricht wurde erfolgreich gesendet. Deaktivieren Sie die Schaltfläche zum Senden der Textnachricht, starten Sie den Timer für den Countdown und stellen Sie die Schaltfläche zum Senden der Textnachricht wieder her, nachdem der Countdown abgelaufen ist. Die Komponente
verwendet das Layout der Form-Komponente von Element-UI. Sie müssen berücksichtigen, dass die Einstellung labelWidth für die Beschriftungsbreite von el-form mit der el-form in der übergeordneten Komponente übereinstimmt.

Das Verhalten beim Senden von Textnachrichten muss APIs in verschiedenen Szenarien aufrufen. Daher müssen wir das an diese Schaltfläche gebundene Ereignis an die übergeordnete Komponente senden, und die übergeordnete Komponente entscheidet, welche API aufgerufen werden soll .

Komponenten-Requisiten

Analysieren Sie ausgehend vom obigen Komponentenverhalten die Requisiten, die an die Komponente übergeben werden müssen:

Gibt das Mobiltelefonnummernattribut an. Der Zweck des Sendens des SMS-Bestätigungscodes besteht darin, ihn letztendlich für spätere Überprüfungs- oder Kennwortrücksetzungsvorgänge zu verwenden. Er kann von außen übergeben und nach einer Änderung innerhalb der Komponente an die übergeordnete Komponente zurückgegeben werden Zwei-Wege-Bindung in der Vue-Komponente. Eine davon ist ein benutzerdefiniertes V-Modell. Die andere ist eine Eigenschaft, die mit dem .sync-Modifikator gebunden werden kann Hier wird die Eigenschaft „Mobiltelefonnummer“ auf die Eigenschaft „V-Modell“ der Komponente „Mobile“ gesetzt, der Attributname ist „Wert“.
Eigenschaft, die die Mobile-Komponente benachrichtigt, dass die SMS gesendet wurde. Die Eigenschaft heißt smsSent und ist vom Typ Boolean, um die Schaltfläche zum Senden von Textnachrichten zu deaktivieren und den Countdown zu starten.
Das labelWidth-Attribut von el-form. Legen Sie Standardwerte fest und akzeptieren Sie die von der übergeordneten Komponente übergebenen Daten, um ein konsistentes Layout mit anderen Elementen/Komponenten in der übergeordneten Komponente aufrechtzuerhalten.

Die Requisitenoptionen der Komponente lauten wie folgt:

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

Nach dem Login kopieren

In der Komponentenvorlage beziehen sich die Überlegungen auf Requisiten Beinhaltet hauptsächlich die folgenden drei Aspekte: Das Stammelement der

-Komponente ist eine El-Form-Komponente, deren Eigenschaft label-width an die Eigenschaft labelWidth der übergeordneten Komponente <el-form ref="mobile-form"> gebunden ist.

Das Eingabefeld für Mobiltelefonnummern verwendet die el-Eingabekomponente und ist an das Wertattribut gebunden. Um eine bidirektionale Bindung zu erreichen, kann v-Modell nicht direkt für die Datenbindung verwendet werden -model muss gebunden werden Definitiv in v-bind:value-Attributbindung und @input-Ereignisbindung umgewandelt, <el-input :value="value" @input="value => $emit('input', value)"> , damit eine „transparente V-Modell-Übertragung“ erreicht werden kann.

（间接）发送短信按钮的禁用状态。发送短信按钮的禁用状态由倒计时的计数器组件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;)
 }
 })
 })
}

Nach dem Login kopieren

组件使用

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

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

完整组件代码

<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>

Nach dem Login kopieren