laravel-sms 實現阿里雲手機傳送簡訊驗證碼及校驗

第一次做手機簡訊驗證碼，沒有經驗，學習好多教程，實現了這個功能，如果各位前輩有比較間潔高效的實現方式可以私信我，或者評論。希望我總結的可以幫助到需要的人。

當前版本

• PHP 7.3
• laravel 8
• Laravel-sms 2.6

• 以阿里云為例配置資訊
  購買阿里雲短息服務之後，會有一套簡單的申請教程，順著填資訊就行，然後就是等待稽核,稽核大概是1-2兩個小時吧，反正我稽核的時候是這樣一個階段，稽核內容要按標準填，會被打回重新填。

• 以下稽核透過之後的教程

  簽名

  

模板

• 需要用到的資訊
  accessKeyId
  accessKeySecret
  signName

• accessKeyId、accessKeySecret的位置如下

• 建議使用子使用者，為什麼不直接使用AccessKey，因為什麼看圖4裡面的《黃黃黃》的那些字，子使用者可以為其分配一定的許可權，比較安全。用就對了別那麼多疑惑。記得儲存 accessKeyId 和 accessKeySecret，不儲存用到的時候特別難受又得驗證碼這些，特別是驗證目標手機號碼還不是你自己的，強烈建議儲存。

新增許可權

• 安裝laravel-sms

  composer require toplan/laravel-sms:~2.6

  我用的是2.6，現在應該有比較新的，感興趣自己去研究。

• 安裝完成之後，在config/app.php檔案中providers陣列裡加入

        //阿里雲簡訊服務
        Toplan\PhpSms\PhpSmsServiceProvider::class,
        Toplan\Sms\SmsManagerServiceProvider::class,

  在config/app.php檔案中的aliases陣列裡加入

  'PhpSms' =>  Toplan\PhpSms\Facades\Sms::class,
  'SmsManager' =>  Toplan\Sms\Facades\SmsManager::class,

• 生成配置檔案，執行以下命令，選取自己要註冊的服務就註冊兩個，找到就註冊。

  php artisan vendor:publish

  註冊完之後會在config配置檔案裡面生成 phpsms.php 和 laravel-sms.php

• 配置引數
  開啟 phpsms.php 配置

注意：不是阿里大魚，別配置錯了

開啟 laravel-sms.php 找到 templates 陣列

到這裡就配置完了。

• 上程式碼
  新建一個 .js 檔案，名字隨便起，想起拼音也行，把下面 js 放裡面。

  (function($){
    $.fn.sms = function(options) {
        var self = this;
        var btnOriginContent, timeId;
        var opts = $.extend(true, {}, $.fn.sms.defaults, options);
        self.on('click', function (e) {
            btnOriginContent = self.html() || self.val() || '';
            changeBtn(opts.language.sending, true);
            send();
        });
  
        function send() {
            var url = getUrl();
            var requestData = getRequestData();
            $.ajax({
                url     : url,
                type    : 'post',
                data    : requestData,
                success : function (data) {
                    if (data.success) {
                        timer(opts.interval);
                    } else {
                        changeBtn(btnOriginContent, false);
                        opts.notify.call(null, data.message, data.type);
                    }
                },
                error   : function(xhr, type){
                    changeBtn(btnOriginContent, false);
                    opts.notify.call(null, opts.language.failed, 'request_failed');
                }
            });
        }
  
        function getUrl() {
            return opts.requestUrl ||
                '/laravel-sms/' + (opts.voice ? 'voice-verify' : 'verify-code')
        }
  
        function getRequestData() {
            var requestData = { _token: opts.token || '' };
            var data = $.isPlainObject(opts.requestData) ? opts.requestData : {};
            $.each(data, function (key) {
                if (typeof data[key] === 'function') {
                    requestData[key] = data[key].call(requestData);
                } else {
                    requestData[key] = data[key];
                }
            });
  
            return requestData;
        }
  
        function timer(seconds) {
            var btnText = opts.language.resendable;
            btnText = typeof btnText === 'string' ? btnText : '';
            if (seconds < 0) {
                clearTimeout(timeId);
                changeBtn(btnOriginContent, false);
            } else {
                timeId = setTimeout(function() {
                    clearTimeout(timeId);
                    changeBtn(btnText.replace('{{seconds}}', (seconds--) + ''), true);
                    timer(seconds);
                }, 1000);
            }
        }
  
        function changeBtn(content, disabled) {
            self.html(content);
            self.val(content);
            self.prop('disabled', !!disabled);
        }
    };
  
    $.fn.sms.defaults = {
        token       : null,
        interval    : 60,
        voice       : false,
        requestUrl  : null,
        requestData : null,
        notify      : function (msg, type) {
            alert(msg);
        },
        language    : {
            sending    : '簡訊傳送中...',
            failed     : '請求失敗，請重試',
            resendable : '{{seconds}} 秒後再次傳送'
        }
    };
  })(window.jQuery || window.Zepto);

在你的專案裡面引入剛才新建的 js 檔案，加入以下程式碼

<script>
        $('#send-code').sms({
            //laravel csrf token
            token: "{{csrf_token()}}",
            //請求間隔時間
            interval: 60,
            //請求引數
            requestData: {
                //手機號
                mobile: function () {
                    var phone = $('#phone').val()// 輸入的手機號，要發給誰

                    return phone;
                },
                //手機號的檢測規則
                // mobile_rule : 'mobile_required'
            }
        });
    </script>

這樣就能傳送簡訊了

我是直接在 laravel-sms.php 裡面對生成的驗證碼進行快取，然後再需要的地方取出來進行校驗。程式走到這裡，就傳送成功了。驗證碼也就確定了，我就在這裡快取了。還有就是如果為該手機號傳送簡訊到了上限，就會傳送失敗。

這樣校驗邏輯你自己也就有了方向了。
O 了

本作品採用《CC 協議》，轉載必須註明作者和本文連結