집 > 기사 > 웹 프론트엔드 > Vue 구성 요소 LeanCloud는 그래픽 인증 코드로 SMS 전송 기능을 구현합니다.

Vue 구성 요소 LeanCloud는 그래픽 인증 코드로 SMS 전송 기능을 구현합니다.

小云云원래의: 2017-12-23 11:29:391473검색

이 기사에서는 주로 그래픽 인증 코드로 SMS 전송 기능을 구현하는 Vue 구성 요소 LeanCloud를 소개합니다. Vue는 가장 널리 사용되는 세 가지 프런트 엔드 프레임워크 중 하나이며 데이터 기반 및 구성 요소화 기능으로 프런트 엔드 개발을 더 빠르고 편리하게 만듭니다. . LeanCloud SMS Bombing and Graphic Verification Code 공식 문서를 기반으로 이 문서에서는 패키징 요구 사항에 따라 간단한 SMS 그래픽 확인 Vue 구성 요소를 개발합니다. 특정 콘텐츠 세부 정보는 이 문서를 참조하세요.

Zhihu, Dianqiudi, Aifaner, Lakala 등과 같은 잘 알려진 많은 애플리케이션을 포함하여 LeanCloud 서비스를 사용하는 개발자는 150,000명입니다. LeanCloud는 데이터 저장, 인스턴트 메시징 등과 같은 원스톱 서비스를 제공하며 일반적으로 사용되는 기반에서 사용자 관리 요구에 따라 이메일 인증, SMS 인증 등 사용자 계정 관련 서비스를 제공합니다.

공격자가 악의적으로 대량의 문자 메시지를 보내 사용자 계정 손실을 초래하고 정상적인 비즈니스에 영향을 미치는 것을 방지하기 위해 LeanCloud는 무료 그래픽 인증 코드 서비스를 출시했으며, 응용 프로그램 설정.

Vue는 가장 널리 사용되는 세 가지 프런트 엔드 프레임워크 중 하나입니다. 데이터 기반 및 구성 요소화 기능을 통해 프런트 엔드 개발을 더 빠르고 편리하게 만들 수 있습니다.

LeanCloud에서 제공하는 고객 시작 SMS 전송 시나리오에는 주로 사용자 확인 및 사용자 비밀번호 재설정이 포함됩니다. 시나리오는 많지 않지만 각 시나리오마다 그래픽 인증 코드 개발을 수행하면 시간이 많이 걸리고 시간이 많이 걸립니다. 노동 집약적이며 일부 통합 매개변수 조정이 필요하므로 유연성이 충분하지 않습니다.

구성 요소 이름은 Mobile이며 Element-UI의 Form 구성 요소 및 입력 구성 요소를 기반으로 개발되었습니다. 사용자가 레이아웃 및 스타일에 대한 특별한 요구 사항이 있는 경우 해당 구성 요소를 해당 구성 요소로 변경하거나 기본 HTML을 사용하기만 하면 됩니다. 동시에 Element-UI에서 제공하는 $message를 해당 API 호출로 변경해야 합니다.

구성 요소 동작

개발된 모바일 구성 요소는 SMS 인증 코드를 보내는 데 사용되므로 휴대폰 번호와 그래픽 인증 코드를 입력할 수 있어야 하며 SMS 전송 작업을 실행할 수 있어야 합니다. SMS 전송 작업이 성공적으로 실행되면 문자 메시지 보내기 기능을 비활성화해야 하며 카운트다운이 끝난 후에만 문자 메시지를 다시 보낼 수 있습니다.

그래서 구체적인 구성 요소 동작은 주로 다음과 같습니다.

휴대폰 번호를 입력할 수 있는 입력 상자를 제공합니다. 입력 상자의 내용은 사용자가 입력하거나 사용자 정보에서 얻을 수 있습니다.
그래픽 인증 코드를 입력할 수 있는 입력 상자를 제공합니다.
페이지가 로드된 후 그래픽 인증 코드가 표시됩니다.
문자 메시지를 보낼 수 있는 버튼을 제공합니다. 사용자는 버튼을 클릭하여 그래픽 인증 코드를 확인하기 위해 문자 메시지를 보냅니다. 인증에 성공하면 휴대폰 번호를 사용하고 그래픽 인증 코드에서 반환된 유효성 검사 토큰을 사용합니다. 문자 메시지를 보내기 위한 옵션 매개변수로 확인합니다.
문자 메시지가 성공적으로 전송되었습니다. 문자 메시지 보내기 버튼을 비활성화하고, 카운트다운 타이머를 시작하고, 카운트다운이 끝난 후 문자 메시지 보내기 버튼을 복원합니다.
Element-UI의 Form 컴포넌트를 사용한 컴포넌트 레이아웃의 경우 el-form의 labelWidth 레이블 너비 설정이 상위 컴포넌트의 el-form과 일치하는지 고려해야 합니다.

문자 메시지를 보내는 동작은 다양한 시나리오에서 API를 호출해야 하므로 이 버튼에 바인딩된 이벤트를 상위 구성 요소로 내보내야 하며 상위 구성 요소는 호출할 API를 결정합니다.

Component props

위의 컴포넌트 동작을 시작으로 컴포넌트에 전달해야 하는 props를 분석합니다.

은 휴대폰 번호 속성을 나타냅니다. SMS 인증 코드를 전송하는 목적은 궁극적으로 후속 인증 또는 비밀번호 재설정 작업에 사용되는 것입니다. 외부에서 전달될 수도 있고 컴포넌트 내부에서 수정된 후 상위 컴포넌트로 반환될 수도 있습니다. Vue 구성 요소에는 두 가지 유형의 속성이 있습니다. 하나는 사용자 정의 v-model이며 다른 하나는 .sync 수정자를 사용하여 바인딩할 수 있는 속성입니다. 여기서 휴대폰 번호 속성은 Mobile 컴포넌트의 v-model 속성으로 설정되며 속성 이름은 value입니다.
SMS가 전송되었음을 모바일 구성요소에 알리는 속성입니다. 속성 이름은 smsSent이고 부울 유형으로 문자 메시지 보내기 버튼을 비활성화하고 카운트다운을 시작합니다.
el-form의 labelWidth 속성. 기본값을 설정하고 상위 구성요소에서 전달된 데이터를 허용하여 상위 구성요소의 다른 요소/구성요소와 일관된 레이아웃을 유지합니다.

컴포넌트의 props 옵션은 다음과 같습니다.

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

컴포넌트 템플릿에서 props와 관련된 고려 사항은 주로 다음 세 가지 측면을 포함합니다.

컴포넌트의 루트 요소는 el-form입니다. 해당 label-width 속성은 상위 구성 요소인 de85666017b7bbc8d71a95b46c84d6c6의 labelWidth 속성에 바인딩됩니다. <code>51807cfab717eb2a5b31543f7171ee33 。

手机号码输入框使用el-input组件，绑定到value属性，要实现双向绑定，不能直接使用v-model进行数据绑定，而是要将v-model绑定转换为v-bind:value属性绑定和@input事件绑定， b7f1c9e4a173ad227fdd90e433b74629 $emit('input', value)">

🎜휴대폰 번호 입력 상자는 el-input 구성 요소를 사용하며 value 속성에 바인딩됩니다. 양방향 바인딩을 달성하려면 v-model을 데이터 바인딩에 직접 사용할 수 없지만 v-model 바인딩을 다음으로 변환해야 합니다. v-bind.:value 속성 바인딩 및 @input 이벤트 바인딩,

 f216324e3c46e42bddff0f7cfe498765 $emit('input', value)"> code> 를 사용하면 "v-모델 투명 전송"이 가능해집니다. 🎜<p>（间接）发送短信按钮的禁用状态。发送短信按钮的禁用状态由倒计时的计数器组件data数据触发，当该数据不为0时，发送短信的按钮禁用。倒计时触发方式是通过父组件中绑定的smsSent属性，因此需要在子组件中watch该属性，并在该值为真是设置倒计时计数器，并通过setInterval进行倒计时。</p>
<p><span style="color: #ff0000"><strong>图形校验码加载</strong></span></p>
<p>为在组件加载时显示图形校验码，需要在组件的mounted生命周期钩子中调用LeanCloud的API。</p>
<p>在<code>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;)
 }
 })
 })
}

组件使用

首先在父组件的组件选项中添加包含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(&#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>

Vue 구성 요소 LeanCloud는 그래픽 인증 코드로 SMS 전송 기능을 구현합니다.

관련 기사