阿里云短信服务 手机号注册登录实现逻辑+代码-技术中文网

实现效果

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

本章教学为阿里云短信服务教程篇,所以在此在此教程之前需要:

阿里云短信包 Access Key ID Access Key Secret 签名 模板ID

发送短信之前,我们肯定要生成一个随机的验证码,通过短信发送验证码的同时,把验证码保存到数据库里,供验证时对比,判断验证码是否正确。

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

/**
 * 发送手机验证码
 */
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;
});
阿里云验证码固定参数
${code}

技术中文网   

阿里云—短信服务

cc css ddos eclipse html html学习 java javaEE JavaScript javaWeb java基础 java方法基础 Java结构语句 java运算符 JDK JDK环境配置 js kali mysql web 儿时 前端 心情 感情 放松 数据库 数据库的安装 数据类型 数组 晚霞 朋友 朝霞 梦想 狗狗 相爱的概率 相遇 童年 网络安全 网络攻防 运算符 霞光