使用ASP.NET.MVC制作手机接收验证码

码外狂徒——张三

于 2021-12-19 21:40:22 发布

阅读量1.1k

点赞数 2

分类专栏：个人学习总结文章标签： asp.net mvc 阿里云

本文链接：https://blog.csdn.net/weixin_57726512/article/details/122030547

版权

个人学习总结专栏收录该内容

47 篇文章 2 订阅

订阅专栏

手机接收验证码需要通过第三方平台，像阿里云，华为云。但是阿里云，华为云比较适用于企业，对于在学习的学生并不太友好，所以我在这里给大家推荐一个注册就可以免费的“互亿无线”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 = "ＸＸＸＸＸＸＸ";//用户名是登录用户中心->验证码、通知短信->帐户及签名设置->APIID
            string password = "ＸＸＸＸＸＸＸ"; //密码是请登录用户中心->验证码、通知短信->帐户及签名设置->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);
        }

码外狂徒——张三

关注

2
点赞
踩
17

收藏

觉得还不错? 一键收藏
3
评论
使用ASP.NET.MVC制作手机接收验证码

手机接收验证码需要通过第三方平台，像阿里云，华为云。但是阿里云，华为云比较适用于企业，对于在学习的学生并不太友好，所以我在这里给大家推荐一个注册就可以免费的“互亿无线”https://user.ihuyi.com/new/login.html,这个网站注册的人都可以拥有10条免费的短信，并且其中也有对接的模板。废话不多说：上代码@{ Layout = null;}<!DOCTYPE html><html><head> <met
复制链接

扫一扫

专栏目录