WordPress 中短信验证注册登录的实现方法-前端+后端

WordPress 中短信验证注册登录的实现方法-前端+后端

WordPress 中短信验证注册登录的实现方法-前端+后端

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

首先是验证短信服务接口

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

服务商 模板短信 内容短信 语音验证码 最低消费 最低消费单价
Luosimao × ¥850(1万条) ¥0.085/条
云片网络 × ¥55(1千条) ¥0.055/条
容联·云通讯 × 充值¥500 ¥0.055/条
SUBMAIL × × ¥100(1千条) ¥0.100/条
云之讯 × ¥0.050/条
聚合数据 × ¥0.035/条
阿里大鱼 × ¥0.045/条
SendCloud × ¥0.048/条

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

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

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

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

/**
 * 发送手机验证码
 */
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('alert-success').addClass('alert 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('alert-danger').addClass('alert alert-success').html(data.message);
                return true;
            }
        }
    });

    return false;
});

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

本站提供 WordPress 主题定制开发服务

本站长期承接WordPress主题、插件、基于 WooCommerce 的商店商城开发业务。 我们有7年 WordPress 开发经验, 如果你想用 WordPress 开发网站, 请联系 QQ: 470266798 或邮箱: 4626395@gmail.com 咨询。

当前有 1 条评论 ;

  1. 您好,能给一下具体实现的时候的文件结构么?刚入手wordpress不太了解他里面的js调用

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*