手機注冊再國內(nèi)非常流行，基本上是個商業(yè)類型的網(wǎng)站，都要求用手機號注冊登錄，或者提供手機號碼注冊登錄的選項。這種行為是否侵犯個人隱私我們按下不談，今天我們只聊使用 WordPress開發(fā)短信注冊登錄的方法。手機短信驗證注冊登錄的實現(xiàn)其實很簡單，沒做過的朋友可能會覺得需要處理的邏輯太多，還沒開始嘗試就退縮了。其實整合注冊驗證過程中，最麻煩的是短信接口的對接，比較常用的短信接口還好說，官方都提供的有 SDK 和代碼供參考，也可以使用下面介紹的短信發(fā)送庫。如果遇到非主流的接口就郁悶了，接口文檔簡單得要命，接口實現(xiàn)也非常糟糕，耐心不夠就調(diào)試不過去。吐槽的話少說，下面轉入正題。

首先是驗證短信服務接口

短信接口是必需的，沒有接口就談不上技術實現(xiàn)，至于使用哪家的接口。要看選擇時更看中那方面的因素，接口的穩(wěn)定性，靈活性，價格等都是需要考慮的。下面的表格是“可能是目前最聰明、優(yōu)雅的php短信發(fā)送庫 PhpSms” 整理的國內(nèi)常用的幾個短信服務商，供大家參考。

發(fā)送及驗證短信后端代碼實現(xiàn)

發(fā)送短信之前，我們肯定要生成一個隨機的驗證碼，通過短信發(fā)送驗證碼的同時，也吧驗證碼保存到數(shù)據(jù)庫里，供驗證時對比，判斷驗證碼是否正確。下面是我在做一個網(wǎng)站注冊登錄的時候，發(fā)送代碼的簡單邏輯，大家可以參考一下。

下面的代碼中需要注意兩點：一是在發(fā)送驗證碼之前，先保存驗證碼數(shù)據(jù)庫中，以免驗證碼發(fā)出去了，數(shù)據(jù)庫卻保存失敗了，這時候就算用戶收到了短信驗證碼，去驗證的時候也是失敗的，如果保存數(shù)據(jù)庫失敗，直接提示一個發(fā)送失敗的消息就可以了，不要再發(fā)送短信造成浪費；二是保存數(shù)據(jù)庫的時候，需要考慮用戶沒有收到短信，重新發(fā)送的情況，這個時候是更新數(shù)據(jù)庫中的記錄，而不是新建，如果是新建，短信驗證記錄就重復了，驗證短信的時候，很可能獲取的是上一條驗證記錄，用戶使用當前收到的驗證碼驗證的時候，也是驗證通不過的。

其實下面的驗證邏輯里面，還卻少一條手機號碼正確性的驗證，由于是后來加上的，就不再粘貼了。

/**
 * 發(fā)送手機驗證碼
 */
new Dispatch( [
'wizhi/get_phone_code' => function ( $request ) {

   $phone = isset( $_POST[ 'phone' ] ) ? $_POST[ 'phone' ] : false;

   if ( $phone ) {

      // 生成隨機驗證碼
      $phone_code = str_pad( mt_rand( 1, 99999 ), 6, '0', STR_PAD_LEFT );

      // 先創(chuàng)建數(shù)據(jù)庫記錄，再發(fā)送短信，
      // 用 findOrCreate 而不是直接 create 密碼發(fā)送失敗后重試時，創(chuàng)建重復記錄導致驗證失敗
      $code       = R::findOrCreate( CODES, [ 'phone' => $phone ] );
      $code->code = $phone_code;

      $success = R::store( $code );

      // 數(shù)據(jù)庫記錄創(chuàng)建成功后再發(fā)送短信，否則就不用發(fā)短信了，發(fā)了也驗證不了
      $sms = false;
      if ( $success ) {
         $sms = send_sms( $phone, $phone_code );
      } else {
         $msg = [ 
            'success' => 1, 
            'message' => '驗證短信發(fā)送失敗，請重試', 
         ];
      }

      if ( $sms ) {
         $msg = [
            'success' => 1,
            'message' => '驗證短信已發(fā)送',
         ];
      } else {
         $msg = [
            'success' => 1,
            'message' => '驗證短信發(fā)送失敗，請重試',
         ];
      }

   } else {
      $msg = [
         'success' => 0,
         'message' => '請輸入正確的手機號碼',
      ];
   }

   wp_send_json( $msg );

},

] );

接收了正確的請求之后，上面的路由返回的是一個 JSON 格式的消息字符串，我們可以在前端根據(jù)返回的字符串做進一步的處理，下面我們來看一下前端代碼的實現(xiàn)。

發(fā)的短信驗證碼的前端代碼實現(xiàn)

下面的代碼實現(xiàn)的就是一個點擊發(fā)送驗證碼之后，請求后端接口，發(fā)送短信給用戶的功能，發(fā)送驗證短信一分鐘之后，可以重新發(fā)送，需要注意的是計時器的觸發(fā)時機，要在成功發(fā)送了短信之后，才啟用計時器。否則用戶的手機填錯了，或者因為其他原因沒能發(fā)送短信的時候，用戶還要白等一分鐘，才能繼續(xù)發(fā)送短信。如果更嚴謹一點，可以加一個隨機驗證碼的機制，以防被惡意程序掃描到發(fā)送短信炸彈。

//timer處理函數(shù)
var InterValObj; //timer變量，控制時間
var count = 60; //間隔函數(shù)，1秒執(zhí)行
var curCount;//當前剩余秒數(shù)

/**
 * 設置計時器
 * @constructor
 */
function SetRemainTime() {
    if (curCount == 0) {
        window.clearInterval(InterValObj);//停止計時器
        $("#get_code").removeAttr("disabled");//啟用按鈕
        $("#get_code").val("重新發(fā)送");
    }
    else {
        curCount--;
        $("#get_code").val(curCount + "后重新獲取");
    }
}


/**
 * 發(fā)送短信驗證碼
 * @returns {boolean}
 */
$('#get_code').on('click', function (event, element) {
    event.preventDefault();

    // 向后臺發(fā)送處理數(shù)據(jù)
    $.ajax({
        method  : 'POST',
        url     : WizUrls.get_phone_code,
        dataType: "json",
        data    : {
            'phone': $('form#modal-register #user_login').val()
        },
        success : function (data) {
            if (data.success === 0) {
                $('form#modal-register div.status').removeClass('c-alert-success').addClass('c-alert c-alert-danger').html(data.message);
                return false;
            } else {
                // 驗證碼發(fā)送成功后，啟動計時器
                curCount = count;

                // 設置button效果，開始計時
                $(this).attr("disabled", "true");
                $(this).val(curCount + "后重新獲取");

                InterValObj = window.setInterval(SetRemainTime, 1000); //啟動計時器，1秒執(zhí)行一次

                $('form#modal-register div.status').removeClass('c-alert-danger').addClass('c-alert c-alert-success').html(data.message);
                return true;
            }
        }
    });

    return false;
});

發(fā)送注冊登錄驗證短信之后，前端后段的實現(xiàn)都有了，最后就是實現(xiàn)用戶注冊或登錄了，這一步就是比較常規(guī)的操作了，根據(jù)用戶的手機號，從數(shù)據(jù)庫中取出驗證碼，和用戶提交過來的驗證碼比對，如果一致，說明驗證碼正確，進行下一步的處理；如果不一致，說明驗證碼錯誤，提示用戶驗證碼錯誤，讓用戶修正或者重新發(fā)送驗證碼。