短信验证大家都已经很熟悉了，基本上每天都在接触手机短信的验证码，比如某宝，某东购物，网站注册，网上银行等等，都要验证我们的手机号码真实性。这样做有什么好处呢。

以前咱们在做网站的时候，为了提高用户注册的质量，防止用户恶意注册，都会设置一些小阻碍，如网页验证码、邮件认证等等。但是道高一尺魔高一丈，很快网站的这些设置都被一些网络黑客利用注册机逐一攻破，这些功能也就随之变成了摆设。

但是魔高一丈道高两丈，随着移动设备的普及，短信验证的功能横空出世。他的出现轻松的排除了传统网站验证码的弊端，还提升了网站用户注册的质量，并且可以更有效的管理网站注册用户，随时与之保持联系和沟通。另外，用户的手机号码还可以做绑定，衍生出更多的应用，比如手机密码找回，手机发送指令，手机帐号和用户注册帐号可做同步登录、同步通讯录、同步更多手机相关的应用等。

手机短信验证，听上去很复杂的样子，但是看完下面这个图你就会恍然大悟！

原理图：

其原理就是，当用户在网站上注册的时候，系统会要求用户输入自己的手机号码，点击发送验证码时，系统会调用第三方短信平台提供的接口，将用户手机号码和系统自动生成的验证码，提供给平台，然后由平台将短信验证码发送至用户的手机。当然系统在调用接口之前，会将生成的验证码保存至缓存一份；用户收到验证码后输入对话框，提交后系统验证用户输入的和缓存中保存的验证码是否一致，一致方可完成注册。

Demo

所用工具：Bootstrap框架，ASP.NET MVC，天下畅通平台接口。

View Code：

@{ViewBag.Title = "Index";
}
<link href="../../Content/bootstrap-3.3.0-dist/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="../../Content/bootstrap-3.3.0-dist/dist/js/jquery-1.11.2.min.js"></script>
<script src="../../Content/bootstrap-3.3.0-dist/dist/js/bootstrap.min.js"></script>
<script src="../../Scripts/MyScripts/Register.js"></script><div class="hero-unit" contenteditable="true"><h1>某网站注册</h1><p>学的不仅是技术，更是梦想！</p><p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>
</div><br>
<br>
<br>
<br>
<br><form class="form-horizontal" role="form"><div class="form-group"><label for="inputEmail3" class="col-sm-2 control-label">手机号</label><div class="col-sm-6"><div style="float: left;"><input id="phonum" type="text" class="form-control" style="width: 300px;"></div><div style="float: left;"><input class="btn btn-info" type="button" id="getcode" value="点击获取手机验证码" /><span id="telephonenameTip"></span></div></div></div><div class="form-group"><label class="col-sm-2 control-label">验证码</label><div class="col-sm-6"><input style="width: 300px;" class="form-control" id="codename"><span id="codenameTip"></span></div></div><div class="form-group"><label for="inputPassword3" class="col-sm-2 control-label">密码</label><div class="col-sm-6"><input type="password" style="width: 300px;" class="form-control" id="" placeholder="Password"></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-6"><button type="button" id="submit" class="btn btn-primary">立即注册</button></div></div>
</form>

JS Code：

/*************************************************
作者： 牛迁迁
小组：
说明：短信验证所用到的JS方法，此实例仅作为Demo，一些验证暂时省略。
创建日期：2015年8月11日 17:55:40
版本号：V1.0.0
**********************************************/window.onload = function () {//短信验证码  var InterValObj; //timer变量，控制时间    var count = 60; //间隔函数，1秒执行    var curCount;//当前剩余秒数    var code = ""; //验证码    var codeLength = 6;//验证码长度   $("#getcode").click(function () {//获取输入的手机号码var phoNum = $("#phonum").val();//alert(phoNum);curCount = count;//用正则表达式验证手机号是否合法//var re = /(^1[3|5|8][0-9]{9}$)/;//略// 产生随记验证码    for (var i = 0; i < codeLength; i++) {code += parseInt(Math.random() * 9).toString();}// 设置按钮显示效果，倒计时   $("#getcode").attr("disabled", "true");$("#getcode").val("请在" + curCount + "秒内输入验证码");InterValObj = window.setInterval(SetRemainTime, 1000); // 启动计时器，1秒执行一次    // 向后台发送处理数据    $.ajax({type: "POST", // 用POST方式传输    dataType: "text", // 数据格式:JSON    url: "/Register/GetCode", // 目标地址    data: { "Code": code, "phoNum": phoNum },error: function (msg) {alert(msg);},success: function (data) {//前台给出提示语if (data == "true") {$("#telephonenameTip").html("<font color='#339933'>√ 短信验证码已发到您的手机,请查收(30分钟内有效)</font>");} else if (data == "false") {$("#telephonenameTip").html("<font color='red'>× 短信验证码发送失败，请重新发送</font>");return false;}}});});//timer处理函数    function SetRemainTime() {if (curCount == 0) {window.clearInterval(InterValObj);// 停止计时器    $("#getcode").removeAttr("disabled");// 启用按钮    $("#getcode").val("重新发送验证码");code = ""; // 清除验证码。如果不清除，过时间后，输入收到的验证码依然有效    } else {curCount--;$("#getcode").val("请在" + curCount + "秒内输入验证码");}}//提交注册按钮$("#submit").click(function () {var CheckCode = $("#codename").val();// 向后台发送处理数据    $.ajax({url: "/Register/CheckCode",data: { "CheckCode": CheckCode },type: "POST",dataType: "text",success: function (data) {if (data == "true") {$("#codenameTip").html("<font color='#339933'>√</font>");} else {$("#codenameTip").html("<font color='red'>× 短信验证码有误，请核实后重新填写</font>");return;}}});});
}

Controller Code：

    public class RegisterController : Controller{//短信验证码接口的测试数据（天下畅通平台给参数）  public static String url = "http://xtx.telhk.cn:8080/sms.aspx";public static String userid = "****";public static String account = "****";public static String password = "****";public ActionResult Index(){return View();}#region GetCode()-获取验证码-牛迁迁-2015年8月8日 11:12:37/// <summary>/// 返回json到界面/// </summary>/// <returns>string</returns>public ActionResult GetCode(){try{bool result;//接收前台传过来的参数。短信验证码和手机号码string code = Request["Code"];string phoNum = Request["phoNum"];// 短信验证码存入session(session的默认失效时间30分钟) //也可存入Memcached缓存Session.Add("code", code);// 短信内容+随机生成的6位短信验证码    String content = "【欢迎注册今日开讲】 您的注册验证码为:" + code + "，如非本人操作请忽略。有疑问请联系我们：http://blog.csdn.net/u010028869";// 单个手机号发送短信if (!SendMessage(content, phoNum, url, userid, password, account)){result = false;// 失败    }else{result = true;// 成功    }return Json(result, JsonRequestBehavior.AllowGet);}catch (Exception ex){throw ex;}}#endregion/// <summary>/// 核心功能-短信发送方法/// </summary>/// <param name="content">短信内容</param>/// <param name="phoNum">手机号码</param>/// <param name="url">请求地址</param>/// <param name="userid">企业id</param>/// <param name="password">密码</param>/// <param name="account">用户帐号</param>/// <returns>bool 是否发送成功</returns>public bool SendMessage(string content, string phoNum, string url, string userid, string password, string account){try{Encoding myEncoding = Encoding.GetEncoding("UTF-8");//按照平台给定格式，组装发送参数 包括用户id，密码，账户，短信内容，账户等等信息string param = "action=send&userid=" + userid + "&account=" + HttpUtility.UrlEncode(account, myEncoding) + "&password=" + HttpUtility.UrlEncode(password, myEncoding) + "&mobile=" + phoNum + "&content=" + HttpUtility.UrlEncode(content, myEncoding) + "&sendTime=";//发送请求byte[] postBytes = Encoding.ASCII.GetBytes(param);HttpWebRequest req = (HttpWebRequest)HttpWebRequest.Create(url);req.Method = "POST";req.ContentType = "application/x-www-form-urlencoded;charset=UTF-8";req.ContentLength = postBytes.Length;using (Stream reqStream = req.GetRequestStream()){reqStream.Write(postBytes, 0, postBytes.Length);}System.Xml.XmlDocument xmlDoc = new System.Xml.XmlDocument();//获取返回的结果using (WebResponse wr = req.GetResponse()){StreamReader sr = new StreamReader(wr.GetResponseStream(), System.Text.Encoding.UTF8);System.IO.StreamReader xmlStreamReader = sr;//加载XML文档xmlDoc.Load(xmlStreamReader);}//解析XML文档，进行相应判断if (xmlDoc == null){return false;}else{String message = xmlDoc.GetElementsByTagName("message").Item(0).InnerText.ToString();if (message == "ok"){return true;}else{return false;}}}catch (Exception ex){throw ex;}}#region CheckCode()-检查验证码是否正确-牛迁迁-2015年8月8日 11:12:37public ActionResult CheckCode(){bool result = false;//用户输入的验证码string checkCode = Request["CheckCode"].Trim();//取出存在session中的验证码string code = Session["code"].ToString();try{//验证是否一致if (checkCode != code){result = false;}else{result = true;}return Json(result, JsonRequestBehavior.AllowGet);}catch (Exception e){throw new Exception("短信验证失败", e);}}#endregion}

显示效果：

发送短信:

接收短信:

验证短信:

很简单的短信验证功能就实现了，现在网上有很多提供短信验证码服务的公司，而且也都会提供一定的免费发送次数。大家可以做个Demo尝试一下。

点击下载博客Demo源代码

ASP.NET MVC+Bootstrap 实现短信验证相关推荐

C# ASP.NET MVC 阿里云短信验证码Demo
相信大家在开发过程中又很多使用到验证码验证的功能,今天将验证码的验证整理一下写了一个Demo 通过本篇后你能学习到: 阿里云短信服务 Drapper连接SQL Server进行增改操作 JS前端倒计时 ...
.Net asp.net MVC 实现短信验证
本文基于asp.net实现输入手机号发送验证码,并得到验证码.我将详细的在下面说明,每一步都很重要,谨慎去做,不然没过审核的话得等好久才能通过.如果是做项目或者个人研究需要那么就学我这种方法就足够了. ...
mvc 短信验证发送
这个是短信验证发送一个例子,你们可以找其他的短信平台.这里只是告诉你们一个使用方法. 第零步:到个短信平台注册,我这个平台是 http://www.ihuyi.com/ 先声明没有丝毫的打广告的意思 ...
springboot整合阿里云短信验证(无需签名和模板，通过阿里云api测试实现短信验证)
一.开通阿里云短信服务开通步骤如下图所示开通完成后,进入阿里云短信验证首页,点击国内消息一般来说,在短信验证时需要签名管理和模板管理,但是签名管理需要备案或者上线服务,所以对于没有备案和上线应用 ...
榛子云短信验证平台与springboot集成的短信验证
登录 - 榛子云短信用户系统 (zhenzikj.com) 上面是登录榛子云短信验证平台的入口,此平台的短信大概为3.1分一条短信. 如何与spring boot进行集成呢,我以注册为例来慢慢讲解 1 ...
php中短信验证大致流程,实现php手机短信验证功能的基本思路
现在很多网站为了避免用户烂注册,都在注册环节添加有手机短信验证功能,用户注册时需要短信验证码才可以,那么这种手机短信验证功能是如何实现的呢?其基本思路是什么呢?下面乐信小编就来为大家介绍下: 实现手机 ...
简单的短信验证功能的实现
相信有很多朋友在做三方登陆的时候会加入短信验证的功能,最近刚好被分配安排实现这一需求,本人新手一枚,特地去网上搜了资料,目前用的比较多的大汉.云通讯还有MOB的smssdk,对比之下,最终选择了完全免 ...
阿里云短信验证解决方案(java版)(redis存储)
阿里云短信验证解决方案(java版)(redis存储) 参考文章: (1)阿里云短信验证解决方案(java版)(redis存储) (2)https://www.cnblogs.com/Amos-Tur ...
收下这个“短信验证”的最佳实践项目！
短信验证这样的功能是不是进本每个应用都会用到?那么你有积累下相关的开发模块或服务了吗?不管有没有,今天TJ给大家推荐一个现成的短信验证功能的开源项目! 一个合规.安全.可靠的短信验证码项目模块应该具备 ...

ASP.NET MVC+Bootstrap 实现短信验证

原理图：

Demo

ASP.NET MVC+Bootstrap 实现短信验证相关推荐

最新文章

热门文章