网络专题设计,dede做英文网站优化,wordpress二次元主题个人,做加盟网站赚钱吗相信大家在开发过程中又很多使用到验证码验证的功能#xff0c;今天将验证码的验证整理一下写了一个Demo
通过本篇后你能学习到:
阿里云短信服务Drapper连接SQL Server进行增改操作JS前端倒计时
完成后效果如下: (一)首先我们要使用短信我们先注册短信服务所需的内容
1.首先…相信大家在开发过程中又很多使用到验证码验证的功能今天将验证码的验证整理一下写了一个Demo
通过本篇后你能学习到:
阿里云短信服务Drapper连接SQL Server进行增改操作JS前端倒计时
完成后效果如下: (一)首先我们要使用短信我们先注册短信服务所需的内容
1.首先阿里云短信验证码首先打开阿里云的短信服务网址
阿里云短信 2.进入管理控制台
在国内消息-签名模板中添加一个签名模板 签名模板名称这里要记一下后面的开发中需要填入 3.签名模板通过后我们需要再在国内消息模板管理里面添加一个短信模板 同样通过后 (模版CODE) 这个值在开发中需要填入 到这里我们短信发送所需的内容就已经注册好了接下来我们进行开发 (二)短信发送代码开发
1.我们首先用vs创建一个MVC的项目
2.使用nuget引用aliyun第三方类库如下图所示: 3.由于使用验证码需要通过数据库存储我这里使用了Drapper进行数据库操作Drapper的操作我们后面单独用一篇文章来写
这里我就不详细写drapper引入的过程了
到这里我们所需的程序依赖就已经引入完毕了
4.我们首先需要编写一个发送短信的公共类来提供调用
阿里云这里提供了快速生成代码的网址可以通过该网站填入内容快速生产代码
代码快速生成 其中需要注意的一个地方就是TemplateParam这里我填的是
{code:你后台生生成的验证码} 这里要和你申请的短信模板的内容相同比如你申请的是 ${code}
那么TemplateParam 就是 {code:你后台生成的验证码}
如果申请的模板内容中带多个参数的话请带上多个json内容
将生产的代码改了改如下所示: static String product XXXX;//短信API产品名称static String domain dysmsapi.aliyuncs.com;//短信API产品域名static String accessId XXXX;static String accessSecret XXXX;static String regionIdForPop cn-hangzhou;//传入手机号和验证码public static CommonResponse SendMessage(string phone,string code){CommonResponse response new CommonResponse();IClientProfile profile DefaultProfile.GetProfile(regionIdForPop, accessId, accessSecret);DefaultAcsClient client new DefaultAcsClient(profile);CommonRequest request new CommonRequest();request.Method MethodType.POST;request.Domain domain;request.Version 2017-05-25;request.Action SendSms;// request.Protocol ProtocolType.HTTP;request.AddQueryParameters(PhoneNumbers, phone);request.AddQueryParameters(SignName, product);request.AddQueryParameters(TemplateCode, xxxx);填入你模板管理中的模版CODErequest.AddQueryParameters(TemplateParam, {\code\:\ code \});//验证码try{response client.GetCommonResponse(request);return response;}catch (ServerException e){Console.WriteLine(e);return response;}catch (ClientException e){Console.WriteLine(e);return response;}}其中有一个accessId和accessSecret获取地址如下:
aceesid和accesssecret获取
完成封装过后开始前端和逻辑的处理
5.前端界面和代码如下: {ViewBag.Title 短信发送;
}
!DOCTYPE html
html
headmeta charsetutf-8meta http-equivPragma contentno-cachemeta nameviewport contentwidthdevice-width, initial-scale1.0, user-scalableno /meta nameformat-detection contenttelephoneyes /meta nameapple-mobile-web-app-capable contentyes /meta nameapple-mobile-web-app-status-bar-style contentblack /title绑定信息/title!-- Bootstrap core CSS--!-- 最新版本的 Bootstrap 核心 CSS 文件 --link relstylesheet hrefhttps://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.cssstyle typetext/cssbody {margin: 0;padding: 0;}.modal_content {padding: 30px;display: flex;justify-content: center;flex-direction: column;}.modal_content div {margin-bottom: 20px;}.modal_content h5:first-child {margin: 30px 0px;}#dialog label {color: #666;}#phone {display: block;width: 100%;height: 70px;background: none;padding-top: 30px;border: 0;outline: none;text-align: center;margin-top: -30px;font-size: 16px;border-bottom: 1px solid rgba(0,0,0,.2);border-radius: 0;}.code {display: flex;flex-direction: row;justify-content: space-between;width: 100%;height: 70px;background: none;padding-top: 30px;margin-top: -30px;font-size: 16px;border-bottom: 1px solid rgba(0,0,0,.2);border-radius: 0;}#code {width: calc(100% - 90px);height: 55px;background: none;padding-top: 20px;border: 0;outline: none;text-align: center;margin-top: -20px;font-size: 16px;}#btnSendCode {width: 90px;height: 30px;padding: 0 5px;margin: 0;font-size: 14px;text-align: center;background: transparent;border-radius: 30px;color: #a07941;border-color: #a07941;}::-webkit-input-placeholder { /* WebKit browsers */font-size: 14px;color: rgba(0,0,0,.4);}:-moz-placeholder { /* Mozilla Firefox 4 to 18 */font-size: 14px;color: rgba(0,0,0,.4);}::-moz-placeholder { /* Mozilla Firefox 19 */font-size: 14px;color: rgba(0,0,0,.4);}:-ms-input-placeholder { /* Internet Explorer 10 */font-size: 14px;color: rgba(0,0,0,.4);}.next {text-align: center;margin: 20px 0;}.next button {width: 100%;height: 45px;padding: 0;margin: 0;background: #007BFF;color: #fff;border: 0;outline: none;border-radius: 3px;}/style
/head
bodydiv classmodal_contenth5绑定用户信息/h5divlabel forphone注册手机号/labelbr /input idphone typetext autocompleteoff placeholder请输入手机号 //divdivlabel forcode验证码/labeldiv classcodeinput idcode typetext autocompleteoff placeholder短信验证码 /input idbtnSendCode typebutton classbtn btn-default value获取验证码 onClicksendMessage() //div/divdiv classnextbutton onclickbinding()确定/button/div/divscript srchttp://www.jq22.com/jquery/jquery-1.10.2.js/scriptscript srchttps://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js/scriptscriptvar phoneReg /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;//手机号正则var count 60; //间隔函数1秒执行var InterValObj1; //timer变量控制时间var curCount1;//当前剩余秒数/*第一*/function sendMessage() {curCount1 count;var phone $.trim($(#phone).val());if (!phoneReg.test(phone)) {alert( 请输入有效的手机号码);return false;}//设置button效果开始计时$(#btnSendCode).attr(disabled, true);$(#btnSendCode).val( curCount1 秒再获取);InterValObj1 window.setInterval(SetRemainTime1, 1000); //启动计时器1秒执行一次//向后台发送处理数据var phone $(#phone).val();$.ajax({type: POST,url: /Home/SendSms,data: { phone: phone },dataType: json,success: function (data) {if (data.success ! true || data.success ! true) {alert(data.Msg);}else {alert(发送成功);}},error: function (data) {alert(data.Msg);}});}function SetRemainTime1() {if (curCount1 0) {window.clearInterval(InterValObj1);//停止计时器$(#btnSendCode).removeAttr(disabled);//启用按钮$(#btnSendCode).val(重新发送);}else {curCount1--;$(#btnSendCode).val( curCount1 秒再获取);}}/*提交*/function binding() {var phone $(#phone).val();var code $(#code).val();$.ajax({type: POST,url: /Home/VlidateCode,data: { phone: phone, code: code },dataType: json,success: function (data) {alert(data.Msg);},error: function (data) {alert(data.Msg);}});}/script
/body
/html6.后台代码
(1)发送短信数据库如下所示
内容包含id手机号发送时间是否失效和验证码 (2)后台代码
发送短信前需要先查询发送短信时间是否过短
然后发送验证码成功后要将之前同一个手机发送过的验证码修改位失效状态
查询验证码的时候也得和验证码的有效时间一致过期了就提示重新发送短信 /// summary/// 写入一条短信信息/// /summary/// param nameperson用户信息实体/param/// returns/returnspublic bool Insert(Sms sms){using (IDbConnection db new SqlConnection(DbHelper.ConnectionString)){string sql INSERT INTO Sms(phone, AddDate, Code) VALUES(phone, AddDate, Code);int result db.Execute(sql, sms);return result 0; //简化的转换写法}}/// summary/// 根据手机号查询/// /summary/// param namePhone手机号/param/// returns/returnspublic Sms FindByPhone(string Phone){using (IDbConnection db new SqlConnection(DbHelper.ConnectionString)){DateTime Datimehours DateTime.Now.AddMinutes(-30);string sql $SELECT * FROM Sms WHERE phonephone and IsDeleted0 and adddateDatimehours;IEnumerableSms list db.QuerySms(sql, new { phone Phone , Datimehours Datimehours });return list.FirstOrDefault();}}/// summary/// 根据查询最近一次的手机号验证码判断是否大于60s用于判断是否发送时间间隔过短/// /summary/// param namePhone手机号/param/// returns/returnspublic Boolean IsSoShort(string phone){Boolean SoShort false;using (IDbConnection db new SqlConnection(DbHelper.ConnectionString)){string sql $SELECT * FROM Sms WHERE phonephone;ListSms sms db.QuerySms(sql, new { phone phone }).OrderByDescending(tt.AddDate).ToList();//查询最近一次的手机号验证码//如果查询条数大于0if (sms.Count 0){Sms LastSms sms.FirstOrDefault();DateTime Now DateTime.Now;DateTime SendTime LastSms.AddDate;TimeSpan ts Now.Subtract(SendTime);int sec (int)ts.TotalSeconds;if (sec 60){SoShort true;}}return SoShort;}}/// summary/// 更新一条用户数据/// /summary/// param nameperson用户信息实体/param/// returns/returnspublic bool Updatephone(string phone){using (IDbConnection db new SqlConnection(DbHelper.ConnectionString)){string sql UPDATE Sms SET IsDeleted 1 WHERE phone phone; int result db.Execute(sql, new { phone phone });return result 0; //简化的转换写法}} public JsonResult SendSms(string phone){SendSmsResponse Smsresponse new SendSmsResponse();SmsSendService sendserver new SmsSendService();Boolean isshort sendserver.IsSoShort(phone);if (isshort){return Json(new{success false,Msg 发送短信间隔过短请勿重复发送,data });}//生成6位随机验证码string code SendSmsHepler.Number(6);try{CommonResponse smsend SendSmsHepler.SendMessage(phone, code);SmsresponseJsonConvert.DeserializeObjectSendSmsResponse(smsend.Data);}catch (Exception e){return Json(new{success false,Msg e.Message,data });}//如果发送成功if (Smsresponse.Code ! null Smsresponse.Code OK){Sms sms new Sms();sms.phone phone;sms.Code code;sms.AddDate DateTime.Now;//修改之前发送短信为失效状态bool upphone sendserver.Updatephone(phone);//将新短信内容插入数据库var success sendserver.Insert(sms);return Json(new{success true,Msg 成功,data });}else{return Json(new{success false,Msg Smsresponse.Message,data });}}public JsonResult VlidateCode(string phone,string code){SendSmsResponse Smsresponse new SendSmsResponse();SmsSendService sendserver new SmsSendService();Sms sms sendserver.FindByPhone(phone);if (sms ! null sms.id0){if (sms.Code code){bool upphone sendserver.Updatephone(phone);return Json(new{success true,Msg 验证成功,data });}else{return Json(new{success false,Msg 验证失败,data });}}else{return Json(new{success false,Msg 请先发送短信,data });}}
最后需要源码都请扫码关注回复:短信Demo下载地址
