一、步骤:
参考阿里云注册步骤:点击这里参考阿里云注册步骤
1、阿里云: 首先要去阿里云平台注册账号,在页面最下方找到充值付款,充1块钱进去,然后再找到管理控制台,直接搜索短信服务,点击国内消息,添加签名和模板,找到控制台,鼠标移到用户头像,找到AccessKey管理,点击继续使用AccessKey,没有AccessKey的话就创建AccessKey。
2、.net(vs): 首先要去阿里云官网搜索短信服务,找到 短信服务SDK简介 - 短信服务,因为我是用.net实现的,所以可以通过直接添加Nuget 程序包依赖或下载阿里云.NET SDK开发工具包的方式安装阿里云.NET SDK,可以点击.NET SDK DEMO,去看一下示例。
二、代码:
实现效果需要引用aliyun-net-sdk-core和aliyun-net-sdk-dysmsapi。
1、HTML:
<input type="text" id="codeid" hidden />
<div class="weui-cell">
<div class="weui-cell__hd">
<label class="weui-label">手机号</label>
</div>
<div class="weui-cell__bd">
<input class="weui-input f15" placeholder="请输入手机号" type="text" name="PhoneNum" id="phone" autocomplete="off">
</div>
</div>
<div class="weui-cell weui-cell_vcode">
<div class="weui-cell__hd">
<label class="weui-label">验证码</label>
</div>
<div class="weui-cell__bd">
<input class="weui-input f15" placeholder="验证码" type="text" id="VFCode" autocomplete="off">
</div>
<div class="weui-cell__ft">
<button class="weui-vcode-btn f15" type="button" id="btnVF" style="color:#ff3300;">获取验证码</button>
</div>
</div>
2、jQuery:
var code = ""; //接收验证码
$('#btnVF').click(function () {
var count = 60;
var phone = $("#phone").val();//手机号码
phone = phone.trim(); //去空格
if (phone == "") {
$.alert("手机号不能为空!");
return false;
}
//手机号信息验证(11位数)
var personnelPhone = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
if (!personnelPhone.test(phone)) {
return false;
}
//开始计时
$("#btnVF").attr('disabled', true);
$("#btnVF").html("倒计时" + count + "秒");
var timer = setInterval(function () {
count--;
$("#btnVF").html("倒计时" + count + "秒");
if (count == 0) {
clearInterval(timer);
$("#btnVF").attr("disabled", false);//启用按钮
$("#btnVF").html("重新发送验证码");
code = "";//清除验证码。如果不清除,过时间后,输入收到的验证码依然有效
}
}, 1000);
var codeid = parseInt(Math.random() * (999999 - 100000) + 100000);//生成随机的6位数
var code = parseInt(codeid, 10);
$("#codeid").attr('value', code);//把生成验证码随机值存到隐藏的input框里面去
var code = $("#codeid").val();//生成的验证码
//向后台发送处理数据
$.ajax({
type: "POST", //用POST方式传输
dataType: "text", //数据格式:JSON
url: '../../MP_LoginMsg/OnLineLogin/Button2_Click', //目标地址
data: {
phone: phone,
code: code,
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
$.alert("获取验证码失败!");
$("#btnVF").attr("disabled", false);//启用按钮
$("#btnVF").html("获取验证码");
},
success: function (msg) {
if (msg == "ok") { //验证码发送成功返回值
} else {
$.alert("发送验证码失败");
}
}
});
return false;
});
3、控制器:
using Aliyun.Acs.Core;
using Aliyun.Acs.Core.Exceptions;
using Aliyun.Acs.Core.Profile;
public void Button2_Click()
{
IClientProfile profile = DefaultProfile.GetProfile("cn-hangzhou", "", ""); //("固定","AccessKeyID","AccessKeySecret")
DefaultAcsClient client = new DefaultAcsClient(profile);
CommonRequest request = new CommonRequest();
request.Method = Aliyun.Acs.Core.Http.MethodType.POST;
request.Domain = "dysmsapi.aliyuncs.com"; //不需要更改
request.Version = "2017-05-25"; //版本,不需要更改
request.Action = "SendSms";
string mobile = Request["phone"]; //获取手机号
string code = Request["code"]; //获取随机验证码
request.AddQueryParameters("PhoneNumbers", mobile); //手机号
request.AddQueryParameters("SignName", "签名"); //签名
request.AddQueryParameters("TemplateCode", "短信模板code"); //模版CODE
request.AddQueryParameters("TemplateParam", "{\"code\":\"" + code + "\"}"); //模板内容
try
{
CommonResponse response = client.GetCommonResponse(request);
Console.WriteLine(Encoding.Default.GetString(response.HttpResponse.Content));
HttpCookie ccode = new HttpCookie("code", code);
ccode.Expires = DateTime.Now.AddMinutes(2);
Response.Cookies.Add(ccode);
Response.Write("ok");
}
catch (ServerException er)
{
Response.Write("er");
Console.WriteLine();
}
}
到这里就讲完了使用阿里云短信服务的步骤和过程,有效果的话给个赞哦,看一下效果:
大家知道这里有个弊端吗?就是在页面生成验证码,存在一个安全问题,用户可以直接看到生成的验证码,所以要在控制器里面生成使用session来保存验证码进行对比:
转载:https://blog.csdn.net/xu2034029667/article/details/94582633