前言
通过手机验证码登录和注册是目前最流行的一种方式。这篇文章就来介绍如何实现手机验证码的发送与验证。
我们先来分析一下大概流程。
- 前端页面的发送验证码以及倒计时显示
- 在数据库新建一个存放手机号和手机验证码的数据表
- 在网上找个可用的短信接口（网易，阿里，腾讯都有接口）我这里使用的是容联云通讯
- 在控制器中创建发送短信验证码的方法
- 在控制器中创建验证短信验证码的方法
- 新建路由用于发送验证码
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');
});
注：在测试的时候出现很多问题，大部分都是小细节问题，而且非常不好找。有一次一个多打一个空格让我找了半天。。。重新审视了好几遍，都没发现错误。
这里我提醒大家要注意细节问题，比如多打空格、拼写错误、和数据表中的数据项名不一致。等等
还有就是发生什么错误就要对应的去找，不要像我一样重新看几遍~~~~
浪费了大量时间，自己都想放弃了。但是一旦改过来，精神会突然一震。
让你感受到成就感。我是初学者所以是这样的。。。
此文比较简略，主要是为了自己以后翻阅记录而作。
在此建议大家在淘宝淘点教学视频或者上慕课网跟着老师进行实战
网友评论