ASP.NET MVC+Bootstrap 實現短信驗證
短信驗證大家都已經非常熟悉了，基本上每天都在接觸手機短信的驗證碼，比方某寶，某東購物。站點註冊，網上銀行等等，都要驗證我們的手機號碼真實性。這樣做有什麽優點呢。
曾經咱們在做站點的時候。為了提高用戶註冊的質量，防止用戶惡意註冊。都會設置一些小阻礙，如網頁驗證碼、郵件認證等等。可是道高一尺魔高一丈。非常快站點的這些設置都被一些網絡黑客利用註冊機逐一攻破，這些功能也就隨之變成了擺設。
可是魔高一丈道高兩丈，隨著移動設備的普及。短信驗證的功能橫空出世。他的出現輕松的排除了傳統站點驗證碼的弊端，還提升了站點用戶註冊的質量。並且能夠更有效的管理站點註冊用戶，隨時與之保持聯系和溝通。另外，用戶的手機號碼還能夠做綁定。衍生出很多其它的應用，比方手機密碼找回。手機發送指令。手機帳號和用戶註冊帳號可做同步登錄、同步通訊錄、同步很多其它手機相關的應用等。
手機短信驗證，聽上去非常復雜的樣子，可是看完以下這個圖你就會恍然大悟！
原理圖：
其原理就是，當用戶在站點上註冊的時候，系統會要求用戶輸入自己的手機號碼，點擊發送驗證碼時，系統會調用第三方短信平臺提供的接口，將用戶手機號碼和系統自己主動生成的驗證碼，提供給平臺，然後由平臺將短信驗證碼發送至用戶的手機。當然系統在調用接口之前。會將生成的驗證碼保存至緩存一份；用戶收到驗證碼後輸入對話框，提交後系統驗證用戶輸入的和緩存中保存的驗證碼是否一致。一致方可完畢註冊。
Demo
所用工具：Bootstrap框架，ASP.NET MVC，天下暢通平臺接口。
View Code：
@{
ViewBag.Title = "Index";
}
<link
</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:37
public 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
}
顯示效果：
發送短信:
接收短信:
驗證短信:
非常easy的短信驗證功能就實現了。如今網上有非常多提供短信驗證碼服務的公司，並且也都會提供一定的免費發送次數。大家能夠做個Demo嘗試一下。
點擊下載博客Demo源碼
ASP.NET MVC+Bootstrap 實現短信驗證