手机注册再国内非常流行，基本上是个商业类型的网站，都要求用手机号注册登录，或者提供手机号码注册登录的选项。这种行为是否侵犯个人隐私我们按下不谈，今天我们只聊使用 WordPress开发短信注册登录的方法。手机短信验证注册登录的实现其实很简单，没做过的朋友可能会觉得需要处理的逻辑太多，还没开始尝试就退缩了。其实整合注册验证过程中，最麻烦的是短信接口的对接，比较常用的短信接口还好说，官方都提供的有 SDK 和代码供参考，也可以使用下面介绍的短信发送库。如果遇到非主流的接口就郁闷了，接口文档简单得要命，接口实现也非常糟糕，耐心不够就调试不过去。吐槽的话少说，下面转入正题。

首先是验证短信服务接口

短信接口是必需的，没有接口就谈不上技术实现，至于使用哪家的接口。要看选择时更看中那方面的因素，接口的稳定性，灵活性，价格等都是需要考虑的。下面的表格是“可能是目前最聪明、优雅的php短信发送库 PhpSms” 整理的国内常用的几个短信服务商，供大家参考。

发送及验证短信后端代码实现

发送短信之前，我们肯定要生成一个随机的验证码，通过短信发送验证码的同时，也吧验证码保存到数据库里，供验证时对比，判断验证码是否正确。下面是我在做一个网站注册登录的时候，发送代码的简单逻辑，大家可以参考一下。

下面的代码中需要注意两点：一是在发送验证码之前，先保存验证码数据库中，以免验证码发出去了，数据库却保存失败了，这时候就算用户收到了短信验证码，去验证的时候也是失败的，如果保存数据库失败，直接提示一个发送失败的消息就可以了，不要再发送短信造成浪费；二是保存数据库的时候，需要考虑用户没有收到短信，重新发送的情况，这个时候是更新数据库中的记录，而不是新建，如果是新建，短信验证记录就重复了，验证短信的时候，很可能获取的是上一条验证记录，用户使用当前收到的验证码验证的时候，也是验证通不过的。

其实下面的验证逻辑里面，还却少一条手机号码正确性的验证，由于是后来加上的，就不再粘贴了。

/**
 * 发送手机验证码
 */
new Dispatch( [
'wizhi/get_phone_code' => function ( $request ) {

   $phone = isset( $_POST[ 'phone' ] ) ? $_POST[ 'phone' ] : false;

   if ( $phone ) {

      // 生成随机验证码
      $phone_code = str_pad( mt_rand( 1, 99999 ), 6, '0', STR_PAD_LEFT );

      // 先创建数据库记录，再发送短信，
      // 用 findOrCreate 而不是直接 create 密码发送失败后重试时，创建重复记录导致验证失败
      $code       = R::findOrCreate( CODES, [ 'phone' => $phone ] );
      $code->code = $phone_code;

      $success = R::store( $code );

      // 数据库记录创建成功后再发送短信，否则就不用发短信了，发了也验证不了
      $sms = false;
      if ( $success ) {
         $sms = send_sms( $phone, $phone_code );
      } else {
         $msg = [ 
            'success' => 1, 
            'message' => '验证短信发送失败，请重试', 
         ];
      }

      if ( $sms ) {
         $msg = [
            'success' => 1,
            'message' => '验证短信已发送',
         ];
      } else {
         $msg = [
            'success' => 1,
            'message' => '验证短信发送失败，请重试',
         ];
      }

   } else {
      $msg = [
         'success' => 0,
         'message' => '请输入正确的手机号码',
      ];
   }

   wp_send_json( $msg );

},

] );

接收了正确的请求之后，上面的路由返回的是一个 JSON 格式的消息字符串，我们可以在前端根据返回的字符串做进一步的处理，下面我们来看一下前端代码的实现。

发的短信验证码的前端代码实现

下面的代码实现的就是一个点击发送验证码之后，请求后端接口，发送短信给用户的功能，发送验证短信一分钟之后，可以重新发送，需要注意的是计时器的触发时机，要在成功发送了短信之后，才启用计时器。否则用户的手机填错了，或者因为其他原因没能发送短信的时候，用户还要白等一分钟，才能继续发送短信。如果更严谨一点，可以加一个随机验证码的机制，以防被恶意程序扫描到发送短信炸弹。

//timer处理函数
var InterValObj; //timer变量，控制时间
var count = 60; //间隔函数，1秒执行
var curCount;//当前剩余秒数

/**
 * 设置计时器
 * @constructor
 */
function SetRemainTime() {
    if (curCount == 0) {
        window.clearInterval(InterValObj);//停止计时器
        $("#get_code").removeAttr("disabled");//启用按钮
        $("#get_code").val("重新发送");
    }
    else {
        curCount--;
        $("#get_code").val(curCount + "后重新获取");
    }
}


/**
 * 发送短信验证码
 * @returns {boolean}
 */
$('#get_code').on('click', function (event, element) {
    event.preventDefault();

    // 向后台发送处理数据
    $.ajax({
        method  : 'POST',
        url     : WizUrls.get_phone_code,
        dataType: "json",
        data    : {
            'phone': $('form#modal-register #user_login').val()
        },
        success : function (data) {
            if (data.success === 0) {
                $('form#modal-register div.status').removeClass('c-alert-success').addClass('c-alert c-alert-danger').html(data.message);
                return false;
            } else {
                // 验证码发送成功后，启动计时器
                curCount = count;

                // 设置button效果，开始计时
                $(this).attr("disabled", "true");
                $(this).val(curCount + "后重新获取");

                InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次

                $('form#modal-register div.status').removeClass('c-alert-danger').addClass('c-alert c-alert-success').html(data.message);
                return true;
            }
        }
    });

    return false;
});

发送注册登录验证短信之后，前端后段的实现都有了，最后就是实现用户注册或登录了，这一步就是比较常规的操作了，根据用户的手机号，从数据库中取出验证码，和用户提交过来的验证码比对，如果一致，说明验证码正确，进行下一步的处理；如果不一致，说明验证码错误，提示用户验证码错误，让用户修正或者重新发送验证码。