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);
};
}));