.NET MVC用Ajax实现发送手机短信验证码

本次实验基于上次的.net aspx的手机实现短信验证。

本次实验大致过程是：

1.用户在页面输入手机号码进行注册

2.如果手机号已经存在了就会提示已经注册过了
3. 用户点击"发送验证码"按钮，把手机号码发送给服务端，服务端产生6位数的随机码
4.第三方发送6位数的随机码至用户手机
5. 用户在页面输入接收到的短信验证码
6. 把随机码等发送给服务端，与服务端保存的随机码比较，如果一致，就通过，让注册

这里做实验,就搭建一个简单的界面,如下:

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

● 手机号码：判断手机号码的合法性，与数据库中已有的手机号码比较，判断是否有重复，等等（这里就不做手机号码合法性的判断了,很简单写个正则表达就好,也可以用其他方法）
● "获取短信验证码"按钮：点击后，禁用它，再来一个比如60秒的倒计时，倒计时结束恢复使用
● "提交"按钮：在提交之前需要判断表单是否验证通过，以及验证码是否通过

要实现发送验证码,前期就要做好准备,这里的用的是通讯云服务给的接口

做好前期准备，我们需要申请公众号和腾讯云服务的操作,在这里就不演示了,请进入我之前写的文章里把基本的都搭建好在进行下一步（一定要把公众号和腾讯云都弄好） http://t.csdn.cn/KapyY

现在可以开始实验:

首先先创建好一个MVC项目，创建一个自己的控制器,找到文件夹Controllers--->右键--->添加控制器取名UserController（可以自己取名）

然后找到Model文件夹连接数据库也就是EF，右键-->新建项-->ADO.NET实体数据模型

把你的数据库连接好，这里是模拟用户登录所以自己选择自己的表用就好

进入UserController控制器界面

添加Index视图,进入视图页

直接上代码吧做了注释

<head><meta name="viewport" content="width=device-width" /><script src="~/Scripts/jquery-3.4.1.min.js"></script><title>Index</title>
</head>
<body>@using (Html.BeginForm()){<div>手机号:@Html.TextBox("username")<input type="button" value="发送验证码" id="btn"  onclick="Checkname()" /><br />验证码:<input type="text" name="Yzm" value="" placeholder="输入验证码" /><span id="msg"> </span><span>@ViewBag.tx</span><br /><input type="submit" name="sub" value="提交" /></div>}<script type="text/javascript">function Checkname() {jQuery.ajax({url: "/User/Validate",type: "GET",data: { "username": $("#username").val() },/*数据源,username获取控制器的值和前台文本的id值*/success: function (data) {if (data == "false") {$("#msg").html("<font color='red'>手机号已存在!</font>");}else {      /*否则就代表手机号在数据库中不存在,就可以发送验证码并且实现按钮60秒倒计时*/$("#msg").html("<font></font>");var count = 60; //计时开始var t; //时间间隔种子//关于按钮var $getCodeBtn = $('#btn');t = setInterval(function () {$getCodeBtn.val(count + "秒之后重新获取");$getCodeBtn.prop('disabled', true);count--;if (count == 0) {clearInterval(t);$getCodeBtn.prop('disabled', false);$getCodeBtn.val("点击获取验证码");count = 3;}}, 1000);}},error: function (xhr, error, ex) {$("#msg").html("<font color='red'>系统出现异常,请联系客服!</font>");}});}</script></body>

写好后进入控制器，记得导入 TencentCloud到项目中(TencentCloud这个包在腾讯云里,需要自己去找并且下载好)

然后找到TencentCloud里面的Send.cs文件打开：

打开后按照注释填写自己的相关内容即可

 /// <summary>/// 发送短信/// </summary>/// <param name="PhoneNumber">发送手机</param>/// <param name="code">验证码</param>/// <param name="Time">有效时间</param>public static void SendDL(string[] PhoneNumber, string code, int Time){try{Credential cred = new Credential{SecretId = "", //在腾讯云官网中的“云产品”中找到“访问秘钥”，点击打开，就看得到相关ID和Key，复制填写即可SecretKey = ""};ClientProfile clientProfile = new ClientProfile();HttpProfile httpProfile = new HttpProfile();httpProfile.Endpoint = ("sms.tencentcloudapi.com");clientProfile.HttpProfile = httpProfile;SmsClient client = new SmsClient(cred, "", clientProfile);SendSmsRequest req = new SendSmsRequest();req.PhoneNumberSet = PhoneNumber;req.TemplateID = "";//创建正文模板IDreq.SmsSdkAppid = "";//在腾讯云官网中的短信里面找到应用管理里面的应用列表复制里面的SDKAPPidreq.Sign = "";//您的签名管理的签名内容的名字req.TemplateParamSet = new String[] { code, Time.ToString() };SendSmsResponse resp = client.SendSmsSync(req);}catch (Exception e){Console.WriteLine(e.ToString());}return;}

找到model右键添加一个类,取名为PhoneTool

把这段代码复制过去

public class PhoneTool{public static string CreateRandomCode(int codeCount){StringBuilder randomCode = new StringBuilder();Random rand = new Random();for (int i = 0; i < codeCount; i++){randomCode.Append(rand.Next(10));}return randomCode.ToString();}}

以上完成后，整体代码如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Ajax_01.Models;
using System.Web.Mvc;
using System.Collections;
using TencentCloud.Common;
using TencentCloud.Common.Profile;
using TencentCloud.Cr.V20180321.Models;
using TencentCloud.Sms.V20190711;
using TencentCloud.Sms.V20190711.Models;
using System.Text;namespace Ajax_01.Controllers
{public class UserController : Controller{// GET: Userpublic ActionResult Index(){return View();}public static string codes;//接受随机数的变量public ActionResult Validate(string username){using (sqlEntities db = new sqlEntities())//数据库上下文对象{if (db.student.Where(u => u.Username == username).Count() > 0)//如果查询到用户手机号{return Content("false");//直接返回false,不做任何处理}else{int codeCount = 6;string str = username;codes = PhoneTool.CreateRandomCode(codeCount);SendDL(new string[] { "+86" + str }, codes, 10);return Content("true");}}}[HttpPost]public ActionResult Index(student stu){using(sqlEntities db=new sqlEntities()){string sm = Request["Yzm"];if (sm != codes){ViewBag.tx = "验证码错误!";return View();}else{db.student.Add(stu);//保存信息到数据库内db.SaveChanges();ViewBag.tx = "成功!";return View();}}}/// <summary>/// 这个是腾讯云的自带接口方法,里面的值填你自己的就好/// </summary>/// <param name="PhoneNumber"></param>/// <param name="code"></param>/// <param name="Time"></param>public static void SendDL(string[] PhoneNumber, string code, int Time){try{Credential cred = new Credential{SecretId = "", //在腾讯云官网中的“云产品”中找到“访问秘钥”，点击打开，就看得到相关ID和Key，复制填写即可SecretKey = ""};ClientProfile clientProfile = new ClientProfile();HttpProfile httpProfile = new HttpProfile();httpProfile.Endpoint = ("sms.tencentcloudapi.com");clientProfile.HttpProfile = httpProfile;SmsClient client = new SmsClient(cred, "", clientProfile);SendSmsRequest req = new SendSmsRequest();req.PhoneNumberSet = PhoneNumber;req.TemplateID = "";//创建正文模板IDreq.SmsSdkAppid = "";//在腾讯云官网中的“云产品”中找到“访问秘钥”，点击打开,就会有一个APPID，复制填写即可req.Sign = "";//您的公众号名字req.TemplateParamSet = new String[] { code, Time.ToString() };SendSmsResponse resp = client.SendSmsSync(req);}catch (Exception e){Console.WriteLine(e.ToString());}return;}}
}

如有问题，可联系我~

.NET MVC用Ajax实现发送手机短信验证码相关推荐

发送手机短信验证码-后端、前端(验证码倒计时)
获取手机短信验证码-后端.前端(验证码倒计时) 后端 /*** 发送手机短信验证码** @return str* @throws Exception* @author 王永圣*/@RequestMap ...
【微信小程序 - 工作实战分享】1.微信小程序发送手机短信验证码（阿里云）
发送手机短信验证码前言一. 准备工作二. 配置三. 实战代码(仅仅是后台代码,前端传入手机号) 总结前言在网站和移动应用中利用短信验证码进行信息确认是最常用的验证手段.随着短信验证码的技术 ...
Java调用WebService接口实现发送手机短信验证码功能，java 手机验证码，WebService接口调用...
近来由于项目需要,需要用到手机短信验证码的功能,其中最主要的是用到了第三方提供的短信平台接口WebService客户端接口,下面我把我在项目中用到的记录一下,以便给大家提供个思路,由于本人的文采有限, ...
Java调用WebService接口实现发送手机短信验证码功能
为什么80%的码农都做不了架构师?>>> 一.样式示例: 二.前台的注册页面的代码:reg.jsp <%@ page language="java" ...
java调接口实现发送手机短信验证码功能,手机验证码，接口调用
原文地址: http://blog.csdn.net/sxdtzhaoxinguo/article/details/34437591 近来由于项目需要,需要用到手机短信验证码的功能,其中最主要的是用 ...
如何发送手机短信验证码
文章目录阿里云短信业务实战教程 1.阿里云平台的使用 2.创建用户组及用户并添加权限 3.添加短信签名和短信模板并充值费用 4.开发工具进行代码部分(这里使用IDEA) 阿里云短信业务实战教程手机 ...
ASP.NET发送手机短信验证码
我们在做网站尤其是用户注册时难免会用到使用手机号注册,给用户发送验证码用于效验身份.因为要用到给手机发送短信,所以需求运营商提供接口(当然这个需要一定的费用^-^). 下面是实现方案: 一.web.c ...
容联云发送手机短信验证码
首先在根目录下定义全局使用的连接容联云py的文件下载SDK pip install ronglian_sms_sdk 在文件中导入 ↓ from ronglian_sms_sdk import Sm ...
使用 SSM 框架实现发送手机短信验证码
手机发送短信内容一.手机发送短信 1. 前端界面代码 2. UserInfoController 控制器 4. 具体实现总结内容一.手机发送短信 1. 前端界面代码 10秒内不能重复发送验证 ...

.NET MVC用Ajax实现发送手机短信验证码

.NET MVC用Ajax实现发送手机短信验证码相关推荐

最新文章

热门文章