今天 突然發神經想到要做一個發送手機驗證碼的功能,因為看到很多用戶注冊這個模塊都有手機驗證這個功能,於是乎,俺就上網查了很多資料,整理了一下,做了一個簡單的手機驗證碼實現功能。不過我用的是試用賬號,只可以發送30個短信,如果要更多的話,需要充值,這是我感到很遺憾的事情。下面跟着我來實現這個功能吧,大神勿噴哈。
1、首先,上互億無線注冊一個賬號,http://www.ihuyi.com/,注冊后你可以看到你的賬號參數信息:
2、使用VS創建一個空的Web應用程序:
注冊靜態頁面:index.html
1 <!doctype html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=gb2312" /> 5 <title>demo</title> 6 <style> 7 h3 { 8 display:block; 9 width:200px; 10 margin:30px auto; 11 text-align:center 12 } 13 table { 14 width:400px; 15 margin:10px auto; 16 17 } 18 19 #codeInput { 20 width:90px; 21 } 22 .la { 23 text-align:right 24 } 25 .control { 26 line-height:50px; 27 } 28 </style> 29 <script type="text/javascript" src="jquery.js"></script> 30 <script language="javascript"> 31 function get_mobile_code() { 32 33 var mobile = $("#mobile").val(); 34 if (!isMobile(mobile)) { 35 alert("手機號碼格式錯誤,請重新輸入"); 36 } 37 else { 38 $.get("Post.aspx", { mobile: jQuery.trim($("#mobile").val()) }, function (msg) { 39 //alert(jQuery.trim(unescape(msg)));//unescape:對已經使用escape()函數編碼的字符串msg 進行解碼 40 if (msg == "提交成功") { 41 RemainTime(); 42 } 43 else { 44 alert("手機驗證碼發送失敗"); 45 } 46 }); 47 } 48 49 }; 50 51 52 var iTime = 59; 53 var Account; 54 function RemainTime() { 55 document.getElementById("zphone").disabled = true; 56 var iSecond, sSecond = "", sTime = ""; 57 if (iTime >= 0) { 58 iSecond = parseInt(iTime % 60); 59 iMinute = parseInt(iTime / 60) 60 if (iSecond >= 0) { 61 if (iMinute > 0) { 62 sSecond = iMinute + "分" + iSecond + "秒"; 63 } else { 64 sSecond = iSecond + "秒"; 65 } 66 } 67 sTime = sSecond; 68 if (iTime == 0) { 69 clearTimeout(Account); 70 sTime = "獲取手機驗證碼"; 71 iTime = 59; 72 document.getElementById("zphone").disabled = false; 73 } else { 74 Account = setTimeout("RemainTime()", 1000); 75 iTime = iTime - 1; 76 } 77 } else { 78 sTime = "沒有倒計時"; 79 } 80 document.getElementById("zphone").value = sTime+"后重新獲取"; 81 } 82 83 //手機號碼驗證 84 function isMobile(s) { 85 var reg=/^((13[0-9])|(15[^4,\D])|(18[0-9]))\d{8}$/; 86 if (!reg.exec(s)) { 87 return false; 88 } 89 return true; 90 91 } 92 </script> 93 </head> 94 95 <body> 96 <form method="post"action="judgeData.aspx"> 97 <h3>發送手機驗證碼</h3> 98 <table> 99 <tr> 100 <td class="la"><label>手機:</label></td> 101 <td> 102 <input id="mobile" name="phone" type="text" required="required" /><span style="color:#FF0000"> *</span> 103 <input id="zphone" type="button" value=" 發送手機驗證碼 " onclick="get_mobile_code();"> 104 </td> 105 </tr> 106 <tr class="control"> 107 <td class="la"><label>驗證碼:</label></td> 108 <td><input type="text" name="captcha" id="codeInput" required="required" /></td> 109 </tr> 110 <tr> 111 <td></td> 112 <td><input type="reset" value="重置" /> 113 <input type="submit" value="提交"/></td> 114 </tr> 115 </table> 116 </form> 117 </body> 118 </html>
接收index.html Ajax過來的數據,並發送驗證碼到指定手機上:Post.aspx.cs
1 using System; 2 using System.Data; 3 using System.Configuration; 4 using System.Collections; 5 using System.IO; 6 using System.Net; 7 using System.Text; 8 using System.Web; 9 using System.Web.Security; 10 using System.Web.UI; 11 using System.Web.UI.WebControls; 12 using System.Web.UI.WebControls.WebParts; 13 using System.Web.UI.HtmlControls; 14 15 public partial class Post : System.Web.UI.Page 16 { 17 public static string PostUrl = ConfigurationManager.AppSettings["WebReference.Service.PostUrl"]; 18 protected void Page_Load(object sender, EventArgs e) 19 { 20 //定義你的賬號密碼(你在互億無線注冊的賬號密碼) 21 string account = "互億無線注冊的賬號"; 22 string password = "互億無線注冊的密碼";//密碼可以使用明文密碼或使用32位MD5加密 23 24 //獲取Ajax傳輸過來的手機號碼 25 string mobile = Request.QueryString["mobile"]; 26 27 //在1000-10000之間隨機獲取一個數值 作為你的 手機驗證碼 28 Random rad = new Random(); 29 int mobile_code = rad.Next(1000, 10000); 30 31 //定義發送至手機中顯示的信息 32 string content = "您的驗證碼是:" + mobile_code + " 。請不要把驗證碼泄露給其他人。"; 33 34 //將你的手機號碼存入Session中 35 Session["mobile"] = mobile; 36 37 //將你的手機驗證碼存入Session中 38 Session["mobile_code"] = mobile_code; 39 40 string postStrTpl = "account={0}&password={1}&mobile={2}&content={3}"; 41 42 //將賬號,密碼,手機號碼,手機驗證碼等字符串進行編碼,並將它們存儲在字節數組postData中 43 UTF8Encoding encoding = new UTF8Encoding(); 44 byte[] postData = encoding.GetBytes(string.Format(postStrTpl, account, password, mobile, content)); 45 46 //設置發送請求報文 47 HttpWebRequest myRequest = (HttpWebRequest)WebRequest.Create(PostUrl);//PostUrl在Web.config中定義 48 myRequest.Method = "POST"; 49 myRequest.ContentType = "application/x-www-form-urlencoded"; 50 myRequest.ContentLength = postData.Length; 51 52 //創建流 53 Stream newStream = myRequest.GetRequestStream(); 54 55 //發送數據 56 newStream.Write(postData, 0, postData.Length); 57 newStream.Flush(); 58 newStream.Close(); 59 60 //獲取返回信息(xml) 61 HttpWebResponse myResponse = (HttpWebResponse)myRequest.GetResponse(); 62 if (myResponse.StatusCode == HttpStatusCode.OK) 63 { 64 StreamReader reader = new StreamReader(myResponse.GetResponseStream(), Encoding.UTF8); 65 66 67 string res = reader.ReadToEnd(); 68 69 //獲取返回枚舉值 70 int len1 = res.IndexOf("</code>"); 71 int len2 = res.IndexOf("<code>"); 72 string code = res.Substring((len2 + 6), (len1 - len2 - 6)); 73 74 //獲取返回信息 75 int len3 = res.IndexOf("</msg>"); 76 int len4 = res.IndexOf("<msg>"); 77 string msg = res.Substring((len4 + 5), (len3 - len4 - 5)); 78 Response.Write(msg); 79 80 Response.End(); 81 82 } 83 else 84 { 85 //訪問失敗 86 Response.Write("err"); 87 } 88 } 89 90 91 92 93 }
Post.aspx返回的是一個XML,我們需要返回給index.html的信息的是<msg>里面的內容。
1 <?xml version=\"1.0\" encoding=\"utf-8\"?> 2 <submitresult xmlns=\"http://106.ihuyi.cn/\"> 3 <code>2</code> 4 <msg>提交成功</msg> 5 <smsid>401514767</smsid> 6 </submitresult>
發送驗證碼成功后,用戶輸入來自手機的驗證碼信息,並提交到judgeData.aspx:
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.UI; 6 using System.Web.UI.WebControls; 7 8 namespace phoneCheckCode 9 { 10 public partial class judgeData : System.Web.UI.Page 11 { 12 protected void Page_Load(object sender, EventArgs e) 13 { 14 if (Session["mobile"] != null && Session["mobile_code"] != null) 15 { 16 //獲取Session的數值 17 string mobile = Session["mobile"].ToString(); 18 string mobile_code = Session["mobile_code"].ToString(); 19 20 //獲取表單傳過來的值 21 string f_mobile = Request.Form["phone"].ToString(); 22 string f_mobile_code = Request.Form["captcha"].ToString(); 23 if(f_mobile==""||f_mobile_code==""){ 24 Response.Write("<script>alert('驗證失敗');window.location = 'index.html';</script>"); 25 } 26 else{ 27 if (mobile.Equals(f_mobile) && mobile_code.Equals(f_mobile_code)) 28 { 29 Response.Write("<script>alert('驗證成功');window.location = 'main.html';</script>"); 30 } 31 else { 32 Response.Write("<script>alert('驗證失敗');window.location = 'index.html';</script>"); 33 } 34 } 35 36 37 } 38 else { 39 Response.Write("<script>alert('驗證失敗');window.location = 'index.html';</script>"); 40 } 41 42 } 43 } 44 }
Web.config配置文件
1 <?xml version="1.0" encoding="utf-8"?> 2 3 <!-- 4 有關如何配置 ASP.NET 應用程序的詳細信息,請訪問 5 http://go.microsoft.com/fwlink/?LinkId=169433 6 --> 7 8 <configuration> 9 <appSettings> 10 <add key="WebReference.Service.PostUrl" value="http://106.ihuyi.cn/webservice/sms.php?method=Submit"/> 11 <add key="WebReference.sms" value="http://106.ihuyi.cn/webservice/sms.php?smsService"/> 12 </appSettings> 13 14 <system.web> 15 <compilation debug="true" targetFramework="4.0" /> 16 17 18 <!--設置Session失效時間為1分鍾--> 19 <sessionState mode="InProc" timeout="1"/> 20 21 </system.web> 22 23 </configuration>
3.最后進行測試實現:
好了,我只是一個小小的菜鳥,很多東西都不太懂,有什么錯誤或者不足請大家多多指教,謝謝啦。
2016-07-28