短信验证码,验证码确认接口(以及通过Ajax调用接口)

短信验证码,验证码确认接口(以及通过Ajax调用接口)

    最近在做一个功能,需求是开发一个可以发送短信验证码的webserver服务。短信平台是客户提供的。验证码为6位纯数字。用C#开发。

先贴一下接口代码

 /// <summary>
        /// 短信验证码
        /// </summary>
        /// <returns></returns>
        public static string SMSverificationcode(string phonenumber)
        {
         string time = DateTime.Now.ToString("yyyy/MM/dd hh:mm:ss");
         HttpContext.Current.Response.ContentEncoding = System.Text.Encoding.UTF8;
         Dictionary<string, object> dictRtn = new Dictionary<string, object>();
         List<Dictionary<string, string>> roleInfoList = new List<Dictionary<string, string>>();
         
         //连接db
         IGSPDatabase db = Genersoft.Platform.Core.DataAccess.Database.GetDatabase(vsZTBH);
         string SendData = "";
                #region 验证手机号是否存在,如果存在获取员工工号

                vsSql = "select * from idmidentityinfo where phone='" + phonenumber + "'";
                WriteLog("vsSql: " + vsSql, "短信验证码");
                DataSet userinto = new DataSet();
                userinto = db.ExecuteDataSet(vsSql.ToString());
                if (userinto.Tables[0].Rows.Count == 0)
                {
                    string message = "该手机号不存在,请检查!";
                    //StringBuilder SendDataFormat = new StringBuilder();

                    Dictionary<string, string> roleDic = new Dictionary<string, string>();

                    dictRtn.Add("status", "1");
                    dictRtn.Add("message", message);
                    dictRtn.Add("time", time);

                    SendData = new JavaScriptSerializer().Serialize(dictRtn);
                    WriteLog("SendData: " + SendData, "短信验证码");
                    return SendData;
                }

                DataRow vHeaderRow = userinto.Tables[0].Rows[0];
                string usercode = Convert.ToString(vHeaderRow["CODE"]);
                #endregion
                
                #region 获取验证码
                string VerificationCode = CreateRandomNumber(6);
                #endregion
                #region 发送短信
                string ddurl = $"此处为你的url";
                HttpUtil http = new HttpUtil();
                DDMessageJson msj = new DDMessageJson();
                //DDmsg ddmsg = new DDmsg(resulturl);
                msj.Type = "MS";
                msj.title = "验证码推送";
                msj.content = "您的验证码是" + VerificationCode + ",转发给他人可能导致账号被盗,请勿泄露,谨防被骗。";
                msj.touser = usercode;
                string ReturnData = http.Post(ddurl,Newtonsoft.Json.JsonConvert.SerializeObject(msj));
                #endregion

                WriteLog("ReturnData: " + ReturnData, "短信验证码");

                #region 返回数据处理
                JObject objret = JObject.Parse(ReturnData);
                string status = objret["status"].ToString();
                string msg = objret["msg"].ToString();
                WriteLog("解析数据:【" + status + "】【" + msg + "】", "短信验证码"); 

                if (status == "0")
                {
                    Dictionary<string, string> roleDic = new Dictionary<string, string>();
                    dictRtn.Add("status", status);
                    dictRtn.Add("message", msg);
                    dictRtn.Add("time", time);
                    SendData = new JavaScriptSerializer().Serialize(dictRtn);
                    WriteLog("SendData: " + SendData, "短信验证码");
                    vsSql = ("INSERT INTO SMSLOG(SMSLOG_CODE,SMSLOG_phonenumber,symk_VerificationCode,symk_TIME) VALUES('"
                               + usercode + "','"
                               + phonenumber + "','"
                               + VerificationCode + "',"
                               + "to_date('" + time + "', 'yyyy-mm-dd hh24:mi:ss'))");
                    WriteLog("插入SQL:" + vsSql, "短信验证码");
                    db.ExecSqlStatement(vsSql);
                    db.Commit();
                }
                else
                {
                    Dictionary<string, string> roleDic = new Dictionary<string, string>();

                    dictRtn.Add("status", status);
                    dictRtn.Add("message", msg);
                    dictRtn.Add("time", time);

                    SendData = new JavaScriptSerializer().Serialize(dictRtn);
                    WriteLog("SendData: " + SendData, "短信验证码");
                }
                #endregion
                return SendData;
                }
            catch (Exception ex)
            {
                db.Rollback();
                WriteLog("异常: " + ex.ToString(), "短信验证码");
                Dictionary<string, string> roleDic = new Dictionary<string, string>();
                dictRtn.Add("status", "1");
                dictRtn.Add("message", ex.ToString());
                dictRtn.Add("time", time);

                SendData = new JavaScriptSerializer().Serialize(dictRtn);
                WriteLog("SendData: " + SendData, "短信验证码");
                return SendData;
            }
            finally
            {
                db.Close();
            }
       }

生成验证码的方法

/// <summary>
        /// 生成指定位数的随机数字码
        /// </summary>
        /// <param name="length"></param>
        /// <returns></returns>
        public static string CreateRandomNumber(int length)
        {
            Random random = new Random();
            StringBuilder sbMsgCode = new StringBuilder();
            for (int i = 0; i < length; i++)
            {
                sbMsgCode.Append(random.Next(0, 9));
            }
            return sbMsgCode.ToString();
        }

下面是前端界面

通过点击获取验证码按钮调用webserver接口获取验证码
点击获取验证码接口后手机或者钉钉上会收到短信或者消息
短信:
在这里插入图片描述
钉钉:
在这里插入图片描述
前端是通过ajax请求服务,代码如下:

$.ajax({
                    data: JSON.stringify(param),
                    url: 这里是发布的webserver接口地址,
                    type: "POST",
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",
                    cache: false,
                    async: true,
                    success: function (json) {
                        debugger;
                        if (json && json.d) {
                            var data = eval('(' + json.d + ')');
                            status = data['status'];
                            message = data['message'];
                            url = data['url'];
                            $("#identification").next(".gwrap-tip").html(message);
                            if (status == 0) {
                                window.parent.parent.location.href = url.text.content;
                            }
                        }
                    },
                    error: function (xml, status) {
                        debugger;
                        gsp.idm.errorHandler.ajaxError(xml, status, function () { });
                    }
                });
  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,首先需要确定一下阿里云短信接口调用方式和参数。假设接口已经可以正常调用,我们可以按照以下步骤来实现用户注册功能: 1. 创建一个用于发送验证码的按钮,并添加点击事件监听器。 ```html <button id="send-verify-code">发送验证码</button> ``` ```javascript const sendVerifyCodeBtn = document.getElementById('send-verify-code'); sendVerifyCodeBtn.addEventListener('click', e => { // TODO: 发送验证码 }); ``` 2. 在点击事件监听器中,首先需要判断距离上次发送验证码是否已经超过5分钟,如果没有超过则不允许再次发送。 ```javascript const sendVerifyCode = (phone) => { // TODO: 调用阿里云短信接口发送验证码 }; let lastSendTime = 0; // 上次发送验证码的时间戳 sendVerifyCodeBtn.addEventListener('click', e => { const now = Date.now(); if (now - lastSendTime < 300000) { // 5分钟内不允许再次发送 alert('验证码已发送,请等待5分钟后再试!'); return; } // TODO: 获取手机号码,并调用 sendVerifyCode 函数发送验证码 lastSendTime = now; }); ``` 3. 在 `sendVerifyCode` 函数中,使用 AJAX 调用阿里云短信接口,并根据接口返回结果进行处理。 ```javascript const sendVerifyCode = (phone) => { // TODO: 替换以下代码中的 accessKeyId, secretAccessKey, signName, templateCode 和 endpoint const data = { PhoneNumbers: phone, SignName: '替换为阿里云短信签名', TemplateCode: '替换为阿里云短信模板编号', AccessKeyId: '替换为阿里云 AccessKeyId', Action: 'SendSms', Version: '2017-05-25', RegionId: 'cn-hangzhou', SignatureMethod: 'HMAC-SHA1', SignatureVersion: '1.0', Timestamp: new Date().toISOString(), }; const queryParams = Object.keys(data).sort().map(key => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`).join('&'); const stringToSign = `GET&%2F&${encodeURIComponent(queryParams)}`; const signature = CryptoJS.enc.Base64.stringify(CryptoJS.HmacSHA1(stringToSign, '替换为阿里云 AccessKeySecret' + '&')); const url = `https://dysmsapi.aliyuncs.com/?${queryParams}&Signature=${encodeURIComponent(signature)}`; // 发送 AJAX 请求 const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.onreadystatechange = () => { if (xhr.readyState === XMLHttpRequest.DONE) { if (xhr.status === 200) { const response = JSON.parse(xhr.responseText); if (response.Code === 'OK') { alert('验证码发送成功!'); } else { alert('验证码发送失败:' + response.Message); } } else { alert('验证码发送失败:' + xhr.statusText); } } }; xhr.send(); }; ``` 4. 在注册表单中添加一个输入框用于输入验证码,并在提交表单时验证验证码是否正确。 ```html <form> <label for="phone">手机号码:</label> <input type="text" id="phone" name="phone"> <label for="verify-code">验证码:</label> <input type="text" id="verify-code" name="verify-code"> <button type="submit">注册</button> </form> ``` ```javascript const form = document.querySelector('form'); form.addEventListener('submit', e => { e.preventDefault(); // TODO: 获取手机号码和验证码,并进行验证 }); ``` 以上就是一个简单的用户注册功能实现,其中涉及到了 AJAX 调用和阿里云短信接口的使用。需要注意的是,阿里云短信接口调用方式可能会随着接口版本的变化而变化,建议在使用前先仔细阅读官方文档并进行测试。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值