手机接收验证码需要通过第三方平台,像阿里云,华为云。但是阿里云,华为云比较适用于企业,对于在学习的学生并不太友好,所以我在这里给大家推荐一个注册就可以免费的“互亿无线”https://user.ihuyi.com/new/login.html,这个网站注册的人都可以拥有10条免费的短信,并且其中也有对接的模板。
废话不多说:上代码
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta charset="utf-8">
<meta http-equiv="Pragma" content="no-cache">.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link href="~/Content/bootstrap-4.5.0-dist/css/bootstrap.min.css" rel="stylesheet" />
<title>Index</title>
<style type="text/css">
body {
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>
<body>
<div class="modal_content">
<h5>绑定用户信息!</h5>
<div>
<label for="phone">注册手机号:</label><br />
<input id="phone" type="text" autocomplete="off" placeholder="请输入手机号" />
</div>
<div>
<label for="code">验证码:</label>
<div class="code">
<input id="code" type="text" autocomplete="off" placeholder="短信验证码" />
<input id="btnSendCode" type="button" class="btn btn-default" value="获取验证码"/>
</div>
</div>
<div class="next">
<button id="register">确定</button>
</div>
</div>
<script src="~/Content/js/jquery-3.2.1.min.js"></script>
<script src="~/Content/bootstrap-4.5.0-dist/js/bootstrap.min.js"></script>
<script>
//发送短信验证码
window.onload = function () {
$("#btnSendCode").click(function () {
var phone = $("#phone").val();
$.post("/Default/send_new", { mobile: phone }, function (msg) {
if (msg == true) {
alert("已发送");
} else {
alert("已发送");
}
});
});
//验证码验证是否匹配
$("#register").click(function () {
var JudgmentCode = $("#btnSendCode").val();
$.post("/Default/take", function (msg) {
if (JudgmentCode.toString().trim() == msg.trim()) {
alert("动态口令正确");
} else {
alert("请输入或不正确");
}
});
});
}
</script>
</body>
</html >
以上都是视图页面的代码,以及JS代码。比较重要的是。我们需要在解决方案管理器中,找到Web。并且添加以下的代码
<add key="WebReference.Service.PostUrl" value="http://106.ihuyi.cn/webservice/sms.php?method=Submit"/>
<add key="WebReference.sms" value="http://106.ihuyi.cn/webservice/sms.php?smsService"/>
这个代码是互亿无线的对接地址。必须要添加到Web中,才能实现对接。
public static string PostUrl = ConfigurationManager.AppSettings["WebReference.Service.PostUrl"];
public ActionResult send_new(string mobile)
{
string account = "XXXXXXX";//用户名是登录用户中心->验证码、通知短信->帐户及签名设置->APIID
string password = "XXXXXXX"; //密码是请登录用户中心->验证码、通知短信->帐户及签名设置->APIKEY
Random rad = new Random();
int mobile_code = rad.Next(1000, 10000);
string content = "您的验证码是:" + mobile_code + " 。请不要把验证码泄露给其他人。";
Session["mobile_code"] = mobile_code;
string postStrTpl = "account={0}&password={1}&mobile={2}&content={3}";
UTF8Encoding encoding = new UTF8Encoding();
byte[] postData = encoding.GetBytes(string.Format(postStrTpl, account, password, mobile, content));
HttpWebRequest myRequest = (HttpWebRequest)WebRequest.Create(PostUrl);
myRequest.Method = "POST";
myRequest.ContentType = "application/x-www-form-urlencoded";
myRequest.ContentLength = postData.Length;
Stream newStream = myRequest.GetRequestStream();
newStream.Write(postData, 0, postData.Length);
newStream.Flush();
newStream.Close();
HttpWebResponse myResponse = (HttpWebResponse)myRequest.GetResponse();
if (myResponse.StatusCode == HttpStatusCode.OK)
{
StreamReader reader = new StreamReader(myResponse.GetResponseStream(), Encoding.UTF8);
string res = reader.ReadToEnd();
int len1 = res.IndexOf("</code>");
int len2 = res.IndexOf("<code>");
string code = res.Substring((len2 + 6), (len1 - len2 - 6));
//Response.Write(code);
int len3 = res.IndexOf("</msg>");
int len4 = res.IndexOf("<msg>");
string msg = res.Substring((len4 + 5), (len3 - len4 - 5));
Response.Write(msg);
Response.End();
return Json(msg, JsonRequestBehavior.AllowGet);
}
else
{
//访问失败
return Json("", JsonRequestBehavior.AllowGet);
}
}
//匹配验证码
public ActionResult take()
{
string mobile_code = Session["mobile_code"].ToString();
return Json(mobile_code, JsonRequestBehavior.AllowGet);
}