Yii2发送短信验证码完全解决方案

概述

在做项目的时候，需要用到短信发送验证码功能。不能不说Yii2的牛逼，很容易就搞定了。下面我整理一下具体功能和流程，分享给大家。

主要功能

• 通过Yii2 rules验证手机号
• 通过js验证是否为手机号
• 通过Ajax验证手机是否在数据库存在
• 通过ajax发送短信验证码
• Js倒计时功能（cookie保存信息，防刷新）
• 通过Yii2 rules 验证手机短信码是否合法。

实现详细步骤和代码

前端表单设计,这里主要定义了手机号码filed和和发送短信的按钮 'id' =>'second'

<?php $form = ActiveForm::begin(); ?>
    <?= $form->field($model, 'loginMode')->hiddenInput(['value' => 'login_sms_code'])->label(false); ?>
    <div class="form-group has-feedback login-mobile f-left">
        <?= $form->field($model, 'mobile')->textInput(['placeholder' => $model->getAttributeLabel('mobile')])->label(false) ?>
        <span class="glyphicon glyphicon-phone form-control-feedback"></span>
    </div>
    <?= Html::buttonInput(Yii::t('app', 'Get SMS Code'), ['class' => 'btn bg-yellow ', 'name' => 'signup-button', 'id' => 'second']) ?>
    <div class="clear"></div>
    <div class="form-group has-feedback">
        <?= $form->field($model, 'smsCode')->textInput(['placeholder' => $model->getAttributeLabel('smsCode')])->label(false) ?>
        <span class="glyphicon glyphicon-mobile form-control-feedback"></span>
    </div>
    <div class="footer bg-gray">
        <?= Html::submitButton(Yii::t('app', 'Login'), ['class' => 'btn bg-blue btn-block']) ?>
    </div>
<?php ActiveForm::end(); ?>

当发送短信的按钮 'id'=>'second' 被点击后，会通过js验证手机的合法性，然后发送短信，并进行倒计时。具体js部分代码如下

/发送验证码时添加cookie
function addCookie(name,value,expiresHours){
    var cookieString=name+"="+escape(value);
    //判断是否设置过期时间,0代表关闭浏览器时失效
    if(expiresHours>0){
        var date=new Date();
        date.setTime(date.getTime()+expiresHours*1000);
        cookieString=cookieString+";expires=" + date.toUTCString();
    }
    document.cookie=cookieString;
}
//修改cookie的值
function editCookie(name,value,expiresHours){
    var cookieString=name+"="+escape(value);
    if(expiresHours>0){
        var date=new Date();
        date.setTime(date.getTime()+expiresHours*1000); //单位是毫秒
        cookieString=cookieString+";expires=" + date.toGMTString();
    }
    document.cookie=cookieString;
}
//根据名字获取cookie的值
function getCookieValue(name){
    var strCookie=document.cookie;
    var arrCookie=strCookie.split("; ");
    for(var i=0;i<arrCookie.length;i++){
        var arr=arrCookie[i].split("=");
        if(arr[0]==name){
            return unescape(arr[1]);
            break;
        }
    }

}

$(function(){
    $("#second").click(function (){
        sendCode($("#second"));
    });
    v = getCookieValue("secondsremained_login") ? getCookieValue("secondsremained_login") : 0;//获取cookie值
    if(v>0){
        settime($("#second"));//开始倒计时
    }
})
//发送验证码
function sendCode(obj){
    var site = 'http://yun.ucrm.com.cn/';
    var mobile = $("#loginform-mobile").val();
    //检查手机是否合法
    var result = isPhoneNum();
    if(result){
        //检查手机号码是否存在
        var exists_result = dbCheckMobileExists(site+'site/check-mobile-exists',{"mobile":mobile});
        if(exists_result){
            doPostBack(site+'sms/send-login-code',{"mobile":mobile});
            addCookie("secondsremained_login",60,60);//添加cookie记录,有效时间60s
            settime(obj);//开始倒计时
        }
    }
}

//检查手机号码是否存在
function dbCheckMobileExists(url,queryParam){
    $.ajax({
        async : false,
        cache : false,
        type : 'POST',
        url : url,// 请求的action路径
        data:queryParam,
        error : function() {// 请求失败处理函数
        },
        success:function(result){
            if(result=='Success'){
                return true;
            }
            else{
                alert('该手机号码不存在！');
                return false;
            }
        }
    });
}
//将手机利用ajax提交到后台的发短信接口
function doPostBack(url,queryParam) {
    $.ajax({
        async : false,
        cache : false,
        type : 'POST',
        url : url,// 请求的action路径
        data:queryParam,
        error : function() {// 请求失败处理函数
        },
        success:function(result){
            if(result=='Success'){
                alert('短信发送成功，验证码10分钟内有效,请注意查看手机短信。如果未收到短信，请在60秒后重试！');
            }
            else{
                alert('短信发送失败，请和网站客服联系！');
                return false;
            }
        }
    });
}

//开始倒计时
var countdown;
function settime(obj) {
    countdown=getCookieValue("secondsremained_login") ? getCookieValue("secondsremained_login") : 0;
    if (countdown ==0) {
        obj.removeAttr("disabled");
        obj.val("获取验证码");
        return;
    } else {
        obj.attr("disabled", true);
        obj.val(countdown + "秒后重发");
        countdown--;
        editCookie("secondsremained_login",countdown,countdown+1);
    }
    setTimeout(function() { settime(obj) },1000) //每1000毫秒执行一次
}
//校验手机号是否合法
function isPhoneNum(){
    var phonenum = $("#loginform-mobile").val();
    var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
    if(!myreg.test(phonenum)){
        alert('请输入有效的手机号码！');
        $("#loginform-mobile").focus();
        return false;
    }else{
        return true;
    }
}

上述代码中有两个方法是通过Ajax交互的，一个为验证手机是否合法的方法dbCheckMobileExists()，另一个是通过ajax发送短信码的方法doPostBack(). 具体每个方法的代码大家上面看就可以了。 dbCheckMobileExists()会提交到CheckMobileExists方法检查手机是否存在:

public function actionCheckMobileExists()
{
    $mobile = Yii::$app->request->post('mobile');
    if(User::findByMobile($mobile)){
        echo 'Success';
    }else{
        echo  'Failed';
    }
}

doPostBack()会提交到SendLoginCode方法发送登录验证码：

public function actionSendLoginCode()
 {
    $mobile = Yii::$app->request->post('mobile');
    $code = $this->createCode();
    $content = "本次验证码为".$code."，您正在登录纽仁云客管理系统，打死也不告诉别人哦";
    if($this->send($mobile,$content)===true){
        //检查session是否打开
        if(!Yii::$app->session->isActive){
            Yii::$app->session->open();
        }
        //验证码和短信发送时间存储session
        Yii::$app->session->set('login_sms_code',$code);
        Yii::$app->session->set('login_sms_time',time());
        echo 'Success';
    }else{
        echo  'Failed';
    }
}

在上述发送代码的时候，当发送成功时，会保存两个session，login_sms_code和login_sms_time，分别记录了验证码内容和生成时间。

当发送成功后，用户会收到验证码，然后输入后进行提交，此时我们会进行验证码的校验，这里我们是采用yii2 rules来完成此项任务。

在 LoginForm 表的里面的 rules 里面添加下面校验规则，大家可以看到这里写了关于手机和验证码的诸多验证规则，其实最后一个验证规则即为 验证短信码是否正确，这里我们通过requiredValue验证用户输入的值是否等于 getSmsCode 的值即可。

['mobile', 'required','on' => ['default','login_sms_code']],
['mobile', 'integer','on' => ['login_sms_code']],
['mobile','match','pattern'=>'/^1[0-9]{10}$/','on' => ['default','login_sms_code'],'message'=>'{attribute}必须为1开头的11位纯数字'],
['mobile', 'string', 'min'=>11,'max' => 11,'on' => ['default','login_sms_code']],

['smsCode', 'required','on' => ['default','login_sms_code']],
['smsCode', 'integer','on' => ['default','login_sms_code']],
['smsCode', 'string', 'min'=>6,'max' => 6,'on' => ['default','login_sms_code']],
['smsCode', 'required','requiredValue'=>$this->getSmsCode(),'on' => ['default','login_sms_code'],'message'=>'手机验证码输入错误'],

上面的getSmsCode()代码如下，这里通过session获取了验证码和生成时间，如果在10分钟内，则返回验证码session的值。

public function getSmsCode()
{
    //检查session是否打开

    if(!Yii::$app->session->isActive){
        Yii::$app->session->open();
    }
    //取得验证码和短信发送时间session
    $signup_sms_code = intval(Yii::$app->session->get('login_sms_code'));
    $signup_sms_time = Yii::$app->session->get('login_sms_time');
    if(time()-$signup_sms_time < 600){
        return $signup_sms_code;
    }else{
        return 888888;
    }
}

上面为全部代码，大家可以直接使用。

发短信模块使用的是 daixianceng/yii2-smser ，大家在gitbub上搜下安装即可。

代码还有改进的空间，判断手机号是否存在 和 是否合理 应该可以直接在 LoginForm 文件里面添加 rules 规则，然后 form 开启 Ajax 验证。就不需要自己手写 js 了。

来源地址：http://www.getyii.com/topic/221