前言
通過手機(jī)驗(yàn)證碼登錄和注冊是目前最流行的一種方式。這篇文章就來介紹如何實(shí)現(xiàn)手機(jī)驗(yàn)證碼的發(fā)送與驗(yàn)證。
我們先來分析一下大概流程。
- 前端頁面的發(fā)送驗(yàn)證碼以及倒計(jì)時顯示
- 在數(shù)據(jù)庫新建一個存放手機(jī)號和手機(jī)驗(yàn)證碼的數(shù)據(jù)表
- 在網(wǎng)上找個可用的短信接口（網(wǎng)易，阿里，騰訊都有接口）我這里使用的是容聯(lián)云通訊
- 在控制器中創(chuàng)建發(fā)送短信驗(yàn)證碼的方法
- 在控制器中創(chuàng)建驗(yàn)證短信驗(yàn)證碼的方法
- 新建路由用于發(fā)送驗(yàn)證碼
1.前端頁面的發(fā)送驗(yàn)證碼以及倒計(jì)時顯示
這里可以分為2塊分別是
- 可發(fā)送驗(yàn)證碼時顯示的效果（發(fā)送驗(yàn)證碼，重新發(fā)送）
- 倒計(jì)時效果（不可發(fā)送）
部分代碼如下
//改變計(jì)時文字的顏色
$(this).removeClass('bk_important');
$(this).addClass('bk_summary');
enable = false;//一旦點(diǎn)擊將其置為false
var time = 60;//允許多長時間后重新發(fā)送
var interval = window.setInterval(function () { //定義一個計(jì)時器
$('.bk_phone_code_send').html(--time+'s 重新發(fā)送'); //改變按鈕的狀態(tài)，并改變上面的文字
if (time == 0){//當(dāng)計(jì)時器為0時可重新發(fā)送
$('.bk_phone_code_send').addClass('bk_important');
$('.bk_phone_code_send').removeClass('bk_summary');
enable = true;
window.clearInterval(interval);
$('.bk_phone_code_send').html('重新發(fā)送');
}
},1000);
2.在數(shù)據(jù)庫新建一個存放手機(jī)號和手機(jī)驗(yàn)證碼的數(shù)據(jù)表
這里表中所包含的數(shù)據(jù)項(xiàng)為
- id（主鍵）
- phone（手機(jī)號）
- code（驗(yàn)證碼）
- deadline（驗(yàn)證碼持續(xù)的時間）
具體如下圖所示，由于之前的數(shù)據(jù)表的數(shù)據(jù)項(xiàng)會導(dǎo)致錯誤，大家可按照此圖對數(shù)據(jù)庫重新更改
3.在網(wǎng)上找一個可用的短信接口（這里使用的是容聯(lián)云通訊）
首先在app\Tool\下新建SMS文件夾用于存放接口文件
這個大家可以把我存放在github下的代碼拿下來用就行了
然后要在容聯(lián)的官網(wǎng)注冊一個賬號
然后登錄，查找如圖所示方框里的內(nèi)容
最后將如圖所示的數(shù)據(jù)替換成你賬號的數(shù)據(jù)即可
然后在控制臺輸入你要測試的號碼
4.在控制器中創(chuàng)建發(fā)送短信驗(yàn)證碼的方法
這個方法我們是寫在app\Http\Controllers\Service\ValidateCodeController.php文件下
此方法代碼如下
public function sendSMS(Request $request)
{
$m3_result = new M3Result();
$phone = $request->input('phone','');//獲取輸入框的手機(jī)號
$sendTemplateSMS = new SendTemplateSMS();
//生成6位隨機(jī)驗(yàn)證碼
$charset='1234567890';//數(shù)據(jù)源
$code = '';//聲明
//生成隨機(jī)碼的算法邏輯
$_len = strlen($charset) - 1;
for ($i = 0;$i < 6;++$i) {
$code .= $charset[mt_rand(0, $_len)];
}
//測試的時候需要自己注冊賬號，并且更改模板里的一些文件
//參數(shù)說明 要發(fā)送的手機(jī)號 （驗(yàn)證碼，驗(yàn)證碼存在的事件） 短信模板 1為測試模板 手機(jī)驗(yàn)證碼最好為6位數(shù)字
$m3_result =$sendTemplateSMS->sendTemplateSMS( $phone,array($code,60),1);
if ($m3_result->status == 0){
//將數(shù)據(jù)保存到數(shù)據(jù)表中
$tempPhone = TempPhone::where('phone_number',$phone)->first();
if($tempPhone == null){ //判斷手機(jī)號是否已被注冊
$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.在控制器中創(chuàng)建驗(yàn)證短信驗(yàn)證碼的方法
這個方法我們是寫在app\Http\Controllers\Service\MemberController.php文件下
此方法中驗(yàn)證‘驗(yàn)證碼’代碼如下
//查詢手機(jī)號
//參數(shù)1 要查詢的字段名稱 第二個參數(shù) 不寫的話默認(rèn)為= 如果要判斷大小需要將其添加上 第三個是傳進(jìn)來的值
$tempPhone = TempPhone::where('phone_number','=',$phone)->first();
//判斷驗(yàn)證碼處理邏輯
//判斷數(shù)據(jù)庫中的驗(yàn)證碼是否和輸入的一致
if($tempPhone->code == $phone_code){
//如果一致再進(jìn)行驗(yàn)證碼是否過期判斷
if(time() > strtotime($tempPhone->deadline)){ //strtotime將時間字符串轉(zhuǎn)換為時間戳
$m3_result->status = 7;
$m3_result->message = '手機(jī)驗(yàn)證碼不正確';
return $m3_result->toJson();
}
//驗(yàn)證格式驗(yàn)證正確后 處理邏輯
$member = new Member();
$member->phone = $phone;//傳手機(jī)號
$member->password = md5('bk'+$password);//傳密碼 md5加密
$member->save();//將數(shù)據(jù)存到數(shù)據(jù)表中
$m3_result->status = 0;
$m3_result->message = '注冊成功';
return $m3_result->toJson();
}
6. 新建路由用于發(fā)送驗(yàn)證碼
在路由中我們需要新建兩個路由
- 用于發(fā)送驗(yàn)證碼的路由
- 注冊或登錄時數(shù)據(jù)驗(yàn)證的路由
代碼如下
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');
});
注：在測試的時候出現(xiàn)很多問題，大部分都是小細(xì)節(jié)問題，而且非常不好找。有一次一個多打一個空格讓我找了半天。。。重新審視了好幾遍，都沒發(fā)現(xiàn)錯誤。
這里我提醒大家要注意細(xì)節(jié)問題，比如多打空格、拼寫錯誤、和數(shù)據(jù)表中的數(shù)據(jù)項(xiàng)名不一致。等等
還有就是發(fā)生什么錯誤就要對應(yīng)的去找，不要像我一樣重新看幾遍~~~~
浪費(fèi)了大量時間，自己都想放棄了。但是一旦改過來，精神會突然一震。
讓你感受到成就感。我是初學(xué)者所以是這樣的。。。
此文比較簡略，主要是為了自己以后翻閱記錄而作。
在此建議大家在淘寶淘點(diǎn)教學(xué)視頻或者上慕課網(wǎng)跟著老師進(jìn)行實(shí)戰(zhàn)
