阿里大於驗證碼功能

時間 2019-11-11

原文原文鏈接

最近在作一個商城的項目，其中註冊、找回密碼、換綁手機等功能都須要用到驗證碼，考慮到上線的安全問題，我決定用手機驗證碼來提升安全性。通過各大短信平臺進行比較後，選擇了阿里大於，一個阿里巴巴的雲通訊平臺，下面我將此次開發經驗和遇到的一些問題分享出來。php

1.登陸平臺阿里大於ajax

2.登錄以後咱們能夠看到資費，使用場景等，在進入正題以前咱們須要一些準備工做，首先咱們先了解下短信的請求參數，在這裏咱們須要注意的是sms_param這個參數，在接下來咱們申請短信模板的時候會用到
thinkphp

3.相應參數，對待返回值咱們記住最基本的true or false 便可
json

4.瞭解完公共參數，接下來咱們進入正題，首先咱們得配置短信簽名和配置短信模板，短信簽名出如今短信開頭，注意短信模板，這裏將用到上文提示的sms_param參數
安全

5.同時，在其網站上下載好SDK，下圖展現的是個人存放位置，使用的是thinkphp框架，其餘的開發環境文件的存放位置在官網上有詳細說明
session

6.接下來是項目後臺的配置，其中appkey,secret在你完成上述申請以後能夠在我的管理中心查看app

class DuanXinController extends Controller {
    public function index()
    {
$appkey = "...";//你的App key
$secret = "...";//你的App Secret:
import('Org.taobao.top.TopClient');
import('Org.taobao.top.ResultSet');
import('Org.taobao.top.RequestCheckUtil');
import('Org.taobao.top.TopLogger');
import('Org.taobao.top.request.AlibabaAliqinFcSmsNumSendRequest');
//將須要的類引入，而且將文件名改成原文件名.class.php的形式
$c = new \TopClient;
$c->appkey = $appkey;
$c->secretKey = $secret;
$req = new \AlibabaAliqinFcSmsNumSendRequest;
$req->setExtend("123456");//肯定發給的是哪一個用戶，參數爲用戶id
$req->setSmsType("normal");
session_start();
$verifycode = strval(rand(1000,9999));
$_SESSION['verifycode'] = $verifycode;
$userStatus=0;
/*
進入阿里大魚的管理中心找到短信簽名管理，輸入已存在簽名的名稱，這裏是身份驗證。
*/
$req->setSmsFreeSignName("山水優品");
$smsParams = [
    'code' => $verifycode,
    'product' => '...'
];
$req->setSmsParam(json_encode($smsParams));
//$req->setSmsParam("{'code':numfour() 'product':'山水優品'}"); 
//這裏設定的是發送的短信內容：驗證碼${code}，您正在進行${product}身份驗證，打死不要告訴別人哦！」
$req->setRecNum(...);//參數爲用戶的手機號碼
$req->setSmsTemplateCode("SMS_16670740");
$resp = $c->execute($req);
//var_dump($resp);這裏是用來打印返回結果
if($resp->result->success)
    {
        $userStatus=1;
    }
    else
    {
        $userStatus=0;
    }
    echo $userStatus;
}
// 檢查驗證碼是否正確
function checkcode(){
    session_start();
    $verifycode = $_SESSION['verifycode'];
    $inputcode = I('post.code');
    $checkstatus = 0;
    if ($inputcode == $verifycode) {
        $checkstatus = 1;
    }else{
        $checkstatus = 0;
    }
    echo $checkstatus;
}

7.下面的代碼是項目前臺的Ajax請求部分：框架

send.onclick = function() {
                var oldTel = document.getElementById('oldTel').value;
                var that = this;
                var times = 60;
                this.disabled = true;
                timer1 = setInterval(function() {
                    times--;
                    that.value = times + "秒後重試";
                    if (times <= 0) {
                        that.disabled = false;
                        that.value = "發送驗證碼";
                        clearInterval(timer1);
                        times = 60;
                    }
                }, 1000);
                $.ajax({
                url: "{:U('DuanXin/index')}",
                type: "post",
                data: {
                    'name':oldTel,
                },
                    success: function(responseText, status, xhr) {
                        if (status == 'success') {
                            if (responseText == 1) {
                                return true;
                            } else {
                                return false;
                            }
                        } else {
                            return false;
                        }
    
                    },
    
                    error: function() {
                        return false;
                    },
    
                    timeout: 1000 * 60,
            });
}

這裏的按鈕加入了一個簡單的倒計時功能，即點擊發送後60s內沒法點擊按鈕；post

至此第一次使用短信驗證API的經歷結束！
--END--網站