sms-verify 短信验证

使用手机及验证码进行身份验证

提供了默认形态界面的完整功能，也允许只引用底层实现 API 适配自定义短信验证界面场景

安装

手机短信验证组件 SMSVerify 维护于 @plugins/business 组件库

npm i -S @plugins/business

手机短信验证组件包含以下模块

• SMSVerify 核心功能 API，用于在应用场景中通过 mixins 方式混入使用，适用于操作界面，交互过程都需要自行定制的场景
• SMSVerification 带有界面（应用 Bootstrap 界面样式）的完整手机短信验证功能的组件

带有界面的完整功能（SMSVerification）

组件通过 v-model 指令绑定验证结果值

设置选项

通过设置 prop 定制界面功能

doSend 必填

• 类型：function

执行通过手机号码获取手机短信验证码的数据请求，该函数的返回类型须为 Promise 类型

doVerify 必填

• 类型：function

执行通过手机号码与短信验证码验证用户是否允许登录，该函数的返回类型须为 Promise 类型

mobilePhone

• 类型：string

默认情况下，手机号码输入框中留空，用户手动填写

部分业务场景下，可通过该 prop 手动指定手机号码，通常可配合 disabledPhone 禁止手机号码输入，以达到自动设置的效果

mark

• 类型：boolean
• 默认：false

是否要屏蔽显示手机号码中的部分数字

confirmBtn

• 类型：boolean
• 默认：true

是否显示确认按钮，需要自行实现确认按钮功能时，可设置不显示

disabledPhone

• 类型：boolean
• 默认：false

手机号码禁止输入

okBtnText

• 类型：string
• 默认：'确定'

定制确定按钮显示文本

SMSVerification 样例

<template>
  <sms
    ok-btn-text="登录管理平台"
    v-model="verify"
    :do-send="doSend"
    :do-verify="doVerify"
  ></sms>
</template>

<script>
import { SMSVerification } from '@plugins/business'
import { smsCode, smsLogin } from '@api/auth'

export default {
  components: {
    sms: SMSVerification
  },
  data () {
    return {
      verify: false
    }
  },
  watch: {
    verify (val) {
      this.$emit('execute', val)
    }
  },
  methods: {
    doSend (data) {
      return smsCode(data)
    },
    doVerify (data) {
      return smsLogin(data)
    }
  }
}
</script>

核心模块 API （SMSVerify）

在应用场景中通过 mixins 方式混入使用

功能模型

模型的基础数据属性、函数

{
  data () {
    // 定义的基础数据属性，可按需在应用界面覆盖
    return {
      // 需要预设手机号码时，可在应用页面中定义同名变量覆盖该值
      phone: '',
      // 手机短信验证码
      code: '',
      // 获得手机验证码按钮文本
      sendCodeBtnText: '获取验证码',
      // 是否处于已获取验证码且进入倒计时状态，可用于控制获取验证码按钮是否可点击
      smsVerifyLoading: false,
      // 手机号码是否使用符号覆盖部分位数，以隐藏完整号码内容
      markedPhoneNumber: false,
      // 获取验证码按钮初始显示文本
      defaultText: '获取验证码',
      // 至少获得一次验证码后按钮显示的文本
      reGetText: '重新获取验证码',
      // 获取验证码的时间间隔，单位：秒
      reSendCountDown: 60
    }
  },
  computed: {
    /**
     * 手机号码与验证码是否已填写，仅验证是否填写
     *
     * @returns {boolean}
     * 返回值取反，通常用于 disabled 属性
     * true：未填写完整
     * false：填写完整
     */
    smsVerifyConfirm () {},
    /**
     * 手机号码
     *
     * phone 变量预设值且 markedPhoneNumber 值为 true，该计算属性将返回带掩码的手机号码
     * markedPhoneNumber 值为 false 时返回原手机号码
     * @returns {string}
     */
    phoneNumber () {}
  },
  methods: {
    // 获取手机验证码并在获取成功后，进行倒计时，防止重复发送，要
    // 求在应用页面中必须定义名为 doSend 的函数，用于适配数据接口调用
    sendSMS () {},
    /**
     * 手机号与验证码检查，要求在应用页面中必须定义名为 doVerify 的函
     * 数，用于适配数据接口调用
     * @returns {Promise}
     */
    verifyPhoneAndCode () {},
    /**
     * 检查手机号码格式
     * @returns {boolean}
     */
    checkPhone () {},
    /**
     * 检查验证码是否填写
     * @returns {boolean}
     */
    checkCode () {},
    // 重置计时器及状态
    clearTimer () {}
  }
}

SMSVerify 应用样例

样例中应用了 bootstrap 样式风格

<template>
  <div>
    手机号码
    <div class="input-group">
      <!--
      预设手机号码，不允许手动输入的场景
      markedPhoneNumber 设置为 true 时，建议输入框作如下设置
      效果：禁止输入、应用自动处理掩码的手机号码的计算属性
      -->
      <input
        type="text"
        class="form-control"
        :value="phoneNumber"
        :maxlength="11"
        :disabled="true"
      >
      <!--
      常规手动输入手机号码的场景
      markedPhoneNumber 设置为 false 的常规场景
      使用 v-model 指令绑定核心模块中的 phone 数据属性
      应用核心模块中的 smsVerifyLoading 数据属性，控制手机号是否为可输入状态
      设置键盘回车键事件为快速触发获取手机验证码
      -->
      <input
        type="text"
        class="form-control"
        v-model="phone"
        :maxlength="11"
        :disabled="smsVerifyLoading"
        @keypress.enter="sendSMS"
      >
      <div class="input-group-append">
        <!--
        应用核心模块中的 smsVerifyLoading 数据属性，控制按钮是否可点击
        应用核心模块中的 sendCodeBtnText 数据属性，它将会根本不同的状态显示相关内容
        点击事件应用核心模块中的 sendSMS 函数，获取手机验证码
        -->
        <button
          type="button"
          class="btn btn-outline-primary"
          :disabled="smsVerifyLoading"
          @click="sendSMS"
          v-text="sendCodeBtnText"
        ></button>
      </div>
    </div>
    验证码
    <!-- 使用 v-model 指令绑定核心模块中的 code 数据属性 -->
    <input
      type="text"
      class="form-control"
      :maxlength="6"
      v-model="code"
    >
    <!--
    应用核心模块中的 smsVerifyConfirm 计算属性，只有手机号码与验证码均填写，按钮才可被点击
    -->
    <button
      type="button"
      class="btn btn-primary"
      :disabled="smsVerifyConfirm"
      @click="doLogin"
    >登录系统</button>
  </div>
</template>

<script>
import { SMSVerify } from '@plugins/business'
import { smsCode, smsLogin } from '@api/auth'

export default {
  mixins: [SMSVerify],
  data () {
    return {
      // 覆盖核心模块的数据属性，达到定制的效果
      // 无需任何定制功能时，业务页面中无需定义任何数据属性
      phone: '13655554444',
      markedPhoneNumber: true
    }
  },
  methods: {
    // 为获取手机短信验证码适配数据请求操作，函数名必须为 doSend
    doSend (data) {
      return smsCode(data)
    },
    // 为手机号与验证码检查功能适配数据请求操作，函数名必须为 doVerify
    doVerify (data) {
      return smsLogin(data)
    },
    doLogin (){
      // 调用模块中提供的手机号与验证码检查功能
      this.verifyPhoneAndCode().then(resp => {
        if (resp) {
          // 执行验证成功后的业务逻辑
        }
      })
    }
  }
}
</script>