标签:
今天 突然发神经想到要做一个发送手机验证码的功能,因为看到很多用户注册这个模块都有手机验证这个功能,于是乎,俺就上网查了很多资料,整理了一下,做了一个简单的手机验证码实现功能。不过我用的是试用账号,只可以发送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
标签:
原文地址:http://www.cnblogs.com/elleryo/p/5714906.html