About the functional code of Thinkphp to implement SMS verification registration

The registration function is a must-have function for many websites. If you have the registration function, you must have an SMS verification code. This article will share with you how thinkphp implements the SMS verification registration function. Friends who are interested should take a look.

Preface

SMS verification codes are often needed when registering. This article records the ideas and specific implementation.

The SMS verification platform uses Yunpian, and the generation of SMS verification codes uses thinkphp.

Ideas

1. The user enters the mobile phone number and requests to obtain the SMS verification code.

2. Thinkphp generates the SMS verification code, stores it, and sends the request to Yunpian together with other parameters.

3. Yunpian sends a text message verification code to the designated mobile phone number.

4. The user enters the SMS verification code.

5. thinkphp determines whether the verification is passed based on two conditions: whether the verification code is correct and whether the verification code has expired.

Code implementation

Verification interface

Use postman and enter the three necessary parameters apikey, mobile and text.

php initiates an http/https request

Use php's curl function to initiate an https request and bring in Parameters apikey, mobile and text.

// 获取短信验证码
public function getSMSCode(){
// create curl resource 
$ch = curl_init(); 
// set url
$url = 'https://sms.yunpian.com/v1/sms/send.json'; 
curl_setopt($ch, CURLOPT_URL, $url); 
// set param
$paramArr = array(
'apikey' => '******',
'mobile' => '******',
'text' => '【小太阳】您的验证码是1234'
);
$param = '';
foreach ($paramArr as $key => $value) {
$param .= urlencode($key).'='.urlencode($value).'&';
}
$param = substr($param, 0, strlen($param)-1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $param);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_POST, 1);
//curl默认不支持https协议，设置不验证协议
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); 
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false); 
//return the transfer as a string 
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); 
// $output contains the output string 
$output = curl_exec($ch); 
// close curl resource to free up system resources 
curl_close($ch); 
echo $output;
}

Generate a random SMS verification code

Generates a four-digit random SMS verification code by default code.

// 生成短信验证码
public function createSMSCode($length = 4){
$min = pow(10 , ($length - 1));
$max = pow(10, $length) - 1;
return rand($min, $max);
}

Integration

Create a new table sun_smscode in the database:

DROP TABLE IF EXISTS `sun_smscode`;
CREATE TABLE `sun_smscode` (
`id` int(8) NOT NULL AUTO_INCREMENT,
`mobile` varchar(11) NOT NULL,
`code` int(4) NOT NULL,
`create_at` datetime NOT NULL,
`update_at` datetime NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;
thinkphp代码：
// 获取短信验证码
public function getSMSCode(){
// create curl resource 
$ch = curl_init(); 
// set url
$url = 'https://sms.yunpian.com/v1/sms/send.json'; 
curl_setopt($ch, CURLOPT_URL, $url); 
// set param
$mobile = $_POST['mobile'];
$code = $this->createSMSCode();
$paramArr = array(
'apikey' => '******',
'mobile' => $mobile,
'text' => '【小太阳】您的验证码是'.$code
);
$param = '';
foreach ($paramArr as $key => $value) {
$param .= urlencode($key).'='.urlencode($value).'&';
}
$param = substr($param, 0, strlen($param)-1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $param);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); //不验证证书下同
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false); 
//return the transfer as a string 
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); 
// $output contains the output string 
$output = curl_exec($ch); 
// close curl resource to free up system resources 
curl_close($ch); 
//$outputJson = json_decode($output);
$outputArr = json_decode($output, true);
//echo $outputJson->code;
//echo $outputArr['code'];
if($outputArr['code'] == '0'){
$data['mobile'] = $mobile;
$data['code'] = $code;
$smscode = D('smscode');
$smscodeObj = $smscode->where("mobile='$mobile'")->find();
if($smscodeObj){
$data['update_at'] = date('Y-m-d H:i:s');
$success = $smscode->where("mobile='$mobile'")->save($data);
if($success !== false){
$result = array(
'code' => '0',
'ext' => '修改成功',
'obj' => $smscodeObj
);
}
echo json_encode($result,JSON_UNESCAPED_UNICODE);
}else{
$data['create_at'] = date('Y-m-d H:i:s');
$data['update_at'] = $data['create_at'];
if($smscode->create($data)){
$id = $smscode->add();
if($id){
$smscode_temp = $smscode->where("id='$id'")->find();
$result = array(
'code'=> '0',
'ext'=> '创建成功',
'obj'=>$smscode_temp
);
echo json_encode($result,JSON_UNESCAPED_UNICODE);
}
}
}
}
}

Verify SMS verification code

Verify whether the SMS verification code time has expired, and verify whether the SMS verification code is correct.

// 验证短信验证码是否有效
public function checkSMSCode(){
$mobile = $_POST['mobile'];
$code = $_POST['code'];
$nowTimeStr = date('Y-m-d H:i:s');
$smscode = D('smscode');
$smscodeObj = $smscode->where("mobile='$mobile'")->find();
if($smscodeObj){
$smsCodeTimeStr = $smscodeObj['update_at'];
$recordCode = $smscodeObj['code'];
$flag = $this->checkTime($nowTimeStr, $smsCodeTimeStr);
if(!$flag){
$result = array(
'code' => '1',
'ext' => '验证码过期，请刷新后重新获取'
);
echo json_encode($result,JSON_UNESCAPED_UNICODE);
return;
}
if($code != $recordCode){
$result = array(
'code' => '2',
'ext' => '验证码错误，请重新输入'
);
echo json_encode($result,JSON_UNESCAPED_UNICODE);
return;
}
$result = array(
'code' => '0',
'ext' => '验证通过'
);
echo json_encode($result,JSON_UNESCAPED_UNICODE);
}
}
// 验证验证码时间是否过期
public function checkTime($nowTimeStr,$smsCodeTimeStr){
//$nowTimeStr = '2016-10-15 14:39:59';
//$smsCodeTimeStr = '2016-10-15 14:30:00';
$nowTime = strtotime($nowTimeStr);
$smsCodeTime = strtotime($smsCodeTimeStr);
$period = floor(($nowTime-$smsCodeTime)/60); //60s
if($period>=0 && $period<=20){
return true;
}else{
return false;
}
}

Improvement

In order to prevent SMS bombing, you need to add an image verification code when requesting an SMS verification code.

thinkphp provides a function to generate image verification codes. Let's implement the generation, refresh and verification of verification codes.

Generate and refresh image verification code

// 获取图片验证码，刷新图片验证码
public function getPicCode(){
$config = array(
'fontSize'=>30, // 验证码字体大小
'length'=>4, // 验证码位数
'useNoise'=>false, // 关闭验证码杂点
'expire'=>600
);
$Verify = new \Think\Verify($config);
$Verify->entry(2333);//2333是验证码标志
}

Assume, the corresponding url of this function It is http://localhost/owner-bd/index.php/Home/CheckCode/getPicCode. Then, the address of the image verification code is this URL, and it can be put into the src attribute of the page image tag.

Verification image verification code

// 验证验证码是否正确
public function checkPicCode($code){
$verify = new \Think\Verify();
if($verify->check($code, 2333)){
$result = array(
'code' => '0',
'ext' => '验证通过'
);
echo json_encode($result,JSON_UNESCAPED_UNICODE);
}else{
$result = array(
'code' => '1',
'ext' => '验证码错误，请重新输入'
);
echo json_encode($result,JSON_UNESCAPED_UNICODE);
};
}

For the above method, we used the one provided by thinkphp The check method is very simple to implement. However, if you want to get verification details, there is no other way. For example, if the verification code is wrong, the verification code may have timed out, the verification code may have been entered incorrectly, the verification code may have been used, etc. When necessary, you can rewrite thinkphp's verification code class, or rewrite thinkphp's check method.

Run through the front-end and back-end

Back-end modification

The verification image verification code function is changed to the called function:

public function checkPicCode($picCode){
$verify = new \Think\Verify();
if($verify->check($picCode, 2333)){
return true;
}else{
return false;
};
}

At the top of the function to get the SMS verification code, add the function to call the image verification code. Only after passing the verification will the request be sent to Yunpian.

// 获取短信验证码
public function getSMSCode(){
$picCode = $_POST['picCode'];
if(!$this->checkPicCode($picCode)){
$result = array(
'code' => '1',
'ext' => '验证码错误，请重新输入'
);
echo json_encode($result,JSON_UNESCAPED_UNICODE);
return;
}
/*省略*/
}

Front-end core code

<!--register.html-->
<!DOCTYPE html>
<html lang="zh" ng-app="sunApp">
<head>
<meta charset="UTF-8">
<title>注册</title>
</head>
<body ng-controller="registerController">
<form action="" class="register-form" ng-show="isShow1">
<p class="input-group">
<input type="text" class="mobile" ng-model="mobile" placeholder="手机号">
</p>
<p class="input-group">
<input type="text" class="pic-code" ng-model="picCode" placeholder="图片验证码">
<img class="img" src="{{picCodeUrl}}" alt="" ng-click="refresh()">
</p>
<p class="input-group">
<input type="text" class="sms-code" ng-model="SMSCode" placeholder="短信验证码">
<button class="btn-sms" ng-click="getSMSCode()" ng-disabled="btnSMSDisabled">{{btnSMSText}}</button>
</p>
<button class="confirm-btn" ng-click="next()">下一步</button>
</form>
<form action="" class="register-form" ng-show="isShow2">
<p class="input-group">
<input type="text" class="mobile" ng-model="mobile" placeholder="手机号" disabled="true">
</p>
<p class="input-group">
<input type="password" class="password" ng-model="password" placeholder="请输入密码">
<input type="password" class="password" ng-model="password2" placeholder="请再次输入密码">
</p>
<button class="confirm-btn" ng-click="getSMSCode()">注册</button>
</form>
</body>
</html>
// register.js
angular.module(&#39;sunApp&#39;).controller(&#39;registerController&#39;, function ($scope,$http,$httpParamSerializer,$state,$interval) { 
$scope.picCodeUrl = &#39;/owner-bd/index.php/Home/CheckCode/getPicCode&#39;;
$scope.isShow1 = true;
$scope.isShow2 = false;
$scope.btnSMSText = &#39;获取验证码&#39;;
$scope.btnSMSDisabled = false;
$scope.checkOver = false;
// 获取短信验证码
$scope.getSMSCode = function(){
var param = {
mobile: $scope.mobile,
picCode: $scope.picCode
};
$http({
method:&#39;POST&#39;,
url:&#39;/owner-bd/index.php/Home/SMS/getSMSCode&#39;,
//url: &#39;/owner-fd/mock/common.json&#39;,
headers:{
&#39;Content-Type&#39;:&#39;application/x-www-form-urlencoded&#39;
},
dataType: &#39;json&#39;,
data: $httpParamSerializer(param)
}).then(function successCallback(response) {
console.log(response.data);
if(response.data.code == &#39;0&#39;){
$scope.checkOver = true;
$scope.btnSMSDisabled = true;
var time = 60;
var timer = null;
timer = $interval(function(){
time = time - 1;
$scope.btnSMSText = time+&#39;秒&#39;;
if(time == 0) {
$interval.cancel(timer);
$scope.btnSMSDisabled = false;
$scope.btnSMSText = &#39;重新获取&#39;;
}
}, 1000);
}
}, function errorCallback(response) {
console.log(response.data);
});
}
// 验证短信验证码
$scope.next = function(){
if(!$scope.checkOver){
console.log(&#39;未通过验证&#39;);
return;
}
var param = {
mobile: $scope.mobile,
code: $scope.SMSCode
};
$http({
method:&#39;POST&#39;,
url:&#39;/owner-bd/index.php/Home/SMS/checkSMSCode&#39;,
//url: &#39;/owner-fd/mock/common.json&#39;,
headers:{
&#39;Content-Type&#39;:&#39;application/x-www-form-urlencoded&#39;
},
dataType: &#39;json&#39;,
data: $httpParamSerializer(param)
}).then(function successCallback(response) {
console.log(response.data);
if(response.data.code == &#39;0&#39;){
$scope.isShow1 = false;
$scope.isShow2 = true;
}
}, function errorCallback(response) {
console.log(response.data);
});
}
// 刷新图片验证码
$scope.refresh = function(){
$scope.picCodeUrl = &#39;/owner-bd/index.php/Home/CheckCode/getPicCode?&#39;+Math.random();
}
});

##Optimization

The security of the above code is not very good. We can use tools to bypass front-end verification. In order to avoid this problem, you can add session value to mark in the checkPicCode and checkSMSCode functions.

$_SESSION['checkPicCode'] = true;
$_SESSION['checkSMSCode'] = true;

In the last step, when adding a user to the database, first verify whether both session values ​​are true, and then add them when both are true.

Results

Postscript

Codes that may be useful in the future:

echo json_encode($_SESSION);// 打印出session中的数据
echo session_id();// 打印当前session的id

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Analysis of the method of realizing paging function in thinkPHP5

About using the thinkPHP framework to realize the function of unlimited reply to comments Code

Functional code for logging in, registering, and retrieving passwords under the thinkphp framework

##

The above is the detailed content of About the functional code of Thinkphp to implement SMS verification registration. For more information, please follow other related articles on the PHP Chinese website!