登录注册----3.2手机验证码

前言

通过手机验证码登录和注册是目前最流行的一种方式。这篇文章就来介绍如何实现手机验证码的发送与验证。
我们先来分析一下大概流程。

1. 前端页面的发送验证码以及倒计时显示
2. 在数据库新建一个存放手机号和手机验证码的数据表
3. 在网上找个可用的短信接口（网易，阿里，腾讯都有接口）我这里使用的是容联云通讯
4. 在控制器中创建发送短信验证码的方法
5. 在控制器中创建验证短信验证码的方法
6. 新建路由用于发送验证码

1.前端页面的发送验证码以及倒计时显示

这里可以分为2块分别是

• 可发送验证码时显示的效果（发送验证码，重新发送）
• 倒计时效果（不可发送）

部分代码如下

//改变计时文字的颜色
            $(this).removeClass('bk_important');
            $(this).addClass('bk_summary');
            enable = false;//一旦点击将其置为false
            var time = 60;//允许多长时间后重新发送
            var interval = window.setInterval(function () { //定义一个计时器
                $('.bk_phone_code_send').html(--time+'s 重新发送'); //改变按钮的状态，并改变上面的文字
                if (time == 0){//当计时器为0时可重新发送
                    $('.bk_phone_code_send').addClass('bk_important');
                    $('.bk_phone_code_send').removeClass('bk_summary');
                    enable = true;
                    window.clearInterval(interval);
                    $('.bk_phone_code_send').html('重新发送');
                }
            },1000);

2.在数据库新建一个存放手机号和手机验证码的数据表

这里表中所包含的数据项为

• id（主键）
• phone（手机号）
• code（验证码）
• deadline（验证码持续的时间）

具体如下图所示，由于之前的数据表的数据项会导致错误，大家可按照此图对数据库重新更改

Paste_Image.png

3.在网上找一个可用的短信接口（这里使用的是容联云通讯）

首先在app\Tool\下新建SMS文件夹用于存放接口文件
这个大家可以把我存放在github下的代码拿下来用就行了
然后要在容联的官网注册一个账号
然后登录，查找如图所示方框里的内容

Paste_Image.png

最后将如图所示的数据替换成你账号的数据即可

Paste_Image.png

然后在控制台输入你要测试的号码

Paste_Image.png

4.在控制器中创建发送短信验证码的方法

这个方法我们是写在app\Http\Controllers\Service\ValidateCodeController.php文件下
此方法代码如下

public function sendSMS(Request $request)
    {
        $m3_result = new M3Result();

        $phone = $request->input('phone','');//获取输入框的手机号
        $sendTemplateSMS = new SendTemplateSMS();
        //生成6位随机验证码
        $charset='1234567890';//数据源
        $code = '';//声明
        //生成随机码的算法逻辑
        $_len = strlen($charset) - 1;
        for ($i = 0;$i < 6;++$i) {
            $code .= $charset[mt_rand(0, $_len)];
        }
        //测试的时候需要自己注册账号，并且更改模板里的一些文件
        //参数说明  要发送的手机号 （验证码，验证码存在的事件） 短信模板 1为测试模板 手机验证码最好为6位数字
        $m3_result =$sendTemplateSMS->sendTemplateSMS( $phone,array($code,60),1);
        if ($m3_result->status == 0){
            //将数据保存到数据表中
            $tempPhone = TempPhone::where('phone_number',$phone)->first();
            if($tempPhone == null){ //判断手机号是否已被注册
                $tempPhone = new TempPhone();
            }

            $tempPhone->phone_number = $phone;
            $tempPhone->code = $code;
            $tempPhone->deadline =date('Y-m-d H-i-s',time()+60*60);
            $tempPhone->save();

        }
        return $m3_result->toJson();
    }

5.在控制器中创建验证短信验证码的方法

这个方法我们是写在app\Http\Controllers\Service\MemberController.php文件下
此方法中验证‘验证码’代码如下

 //查询手机号
        //参数1 要查询的字段名称  第二个参数 不写的话默认为= 如果要判断大小需要将其添加上 第三个是传进来的值
        $tempPhone = TempPhone::where('phone_number','=',$phone)->first();
        //判断验证码处理逻辑
        //判断数据库中的验证码是否和输入的一致
        if($tempPhone->code == $phone_code){
            //如果一致再进行验证码是否过期判断
            if(time() > strtotime($tempPhone->deadline)){ //strtotime将时间字符串转换为时间戳
                $m3_result->status = 7;
                $m3_result->message = '手机验证码不正确';
                return $m3_result->toJson();
            }
            //验证格式验证正确后 处理逻辑
            $member = new Member();
            $member->phone = $phone;//传手机号
            $member->password = md5('bk'+$password);//传密码  md5加密
            $member->save();//将数据存到数据表中

            $m3_result->status = 0;
            $m3_result->message = '注册成功';
            return $m3_result->toJson();

        }

6. 新建路由用于发送验证码

在路由中我们需要新建两个路由

• 用于发送验证码的路由
• 注册或登录时数据验证的路由

代码如下

Route::group(['prefix' => 'service'], function () {
/*    Route::get('users', function ()    {
        // 匹配 "/admin/users" URL
    });*/
    Route::get('validatecode/', 'Service\ValidateCodeController@create');
    Route::post('validate_phone/send', 'Service\ValidateCodeController@sendSMS');
    Route::post('register', 'Service\MemberController@register');
    Route::post('login', 'Service\MemberController@login');
    Route::post('validate_email', 'Service\ValidateCodeController@validateEmail');
});

注：在测试的时候出现很多问题，大部分都是小细节问题，而且非常不好找。有一次一个多打一个空格让我找了半天。。。重新审视了好几遍，都没发现错误。
这里我提醒大家要注意细节问题，比如多打空格、拼写错误、和数据表中的数据项名不一致。等等
还有就是发生什么错误就要对应的去找，不要像我一样重新看几遍~~~~
浪费了大量时间，自己都想放弃了。但是一旦改过来，精神会突然一震。
让你感受到成就感。我是初学者所以是这样的。。。
此文比较简略，主要是为了自己以后翻阅记录而作。
在此建议大家在淘宝淘点教学视频或者上慕课网跟着老师进行实战