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

最新推荐文章于 2022-08-29 23:49:08 发布

xmlife

最新推荐文章于 2022-08-29 23:49:08 发布

阅读量5.9k

点赞数 1

分类专栏： Yii2

Yii2 专栏收录该内容

51 篇文章 1 订阅

订阅专栏

通过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://xxxx.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."，您正在登录xxxx，打死也不告诉别人哦";
    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;
    }
}

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

xmlife

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Yii2发送短信验证码完全解决方案

通过Yii2 rules验证手机号通过js验证是否为手机号通过Ajax验证手机是否在数据库存在通过ajax发送短信验证码Js倒计时功能（cookie保存信息，防刷新）通过Yii2 rules 验证手机短信码是否合法。实现详细步骤和代码前端表单设计,这里主要定义了手机号码filed和和发送短信的按钮 'id' =>'second'$form = ActiveForm:
复制链接

扫一扫