php如何利用雲片網實現簡訊驗證碼功能

這篇文章主要介紹了php利用雲片網實現簡訊驗證碼功能的範例程式碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

本文將以php舉例，介紹網頁簡訊驗證碼功能的實現。

在眾多的第三方簡訊服務商中我選擇了雲片網這個簡訊服務商，本文也將儘可能利用最簡單的方式去協助廣大開發人員解決簡訊驗證碼功能模組的實現。

再次之前我也參考了大部分網上的部落格等，大多數都是把雲片網的demo原封不動搬上去，對於我這個前端人員來說，根本毫無頭緒，故此我將細緻的講解如何操作，以及獻上我的源碼。

我的商務程序就是通過點擊發送驗證碼這個按鈕，觸發一個ajax請求事件，將手機號發送到後台，後台產生驗證碼發送到手機端，並返回這個驗證碼給前台進行驗證碼的驗證。

請求的php後端代碼如下

post.php

<?phpheader("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串連如下···連結

index.html

如下代碼是進行點擊並發送ajax請求，將請求的驗證碼並儲存到localStorage中

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

進行驗證碼驗證

var code = JSON.parse(localStorage.getItem('code'))if($('#code').val() != code ){  layer.msg('驗證碼輸入錯誤');  return false; }