在ASP.NET MVC下通过短信验证码注册

2024-07-11 16:45| 来源: 网络整理| 查看: 265

以前发短信使用过短信猫，现在，更多地是使用第三方API。大致过程是：

→ 用户在页面输入手机号码→ 用户点击"获取验证码"按钮，把手机号码发送给服务端，服务端产生几位数的随机码，并保存在某个地方(Session, Applicaiton, 数据库, 等等)，调用第三方的API→ 第三方发送几位数的随机码至用户手机→ 用户在页面输入接收到的随机码→ 把随机码等发送给服务端，与服务端保存的随机码比较，如果一致，就通过，让注册

就按如下界面来说吧：

我们需要考虑的方面包括：

● 手机号码：判断手机号码的合法性，与数据库中已有的手机号码比较，判断是否有重复，等等● "获取短信验证码"按钮：点击后，禁用它，再来一个比如60秒的倒计时，倒计时结束恢复使用● "提交"按钮：在提交之前需要判断表单是否验证通过，以及验证码是否通过● 点击"获取短信验证码"按钮的次数：比如，需要限制来自同一个IP，每天只能点击这个按钮3次

选择验证码提供方、前期准备

本人选择了"云之讯"：http://www.ucpaas.com/

注册成为"云之讯"的用户。

进入"云之讯"管理后台，首页就可看到开发者信息，包括Account Sid, AuthToken, Rest URL,这些将来都会用到。

依次点击"应用管理"，"应用列表"，右侧页面的"创建应用"，创建成功后将会分配到一个应用ID，这个应用ID也会被用到。另外，创建的应用需要"云之讯"审核通过后，才可以在本地调试。

依次点击"应用管理"，"短信管理"，右侧页面的"添加模版", 在"添加模版"页，"内容"这项应该类似这样填写：您注册{1}网站的验证码为{2}，请于{3}分钟内正确输入验证码，添加短信模版成功后会分配到一个模版ID，这个模版ID也会被用到，创建的短信模版也需要"云之讯"审核通过后，才可以在本地调试。

好了，再来总结一下，我们在开发的时候需要哪些信息。包括：

● Rest URL● Account Sid● AuthToken● 应用ID● 短信模版ID● 短息模版的内容，比如"您注册{1}网站的验证码为{2}，请于{3}分钟内正确输入验证码"，{1},{2},{3}是占位符，在应用程序中我们只需要拼接出一个以英文逗号隔开的字符串就可以，比如"我的网站,我的验证码,1"

先下载一个C#的Demo,在这里下载：http://www.ucpaas.com/product_service/download, 在"REST Server Demo"中可以找到。

另外，"云之讯"C#版Demo是使用HttpWebRequest，向API发出请求的，在ASP.NET MVC中，我们也可以使用HttpClient向API发出请求，请求格式参考如下：

http://docs.ucpaas.com/doku.php?id=rest_api%E4%BB%8B%E7%BB%8Dhttp://docs.ucpaas.com/doku.php?id=%E7%9F%AD%E4%BF%A1%E9%AA%8C%E8%AF%81%E7%A0%81_%E6%A8%A1%E6%9D%BF%E7%9F%AD%E4%BF%A1

在开发的时候，有时需要查看返回的状态码，查看这里：http://docs.ucpaas.com/doku.php?id=rest_error

在ASP.NET MVC下开发

对于用户注册相关的视图模型，给出如下一个类。

public class UserInputVm { [Required(ErrorMessage = "必填")] [StringLength(16, ErrorMessage = "长度1-16位")] [Display(Name = "请输入手机号")] [RegularExpression(@"^1[3458][0-9]{9}$", ErrorMessage = "手机号格式不正确")] public string LoginName { get; set; } }

以上，只考虑了手机输入的合法性，现实中，还需要判断用户输入的手机号是否和数据库中已有的重复，用到一个远程验证特性，参考这里：http://www.cnblogs.com/darrenji/p/3578133.html

在项目根目录下创建一个"Extension"文件夹，并创建一个UCSRestRequest类，把"云之讯"C#版Demo中的UCSRestRequest类下的内容以及EBodyType枚举一同拷贝下来。

在HomeController下，Index方法送出一个视图模型实例。

public class HomeController : Controller { public ActionResult Index() { return View(new UserInputVm()); } ...... }

在Home/Index.cshtml视图中，点击"发送验证码"按钮，让该按钮倒计时，并把手机号发送给服务端；点击"提交"按钮，判断验证表单通过之后，再向服务端发送用户填写的验证码，验证码通过之后才提交表单信息。

@model MvcApplication2.Models.UserInputVm @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } Index @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { id = "addForm" })) { @Html.LabelFor(m => m.LoginName) @Html.TextBoxFor(m => m.LoginName) @Html.ValidationMessageFor(m => m.LoginName) 请输入验证码 } @section scripts { $(function () { //点击发送验证码 $('#getCode').on("click", function () { checkGetCodeBtn(); $.post('@Url.Action("GetCheckNum", "Home")', { 'phoneNum': $('#LoginName').val() }, function (data) { if (data.msg) { $('#success').text("已发送验证码"); alert(data.content); } else { var $getCodeBtn = $('#getCode'); clearInterval(t); $getCodeBtn.prop('disabled', false); $getCodeBtn.val("点击获取验证码"); count = 60; $('#success').text(""); } }); }); //提交 $('#up').on("click", function () { //表单验证通过才验证验证码的正确性 if ($('#addForm').valid()) { //clearInterval(t); $.post('@Url.Action("CheckCode", "Home")', { 'checkNum': $('#myCode').val() }, function (data) { if (data.msg) {//验证码匹配 alert(data.content); $.ajax({ cache: false, url: '@Url.Action("Index", "Home")', type: 'POST', dataType: 'json', data: $('#addForm').serialize(), success: function (result) { if (result.msg) { alert(result.content); } }, error: function (xhr, status) { alert("提交失败，状态码：" + status); } }); } else { $('#codehint').text(data.content); } }); } }); }); var count = 60; //计时开始 var t; //时间间隔种子 var isPass = false;//验证码是否输入正确 function checkGetCodeBtn() { //关于按钮 var $getCodeBtn = $('#getCode'); t = setInterval(function () { $getCodeBtn.val(count + "秒之后重新获取"); $getCodeBtn.prop('disabled', true); count--; if (count == 0) { clearInterval(t); $getCodeBtn.prop('disabled', false); $getCodeBtn.val("点击获取验证码"); count = 60; $('#success').text(""); } }, 1000); } }

再回到HomeController,有一个方法用来接收用户的手机号，产生并保存随机码，调用API；有一个方法用来接收用户的短信验证码，判断是否匹配；当然还有一个接收表单数据的方法。

public class HomeController : Controller { ...... [HttpPost] public ActionResult Index(UserInputVm userInputVm) { if (ModelState.IsValid) { //实际上这里要做数据库保存工作 //return PartialView("DisplayUser", userInputVm); return Json(new {msg=true,content=userInputVm.LoginName}); } else { return View(userInputVm); } } //让api把验证码发给用户手机 [HttpPost] //[EnableThrottling(PerSecond = 1, PerMinute = 1, PerHour = 3, PerDay = 3)] public ActionResult GetCheckNum(string phoneNum) { //TODO: 在这里再次判断用户手机号是否与数据库中已有的重复 //产生随机验证码 Random r = new Random(); string temMsg = string.Empty; for (int i = 0; i

【本文地址】

公司简介

联系我们