我在在眾多的第三方短信服務商里選擇了雲片網這個短信服務商，我也會盡可能利用最簡單的方式去幫助廣大開發者解決短信驗證碼功能模塊的實現。
再次之前我也參考了大部分網上的博客等，大多數都是把雲片網的demo原封不動搬上去，對於我這個前端人員來說，根本毫無頭緒，故此我將細致的講解如何操作，以及獻上我的源碼。
我的業務流程就是通過點擊發送驗證碼這個按鈕，觸發一個ajax請求事件，將手機號發送到后台，后台生成驗證碼發送到手機端，並返回這個驗證碼給前台進行驗證碼的驗證。
請求的php后端代碼如下
post.php
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
|
<?php
header(
"Content-Type:text/html;charset=utf-8"
);
$apikey
=
"xxxxxxxxxxxxxxx"
;
//修改為您的apikey(https://www.yunpian.com)登錄官網后獲取
$mobile
=
$_POST
[
'mobile'
];
//獲取傳入的手機號
// $mobile = "xxxxxxxxxxx"; //請用自己的手機號代替
$num
= rand(1000,9999);
//隨機產生四位數字的驗證碼
setcookie(
'shopCode'
,
$num
);
$text
=
"【蒙羊羊】您的驗證碼是"
.
$num
.
"。"
;
$ch
= curl_init();
/* 設置驗證方式 */
curl_setopt(
$ch
, CURLOPT_HTTPHEADER,
array
(
'Accept:text/plain;charset=utf-8'
,
'Content-Type:application/x-www-form-urlencoded'
,
'charset=utf-8'
));
/* 設置返回結果為流 */
curl_setopt(
$ch
, CURLOPT_RETURNTRANSFER, true);
/* 設置超時時間*/
curl_setopt(
$ch
, CURLOPT_TIMEOUT, 10);
/* 設置通信方式 */
curl_setopt(
$ch
, CURLOPT_POST, 1);
curl_setopt(
$ch
, CURLOPT_SSL_VERIFYPEER, false);
// 取得用戶信息
$json_data
= get_user(
$ch
,
$apikey
);
$array
= json_decode(
$json_data
,true);
// echo '<pre>';print_r($array);
// 發送短信
$data
=
array
(
'text'
=>
$text
,
'apikey'
=>
$apikey
,
'mobile'
=>
$mobile
);
$json_data
= send(
$ch
,
$data
);
$array
= json_decode(
$json_data
,true);
// echo '<pre>';print_r($array);
// 發送模板短信
// 需要對value進行編碼
$data
=
array
(
'tpl_id'
=>
'1'
,
'tpl_value'
=> (
'#code#'
).
'='
.urlencode(
$num
).
'&'
.urlencode(
'#company#'
).
'='
.urlencode(
'蒙羊羊'
),
'apikey'
=>
$apikey
,
'mobile'
=>
$mobile
);
// print_r ($data);
$json_data
= tpl_send(
$ch
,
$data
);
$array
= json_decode(
$json_data
,true);
echo
$num
;
// 發送語音驗證碼
// $data=array('code'=>$num,'apikey'=>$apikey,'mobile'=>$mobile);
// $json_data =voice_send($ch,$data);
// $array = json_decode($json_data,true);
// echo $num;
// 發送語音通知，務必要報備好模板
/*
模板： 課程#name#在#time#開始。 最終發送結果： 課程深度學習在14:00開始
*/
$tpl_id
=
'xxxxxxx'
;
//修改為你自己后台報備的模板id
$tpl_value
= urlencode(
'#time#'
).
'='
.urlencode(
$num
).
'&'
.urlencode(
'#name#'
).
'='
.urlencode(
'蒙羊羊'
);
$data
=
array
(
'tpl_id'
=>
$tpl_id
,
'tpl_value'
=>
$tpl_value
,
'apikey'
=>
$apikey
,
'mobile'
=>
$mobile
);
$json_data
= notify_send(
$ch
,
$data
);
$array
= json_decode(
$json_data
,true);
// echo $num;
curl_close(
$ch
);
/************************************************************************************/
//獲得賬戶
function
get_user(
$ch
,
$apikey
){
curl_setopt (
$ch
, CURLOPT_URL,
'https://sms.yunpian.com/v2/user/get.json'
);
curl_setopt(
$ch
, CURLOPT_POSTFIELDS, http_build_query(
array
(
'apikey'
=>
$apikey
)));
$result
= curl_exec(
$ch
);
$error
= curl_error(
$ch
);
checkErr(
$result
,
$error
);
return
$result
;
}
function
send(
$ch
,
$data
){
curl_setopt (
$ch
, CURLOPT_URL,
'https://sms.yunpian.com/v2/sms/single_send.json'
);
curl_setopt(
$ch
, CURLOPT_POSTFIELDS, http_build_query(
$data
));
$result
= curl_exec(
$ch
);
$error
= curl_error(
$ch
);
checkErr(
$result
,
$error
);
return
$result
;
}
function
tpl_send(
$ch
,
$data
){
curl_setopt (
$ch
, CURLOPT_URL,
'https://sms.yunpian.com/v2/sms/tpl_single_send.json'
);
curl_setopt(
$ch
, CURLOPT_POSTFIELDS, http_build_query(
$data
));
$result
= curl_exec(
$ch
);
$error
= curl_error(
$ch
);
checkErr(
$result
,
$error
);
return
$result
;
}
function
voice_send(
$ch
,
$data
){
curl_setopt (
$ch
, CURLOPT_URL,
'http://voice.yunpian.com/v2/voice/send.json'
);
curl_setopt(
$ch
, CURLOPT_POSTFIELDS, http_build_query(
$data
));
$result
= curl_exec(
$ch
);
$error
= curl_error(
$ch
);
checkErr(
$result
,
$error
);
return
$result
;
}
function
notify_send(
$ch
,
$data
){
curl_setopt (
$ch
, CURLOPT_URL,
'https://voice.yunpian.com/v2/voice/tpl_notify.json'
);
curl_setopt(
$ch
, CURLOPT_POSTFIELDS, http_build_query(
$data
));
$result
= curl_exec(
$ch
);
$error
= curl_error(
$ch
);
checkErr(
$result
,
$error
);
return
$result
;
}
function
checkErr(
$result
,
$error
) {
if
(
$result
=== false)
{
echo
'Curl error: '
.
$error
;
}
else
{
//echo '操作完成沒有任何錯誤';
}
}
?>
|
這個php后台是我在官方提供的demo上進行修改的，刪除了語音驗證這個功能，只保留了短信驗證，並將返回給前端的數據只保留了四位數字的驗證碼，方便前端進行驗證碼的驗證。
官方原demo連接如下···鏈接
|
1
|
index.html
|
如下代碼是進行點擊並發送ajax請求，將請求的驗證碼並保存到localStorage中
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
$.ajax({
type:
"post"
,
url:
"post.php"
,
//后台代碼文件名
data: {
mobile:$(
'#phone'
).val()
//獲取輸入的手機號
},
// dataType: "json",
success:
function
(data){
console.log(data);
layer.msg(
'驗證碼發送成功，請注意查收！'
);
localStorage.setItem(
'code'
, JSON.stringify(data))
},
error:
function
(err){
console.log(err);
}
});
|
進行驗證碼驗證
|
1
2
3
4
5
|
var
code = JSON.parse(localStorage.getItem(
'code'
))
if
($(
'#code'
).val() != code ){
layer.msg(
'驗證碼輸入錯誤'
);
return
false;
}
|