登録機能は、多くの Web サイトにとって必須の機能です。登録機能がある場合は、SMS 認証コードが必要です。興味のある方は、thinkphp が SMS 認証登録機能を実装する方法について説明します。
序文
# SMS 認証コードは、登録時に必要になることがよくあります。この記事では、そのアイデアと具体的な実装について説明します。 SMS 検証プラットフォームは Yunpian を使用し、SMS 検証コードの生成には thinkphp を使用します。アイデア
1. ユーザーは携帯電話番号を入力し、SMS 確認コードの取得を要求します。 2. Thinkphp は SMS 検証コードを生成して保存し、他のパラメーターとともにリクエストを Yunpian に送信します。 3. Yunpian は、指定された携帯電話番号にテキスト メッセージ確認コードを送信します。 4. ユーザーは SMS 認証コードを入力します。 5. thinkphp は、検証コードが正しいかどうか、および検証コードの有効期限が切れているかどうかという 2 つの条件に基づいて検証に合格するかどうかを判断します。コードの実装
検証インターフェイスpostman を使用して、apikey、mobile、text の 3 つの必要なパラメータを入力します。
php は http/https リクエストを開始します
php の Curl 関数を使用して https リクエストを開始し、 apikey、mobile、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;
}ランダムな SMS 確認コードを生成します
4 桁のランダムな SMS を生成しますデフォルトコードによる確認コード。 #// 生成短信验证码
public function createSMSCode($length = 4){
$min = pow(10 , ($length - 1));
$max = pow(10, $length) - 1;
return rand($min, $max);
}統合
データベースに新しいテーブル sun_smscode を作成します:
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);
}
}
}
}
}SMS 確認コードの確認SMS 確認コードの有効期限が切れているかどうかを確認し、SMS 確認コードが正しいかどうかを確認します。
// 验证短信验证码是否有效
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;
}
}改善
SMS 爆撃を防ぐために、SMS 認証コードを要求するときに画像認証コードを追加する必要があります。
thinkphp には画像検証コードを生成する機能が用意されています。検証コードの生成、更新、検証を実装してみましょう。
イメージ検証コードの生成と更新
// 获取图片验证码，刷新图片验证码
public function getPicCode(){
$config = array(
'fontSize'=>30, // 验证码字体大小
'length'=>4, // 验证码位数
'useNoise'=>false, // 关闭验证码杂点
'expire'=>600
);
$Verify = new \Think\Verify($config);
$Verify->entry(2333);//2333是验证码标志
}これに対応する URL を想定します。 function http://localhost/owner-bd/index.php/Home/CheckCode/getPicCode とすると、画像検証コードのアドレスはこのURLとなり、ページ画像タグのsrc属性に入れることができます。
認証画像認証コード
// 验证验证码是否正确
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);
};
}上記の方法では、次の方法を使用しました。 thinkphp によって提供されます。 check メソッドの実装は非常に簡単です。ただし、検証の詳細を取得したい場合は、他に方法はありません。たとえば、認証コードが間違っている場合、認証コードがタイムアウトした、認証コードが間違って入力された、認証コードが使用されたなどの可能性があります。必要に応じて、thinkphp の検証コード クラスを書き換えたり、thinkphp の check メソッドを書き換えたりできます。
フロントエンドとバックエンドを実行するバックエンドの変更
検証画像検証コード関数
public function checkPicCode($picCode){
$verify = new \Think\Verify();
if($verify->check($picCode, 2333)){
return true;
}else{
return false;
};
}SMS 認証コードを取得する関数の先頭に、画像認証コードのみを呼び出す関数を追加します。検証に合格すると、リクエストは Yunpian に送信されます。
// 获取短信验证码
public function getSMSCode(){
$picCode = $_POST['picCode'];
if(!$this->checkPicCode($picCode)){
$result = array(
'code' => '1',
'ext' => '验证码错误，请重新输入'
);
echo json_encode($result,JSON_UNESCAPED_UNICODE);
return;
}
/*省略*/
}フロントエンド コア コード
<!--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('sunApp').controller('registerController', function ($scope,$http,$httpParamSerializer,$state,$interval) {
$scope.picCodeUrl = '/owner-bd/index.php/Home/CheckCode/getPicCode';
$scope.isShow1 = true;
$scope.isShow2 = false;
$scope.btnSMSText = '获取验证码';
$scope.btnSMSDisabled = false;
$scope.checkOver = false;
// 获取短信验证码
$scope.getSMSCode = function(){
var param = {
mobile: $scope.mobile,
picCode: $scope.picCode
};
$http({
method:'POST',
url:'/owner-bd/index.php/Home/SMS/getSMSCode',
//url: '/owner-fd/mock/common.json',
headers:{
'Content-Type':'application/x-www-form-urlencoded'
},
dataType: 'json',
data: $httpParamSerializer(param)
}).then(function successCallback(response) {
console.log(response.data);
if(response.data.code == '0'){
$scope.checkOver = true;
$scope.btnSMSDisabled = true;
var time = 60;
var timer = null;
timer = $interval(function(){
time = time - 1;
$scope.btnSMSText = time+'秒';
if(time == 0) {
$interval.cancel(timer);
$scope.btnSMSDisabled = false;
$scope.btnSMSText = '重新获取';
}
}, 1000);
}
}, function errorCallback(response) {
console.log(response.data);
});
}
// 验证短信验证码
$scope.next = function(){
if(!$scope.checkOver){
console.log('未通过验证');
return;
}
var param = {
mobile: $scope.mobile,
code: $scope.SMSCode
};
$http({
method:'POST',
url:'/owner-bd/index.php/Home/SMS/checkSMSCode',
//url: '/owner-fd/mock/common.json',
headers:{
'Content-Type':'application/x-www-form-urlencoded'
},
dataType: 'json',
data: $httpParamSerializer(param)
}).then(function successCallback(response) {
console.log(response.data);
if(response.data.code == '0'){
$scope.isShow1 = false;
$scope.isShow2 = true;
}
}, function errorCallback(response) {
console.log(response.data);
});
}
// 刷新图片验证码
$scope.refresh = function(){
$scope.picCodeUrl = '/owner-bd/index.php/Home/CheckCode/getPicCode?'+Math.random();
}
});上記のコードのセキュリティはあまり良くありません。ツールを使用するとフロントエンド検証を回避できます。この問題を回避するには、checkPicCode 関数と checkSMSCode 関数でマークするセッション値を追加します。
$_SESSION['checkPicCode'] = true; $_SESSION['checkSMSCode'] = true;
追記
将来役に立つかもしれないコード:
echo json_encode($_SESSION);// 打印出session中的数据 echo session_id();// 打印当前session的id
thinkPHP でページング機能を実現する方法の分析5
thinkPHP フレームワークを使用した実現についてコメントに無制限に返信する機能 コード
thinkphp フレームワークでのログイン、登録、およびパスワードの取得のための機能コード
以上がSMS認証登録を実装するためのThinkphpの機能コードについての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
