基于JavaScript与后端HttpHandler的短信验证码实现方案

短信验证码应用场景与原理概述

在使用移动、电信等运营商网上营业厅时，为保障业务完整性和准确性，常需使用短信验证码功能。近期因某省业务需求，我们也实现了类似功能。

其核心原理在于：当用户点击“获取验证码”按钮时，前端通过Ajax请求生成指定位数的随机数字，后端随后执行数据库写入、发送短信以及设置Cookie以记录验证码有效期的操作。

前端发起验证码请求的代码逻辑如下：

$.ajax({
type: "GET",
url: "../Ajax/smsrandcodetest.ashx?phone=" + phone.val() + "&smsCodeRand=" + num,
success: function(result) {
if (result == "Y") {
alert("验证码已发送至您输入的手机号！有效期5分钟");
RemainTime();
}
else {
alert("验证码获取失败！请重新获取");
}
},
error: function() { alert("error"); }
});
//获取6位随机验证码
function random() {
var num = "";
for (i = 0; i < 6; i++) {
num = num + Math.floor(Math.random() * 10);
}
return num;
}
//验证码有效期倒计时
function RemainTime() {
var iSecond;
var sSecond = "", sTime = "";
if (iTime >= 0) {
iSecond = parseInt(iTime % 300);
if (iSecond >= 0) {
sSecond = iTime + "秒";
}
sTime = "<span style='color:darkorange;font-size:13px;'>" + sSecond + "</span>";
if (iTime == 0) {
clearTimeout(Account);
sTime = "<span style='color:red;font-size:12px;'>验证码已过期</span>";
}
else {
Account = setTimeout("RemainTime()", 1000);
}
iTime = iTime - 1;
}
$("#endtime").html(sTime);
} 

前端处理逻辑基本如上。接下来需在HttpHandler中添加后端逻辑，为防止JS生成的验证码不符合规则，后端会重新生成一次：

if (smscoderand.Length != 6) //如果JS生成的随机码不符，则用C#生成随机码
{
smscoderand = GetRandom();
}
//写短信数据，发SMS
//写Cookie，设置验证码有效期，比如5分钟
//注：如果以上都处理成功，返回"Y"，处理失败，返回"N"

Cookie验证与扩展策略

此处为简化处理，验证码的有效期验证通过Cookie实现。在业务提交时，系统会读取客户端该Cookie以判断是否存在，若不存在则视为过期。后续若业务扩展，可能会增加数据库有效期验证及发送频率限制（如每小时或每天限制发送条数），以防止无限发送短信。

以上即为JavaScript短信验证码实现的详细介绍，希望有所帮助。