雲之訊---短信接收驗證碼

1.首先，先去註冊，登錄後下載本身的SDK  文件內容以下 有三個php一個html

 

2.下載了SDK先去讀取文檔內容  進行查找本身的

accountsid（開發者控制檯首頁上的Account Sid）
token（開發者控制檯首頁上的Auth Token）
appid（應用的ID，可在開發者控制檯內的短信產品下查看）
templateid（模板id）

3.我用的TP5框架 若是根據文檔還有它的文件位置走，感受忒麻煩

而後我進行了更改方式方法進行操做，把severSid裏面的東西和smsyzm.php裏面的東西同時拿到了我獲取驗證碼方法內，而後就少引用了一個php文件，兩個顏色合二爲一，接收驗證碼訪問此方法

public function smsyzm(){
    //載入ucpass類
    require_once('/../../../thinkphp/Ucpaas.php');
    //require_once('/../../../thinkphp/serverSid.php');

    //初始化必填
    //填寫在開發者控制檯首頁上的Account Sid
    $options['accountsid']='********';
    //填寫在開發者控制檯首頁上的Auth Token
    $options['token']='*********';
    //初始化 $options必填

    $appid = "*******";   //應用的ID，可在開發者控制檯內的短信產品下查看
    $templateid = "*******";   //驗證碼模板  //可在後臺短信產品→選擇接入的應用→短信模板-模板ID，查看該模板ID
    //$templateid = "*******"; //通知模板   //可在後臺短信產品→選擇接入的應用→短信模板-模板ID，查看該模板ID


    //驗證碼
    $param = mt_rand(100000,999999);
    //$param = $_POST['yzm']; //多個參數使用英文逗號隔開（如：param=「a,b,c」），如爲參數則留空
    //電話號碼
    $mobile = $_POST['yzmtel'];
    $uid = "";

    $ucpass = new \Ucpaas($options);
    //70字內（含70字）計一條，超過70字，按67字/條計費，超過長度短信平臺將會自動分割爲多條發送。分割後的多條短信將按照具體佔用條數計費。
    //$ucpass = new \Ucpaas();
    //dump($ucpass->SendSms($appid,$templateid,$param,$mobile,$uid));
    //須要打印東西在數組裏面增長   進入這個SendSms方法裏面
    return $ucpass->SendSms($appid,$templateid,$param,$mobile,$uid);
}

4.html顯示

<!--電話號碼 驗證碼 雲之訊-->
<table class="table table-bordered table-hover">
<div class="input-group" style="margin-top:6px;">
　　<input type="text" id="yzmtel" class="form-control" name="yzmtel" value="" placeholder="電話號碼" />
　　<span class="input-group-btn">
　　　<a href="javascript:void(0);" class="btn btn-primary" onclick="yzm()"><i class="fa fa-search"></i> 接收驗證碼</a>

　　</span>

　　<input type="text" id="yzm" class="form-control" name="yzm" value="" placeholder="驗證碼" style="margin-left: 3%;" yzm=""/>
　　　　<span class="input-group-btn">
　　　　<a href="javascript:search();" class="btn btn-primary"><i class="fa fa-search"></i> 提交</a></span>

</div>

</table>

5.JS

<script type="text/javascript">

//填電話獲取驗證碼
function yzm () {
$.post('{:url("控制器獲取方法名接收驗證碼")}',

{yzmtel:$('#yzmtel').val()},
function ( data ) {
if ( data ) {
console.log(data);
$('#yzm').attr('yzm',data.yzm);
} else {
console.log('親，您輸入的電話號碼有誤哦~請從新輸入！！！');
}
});
}

</script>

 

這個獲取驗證碼工序就完成了！！！若是還想防重複提交，請往下走......

 

我把上面的a標籤換成了input框，方便顯示倒計時

<table class="table table-bordered table-hover">
    <div class="input-group" style="margin-top:6px;">
        <input type="text" id="yzmtel" class="form-control" name="yzmtel" value="" placeholder="電話號碼" />
        <input type="button" class="btn btn-primary" id="getting1" value="點擊獲取驗證碼">

　　　　　<input type="text" id="yzm" class="form-control" name="yzm" value="" placeholder="驗證碼" style="margin-left: 3%;" yzm=""/>
        <span class="input-group-btn">
    　　 <a href="javascript:search();" class="btn btn-primary"><i class="fa fa-search"></i> 提交</a></span>

     </div>
</table>

JS裏面進行獲取id    另外 還須要引用一個js   jquery.cookie.js

<!--//填電話獲取驗證碼-->
<script type="text/javascript">
    $('#getting1').click(function(){
        $.post('{:url("控制器獲取方法名接收驗證碼")}',
            {yzmtel:$('#yzmtel').val()},
            function ( data ) {
                if ( data ) {
                    console.log(data);
                    $('#yzm').attr('yzm',data.yzm);
                } else {
                    console.log('親，您輸入的電話號碼有誤哦~請從新輸入！！！');
                }
            });
    });
</script>

<!--//防止重複提交電話號碼獲取驗證碼方法-->
<script>
    $(function(){
        /*仿刷新：檢測是否存在cookie*/
        if($.cookie("captcha")){
            var count = $.cookie("captcha");
            var btn = $('#getting1');
            btn.val(count+'秒後可從新獲取').attr('disabled',true).css('cursor','not-allowed');
            var resend = setInterval(function(){
                count--;
                if (count > 0){
                    btn.val(count+'秒後可從新獲取').attr('disabled',true).css('cursor','not-allowed');
                    $.cookie("captcha", count, {path: '/', expires: (1/86400)*count});
                }else {
                    clearInterval(resend);
                    btn.val("獲取驗證碼").removeClass('disabled').removeAttr('disabled style');
                }
            }, 1000);
        }
        /*點擊改變按鈕狀態，已經簡略掉ajax發送短信驗證的代碼*/
        $('#getting1').click(function(){
            /*判斷手機號*/
            var prosd = $('#yzmtel').val();
            if(prosd && /^1[3|4|5|8]\d{9}$/.test(prosd)) {
                var btn = $(this);
                var count = 60;
                var resend = setInterval(function () {
                    count--;
                    if (count > 0) {
                        btn.val(count + "秒後可從新獲取");
                        $.cookie("captcha", count, {path: '/', expires: (1 / 86400) * count});
                    } else {
                        clearInterval(resend);
                        btn.val("獲取驗證碼").removeAttr('disabled style');
                    }
                }, 1000);
                btn.attr('disabled', true).css('cursor', 'not-allowed');
            }
        });
    });
</script>

jquery.cookie.js 代碼以下

/*! * jQuery Cookie Plugin v1.4.1 * https://github.com/carhartl/jquery-cookie * * Copyright 2013 Klaus Hartl * Released under the MIT license */(function (factory) {   if (typeof define === 'function' && define.amd) {      // AMD      define(['jquery'], factory);   } else if (typeof exports === 'object') {      // CommonJS      factory(require('jquery'));   } else {      // Browser globals      factory(jQuery);   }}(function ($) {   var pluses = /\+/g;   function encode(s) {      return config.raw ? s : encodeURIComponent(s);   }   function decode(s) {      return config.raw ? s : decodeURIComponent(s);   }   function stringifyCookieValue(value) {      return encode(config.json ? JSON.stringify(value) : String(value));   }   function parseCookieValue(s) {      if (s.indexOf('"') === 0) {         // This is a quoted cookie as according to RFC2068, unescape...         s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');      }      try {         // Replace server-side written pluses with spaces.         // If we can't decode the cookie, ignore it, it's unusable.         // If we can't parse the cookie, ignore it, it's unusable.         s = decodeURIComponent(s.replace(pluses, ' '));         return config.json ? JSON.parse(s) : s;      } catch(e) {}   }   function read(s, converter) {      var value = config.raw ? s : parseCookieValue(s);      return $.isFunction(converter) ? converter(value) : value;   }   var config = $.cookie = function (key, value, options) {      // Write      if (value !== undefined && !$.isFunction(value)) {         options = $.extend({}, config.defaults, options);         if (typeof options.expires === 'number') {            var days = options.expires, t = options.expires = new Date();            t.setTime(+t + days * 864e+5);         }         return (document.cookie = [            encode(key), '=', stringifyCookieValue(value),            options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE            options.path    ? '; path=' + options.path : '',            options.domain  ? '; domain=' + options.domain : '',            options.secure  ? '; secure' : ''         ].join(''));      }      // Read      var result = key ? undefined : {};      // To prevent the for loop in the first place assign an empty array      // in case there are no cookies at all. Also prevents odd result when      // calling $.cookie().      var cookies = document.cookie ? document.cookie.split('; ') : [];      for (var i = 0, l = cookies.length; i < l; i++) {         var parts = cookies[i].split('=');         var name = decode(parts.shift());         var cookie = parts.join('=');         if (key && key === name) {            // If second argument (value) is a function it's a converter...            result = read(cookie, value);            break;         }         // Prevent storing a cookie that we couldn't decode.         if (!key && (cookie = read(cookie)) !== undefined) {            result[name] = cookie;         }      }      return result;   };   config.defaults = {};   $.removeCookie = function (key, options) {      if ($.cookie(key) === undefined) {         return false;      }      // Must not alter options, thus extending a fresh object...      $.cookie(key, '', $.extend({}, options, { expires: -1 }));      return !$.cookie(key);   };}));