大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全家桶1年46，售后保障稳定
首先创建一个工具类
工具类AliyunMessageUtil代码如下所示：
public class AliyunMessageUtil {
private static final String product = "Dysmsapi";
// 产品域名,开发者无需替换
private static final String domain = "dysmsapi.aliyuncs.com";
// 此处需要替换成开发者自己的AK(在阿里云访问控制台寻找) TODO
private static final String accessKeyId = "*************";
private static final String accessKeySecret = "*****************";
public static SendSmsResponse sendSms(Map<String, String> paramMap) throws com.aliyuncs.exceptions.ClientException {
// 可自助调整超时时间
System.setProperty("sun.net.client.defaultConnectTimeout", "10000");
System.setProperty("sun.net.client.defaultReadTimeout", "10000");
// 初始化acsClient,暂不支持region化
IClientProfile profile = DefaultProfile.getProfile("cn-hangzhou", accessKeyId, accessKeySecret);
DefaultProfile.addEndpoint("cn-hangzhou", "cn-hangzhou", product, domain);
IAcsClient acsClient = new DefaultAcsClient(profile);
// 组装请求对象-具体描述见控制台-文档部分内容
SendSmsRequest request = new SendSmsRequest();
// 必填:待发送手机号
request.setPhoneNumbers(paramMap.get("phoneNumber"));
// 必填:短信签名-可在短信控制台中找到
request.setSignName("*******");
// 必填:短信模板-可在短信控制台中找到
request.setTemplateCode("************");
// 可选:模板中的变量替换JSON串,如模板内容为"亲爱的${name},您的验证码为${code}"时,此处的值为
request.setTemplateParam(paramMap.get("jsonContent"));
// hint 此处可能会抛出异常，注意catch
SendSmsResponse sendSmsResponse = acsClient.getAcsResponse(request);
return sendSmsResponse;
}
}
发送验证码功能实现
@PostMapping("/sendMobileCode")
public Map<String, Object> sendMobileCode(String phoneNumber) throws ClientException {
String randomNum = getSixNum();
String jsonContent = "{\"code\":\"" + randomNum + "\"}";
Map<String, String> paramMap = new HashMap<>();
paramMap.put("phoneNumber", phoneNumber);
paramMap.put("jsonContent", jsonContent);
SendSmsResponse sendSmsResponse = AliyunMessageUtil.sendSms(paramMap);
if(!(sendSmsResponse.getCode() != null && sendSmsResponse.getCode().equals("OK"))) {
if(sendSmsResponse.getCode() == null) {
//这里可以抛出自定义异常
Map<String, Object> map = new HashMap<>();
map.put("code", "error");
return map;
}
if(!sendSmsResponse.getCode().equals("OK")) {
//这里可以抛出自定义异常
//返回结果
Map<String, Object> map = new HashMap<>();
map.put("code", "error");
return map;
}
}
//把验证码保存到map
map.put(phoneNumber, randomNum);
//手机号验证码发送成功
Map<String, Object> map = new HashMap<>();
map.put("code", randomNum);
return map;
}
//生成随机验证码
public static String getSixNum() {
String str = "0123456789";
StringBuilder sb = new StringBuilder(4);
for (int i = 0; i < 6; i++) {
char ch = str.charAt(new Random().nextInt(str.length()));
sb.append(ch);
}
return sb.toString();
}
}
当然业务中也要添加根据用户手机号查询的方法然后写sql进行查询
前台页面
<!-- 手机验证码 -->
<form id="phone" onsubmit="return false" class="layui-form" style="display: none">
<input id="protectMTel" name="protectMTel" placeholder="手机号" type="text" lay-verify="required"
class="layui-input input">
<hr class="hr15">
<div class="layui-inline layui-show-xs-block" style="width: 60%;">
<input id="PhonePassword" name="PhonePassword" lay-verify="" placeholder="验证码" type="text"
class="layui-input input">
</div>
<div class="layui-inline layui-show-xs-block" style="width: 38%;">
<input type="button" id="second" value="获取验证码" />
</div>
<hr class="hr15">
<input value="登录" class="phone" lay-submit lay-filter="login" style="width:100%;" type="submit">
<hr class="hr20">
<button class="layui-btn set" style="width: 48%;" data-type="reload" lay-filter="set"
value="password"><i class="layui-icon"></i>
密码登陆</button>
<button class="layui-btn set" style="width: 48%;" data-type="reload" lay-filter="set"
value="email"><i class="layui-icon"></i>
其他方式</button>
</form>
前台js代码 这里用了token拦截
<script>
layui.use(['form'], function() {
$ = layui.jquery;
var form = layui.form,
layer = layui.layer;
//监听提交
form.on('submit(login)', function(data) {
//通过Ajax调用登录接口
$.ajax({
type: 'post', //提交方式get或post
url: globalData.server + 'login', //提交路径
data: {
"loginName": $("#loginName").val(),
"password": $("#password").val(),
"code": $("#PhonePassword").val(),
"phoneNumber": $("#protectMTel").val()
},
dataType: 'json',
success: function(res) {
localStorage.token = res.token;
var user = res.data;
var myArray = new Array();
if (user != null) {
localStorage.user = user;
globalData.setUserInfo(user.id, user.loginName, user.roles, user
.rolesIds);
window.location.href = 'main.html';
} else {
layer.alert('登录失败' + res.message, {
icon: 1,
time: 2000
}); //提示信息
}
},
error: function() {
alert("系统异常！！！");
}
});
return false;
})
});
$(function() {
$("#second").click(function() {
sendCode($("#second"));
});
v = getCookieValue("secondsremained"); //获取cookie值
if (v > 0) {
settime($("#second")); //开始倒计时
}
})
//发送验证码
function sendCode(obj) {
var phonenum = $("#protectMTel").val();
var result = isPhoneNum();
if (result) {
//ajax调用后台
$.ajax({
type: 'post', //提交方式get或post
url: "" + globalData.server + 'sendMobileCode', //提交路径 globalData.server+'login'
data: {
phoneNumber: phonenum
},
dataType: 'json',
success: function(res) {
if (res.code == 'error') {
alert("发送失败，请重试！");
} else {
alert("发送成功，请查看手机！");
alert("验证码为：" + res.code);
}
},
error: function() {
alert("系统异常！！！");
}
});
addCookie("secondsremained", 60, 60); //添加cookie记录,有效时间60s
settime(obj); //开始倒计时
}
}
//开始倒计时60s
var countdown;
function settime(obj) {
countdown = getCookieValue("secondsremained");
if (countdown == 0) {
obj.removeAttr("disabled");
obj.val("免费获取验证码");
return;
} else {
obj.attr("disabled", true);
obj.val("重新发送(" + countdown + ")");
countdown--;
editCookie("secondsremained", countdown, countdown + 1);
}
setTimeout(function() {
settime(obj)
}, 1000) //每1000毫秒执行一次
}
//校验手机号是否合法
function isPhoneNum() {
var phonenum = $("#protectMTel").val();
var myreg = /^1(3|4|5|6|7|8|9)\d{9}$/; // 正则表达式验证手机号码格式是否正确 /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/
if (!myreg.test(phonenum)) {
alert('请输入有效的手机号码！');
return false;
} else {
return true;
}
}
//发送验证码时添加cookie
function addCookie(name, value, expiresHours) {
var cookieString = name + "=" + escape(value);
//判断是否设置过期时间,0代表关闭浏览器时失效
if (expiresHours > 0) {
var date = new Date();
date.setTime(date.getTime() + expiresHours * 1000);
cookieString = cookieString + ";expires=" + date.toUTCString();
}
document.cookie = cookieString;
}
//修改cookie的值
function editCookie(name, value, expiresHours) {
var cookieString = name + "=" + escape(value);
if (expiresHours > 0) {
var date = new Date();
date.setTime(date.getTime() + expiresHours * 1000); //单位是毫秒
cookieString = cookieString + ";expires=" + date.toGMTString();
}
document.cookie = cookieString;
}
//根据名字获取cookie的值
function getCookieValue(name) {
var strCookie = document.cookie;
var arrCookie = strCookie.split("; ");
for (var i = 0; i < arrCookie.length; i++) {
var arr = arrCookie[i].split("=");
if (arr[0] == name) {
return unescape(arr[1]);
break;
} else {
return "";
break;
}
}
}
</script>
大概是思路就是这样。阿里短信服务需要自己去申请开通，开通后申请签名和短信模板通过后才能使用。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/215903.html原文链接：https://javaforall.net
