开通阿里云短信服务
阿里云官网
创建API的Key
可以使用手机号或者刷脸来进行创建Key
创建成功
开通完成以后接下来实现代码请求阶段
配置maven依赖
<!-- 阿里云 oss 短信 依赖-->
<dependency>
<groupId>com.aliyun</groupId>
<artifactId>dysmsapi20170525</artifactId>
<version>2.0.24</version>
</dependency>
在配置类中新建一个AccessKey类
package com.example.erp_project.config;
/**
* @author Lolo don‘t feel
* @create 2022-05-09 16:09
* 阿里云短信服务
*/
public class AccessKey {
// 阿里云短信服务
// accessKeyId
public static final String accessKeyId = "你自己的accessKeyId";
// accessKeySecret
public static final String accessKeySecret = "你自己的accessKeySecret";
// 短信模板code 对应下图的，你自己的code即可
//账户注册
public static final String templateCode = "你自己创建的模板的code";
//密码重置
public static final String templateCode2 = "你自己创建的模板的code";
}
创建短信发送服务类（在工具类中创建）
package com.example.erp_project.util;
import com.aliyun.tea.TeaException;
import com.example.erp_project.config.AccessKey;
/**
* @author Lolo don‘t feel
* 短信验证码
*/
public class Sample {
/**
* 创建一个阿里云短信客户端的方法
* 使用AK&SK初始化账号Client
*
* @param accessKeyId
* @param accessKeySecret
* @return Client
* @throws Exception
*/
public static com.aliyun.dysmsapi20170525.Client createClient(String accessKeyId, String accessKeySecret) throws Exception {
// 创建一个配置对象，用于存储AccessKey ID和AccessKey Secret
com.aliyun.teaopenapi.models.Config config = new com.aliyun.teaopenapi.models.Config()
// 必填，您的 AccessKey ID
.setAccessKeyId(accessKeyId)
// 必填，您的 AccessKey Secret
.setAccessKeySecret(accessKeySecret);
// 设置请求的域名
config.endpoint = "dysmsapi.aliyuncs.com";
// 使用配置对象创建一个新的阿里云短信客户端并返回
return new com.aliyun.dysmsapi20170525.Client(config);
}
/**
* 发送验证码
*
* @param phone 电话
* @param verificationCode 验证码
*/
// 定义一个发送短信验证码的方法，参数为手机号、验证码和类型
/*我这里设置的参数是三个参数，因为我定义了一个status来辨别发送的短信模板，
*正常情况下是手机号和验证码两个参数，如果你的模板不一样也可以使用一个参数来辨别 该使用哪个模板
*/
public static void sendingCode(String phone, String verificationCode, Integer status) {
// 创建一个阿里云短信客户端对象
com.aliyun.dysmsapi20170525.Client client = null;
try {
// 使用AccessKeyId和AccessKeySecret创建客户端
//引用上方createClient方法创建客户端
client = Sample.createClient(AccessKey.accessKeyId, AccessKey.accessKeySecret);
} catch (Exception e) {
e.printStackTrace();
}
// 创建一个发送短信请求对象，并设置签名、手机号和模板参数
com.aliyun.dysmsapi20170525.models.SendSmsRequest sendSmsRequest = new com.aliyun.dysmsapi20170525.models.SendSmsRequest()
// 设置签名名称
.setSignName("暖意ERP")
// 设置手机号
.setPhoneNumbers(phone)
// 设置模板参数验证码
.setTemplateParam("{\"code\":\"" + verificationCode + "\"}");
//注：如果你只设置了一个通用模板你就把sendSmsRequest.setTemplateCode(AccessKey.templateCode);从if中拿出来就可以了
// 根据类型设置不同的模板代码
if (status == 1) {
//如果类型为1，则使用模板代码1注册模板
sendSmsRequest.setTemplateCode(AccessKey.templateCode);
} else if (status == 2) {
//如果类型为2，则使用模板代码2重置密码模板
sendSmsRequest.setTemplateCode(AccessKey.templateCode2);
}
// 创建一个运行时选项对象
com.aliyun.teautil.models.RuntimeOptions runtime = new com.aliyun.teautil.models.RuntimeOptions();
try {
// 使用客户端发送短信请求
client.sendSmsWithOptions(sendSmsRequest, runtime);
} catch (TeaException error) {
// 处理TeaException异常
com.aliyun.teautil.Common.assertAsString(error.message);
} catch (Exception _error) {
// 处理其他异常
TeaException error = new TeaException(_error.getMessage(), _error);
com.aliyun.teautil.Common.assertAsString(error.message);
}
}
}
接下来就是在短信验证的时候进行验证了（loginController）
这里是账户注册的时候进行短信验证，我将结果保存到了session中用于账户提交注册的时候进行验证
/*
* 验证码获取，用于账户注册及账户密码重置
* sendValidateCode
* */
@GetMapping("/sendValidateCode")
public ResultUtil sendValidateCode(@RequestParam(value = "phone") String phone,
@RequestParam(value = "status") Integer status, HttpSession session) {
//测试手机号和验证码类型是否正确
// System.out.println("手机号："+phone);
// System.out.println("验证码类型："+status);
// 判断手机号和验证码类型是否为空
if (phone != null && status != null) {
// 验证码
String verificationCode = String.valueOf((int) ((Math.random() * 9 + 1) * 100000));
// System.out.println("验证码："+verificationCode);
//验证码发送,调用短信发送工具类
Sample.sendingCode(phone, verificationCode, status);
// 将验证码和当前手机号存入session,在账户注册的时候进行校验操作
session.setAttribute("phone", phone);
//保存当前发送时间
session.setAttribute("sendTime", new Date());
//将状态存入session
session.setAttribute("status", status);
// 将验证码存入session
session.setAttribute("verificationCode", verificationCode);
// 返回成功信息
return ResultUtil.ok(0, "验证码发送成功,请注意查收哦！");
}
// 返回失败信息
return ResultUtil.error("验证码发送失败");
}
获取验证码对应的js部分代码
<!--引用第三方插件（消息通知插件）-->
<script th:src="@{/dist/notify/notify.js}"></script>
<script>
layui.use(['notify'], function () {
var $ = layui.$;
var form = layui.form;
var layer = layui.layer;
var util = layui.util;
var notify = layui.notify;
// 获取验证码进行验证
$('#validate-get-vercode').on('click', function () {
var isValid = form.validate('#reg-cellphone'); // 验证手机号进行主动触发
//获取手机号
var cellphone = $('#reg-cellphone').val();
//console.log("注册手机号："+cellphone);
// 验证通过
if (isValid) {
//向后端发送验证码请求
$.ajax({
type: 'GET',
url: "/auth/sendValidateCode",//实现验证
data: {"phone": cellphone, "status": 1},
success: function (d) { // 返回的RequestResult的json对象
if (d.code === 0) {
notify.info(d.msg, "vcenter", "shadow", false);
/*
* 实现获取验证码按钮倒计时的代码
*/
//禁用按钮不可再次点击，这里如果不设置就会一直点击倒计时会重复计时
document.getElementById('validate-get-vercode').disabled = true;
// 倒计时60s以后可再次点击
var count = 60;//定义时间
var countdown = setInterval(function () {
if (count > 0) {
//按钮文字倒计时信息提示
document.getElementById('validate-get-vercode').innerText = count + 's后再次获取';
//时间减
count--;
} else {
//倒计时结束以后按钮文字提示显示
document.getElementById('validate-get-vercode').innerText = '获取验证码';
//取消按钮禁用，用于验证码过期以后进行再次获取
document.getElementById('validate-get-vercode').disabled = false;
clearInterval(countdown);
}
},
1000);
//按钮倒计时结束
} else {
notify.error(d.msg, "vcenter", "shadow", false);
}
},
})
}
});
});
</script>
下面就是点击注册账户按钮实现账户注册操作的代码
js部分
<!--引用第三方插件（消息通知插件）-->
<script th:src="@{/dist/notify/notify.js}"></script>
<script>
layui.use(['notify'], function () {
var $ = layui.$;
var form = layui.form;
var layer = layui.layer;
var util = layui.util;
var notify = layui.notify;
// 验证注册密码是否一致
form.verify({
// 确认密码
confirmPassword: function (value, item) {
var passwordValue = $('#password').val();
if (value !== passwordValue) {
return '两次密码输入不一致';
}
}
});
// 提交账户注册事件
form.on('submit(register)', function (data) {
var field = data.field; // 获取表单字段值
//验证码为6位
if (!/^\d{6}$/.test(field.vercode)) {
notify.warning('验证码必须为 6 位的数字', "vcenter", "shadow", false);
return false;
}
//验证密码
if (!/^[\S]{6,16}$/.test(field.password)) {
notify.warning('密码必须为 6 到 16 位的非空字符', "vcenter", "shadow", false);
return false;
}
// 是否勾选同意
if (!field.agreement) {
notify.info('您必须勾选同意服务条款才能注册账户', "vcenter", "shadow", false);
return false;
}
// 获取表单信息将账户及密码传递到后断进行验证
notify.loading("系统正在验证并注册新账户,请稍等", "vcenter", "shadow", false);
setTimeout(function () {
notify.destroyAll(); //先关闭loading
$.ajax({
type: 'POST',
url: "/auth/register",//实现账户注册请求
data: {
"account": field.cellphone, // 手机号
"vercode": field.vercode, // 验证码
"password": field.password, // 密码
"nickname": field.nickname // 昵称
},
success: function (d) { // 返回的RequestResult的json对象
if (d.code === 0) {
//账户注册成功
notify.success(d.msg, "vcenter", "shadow", false)
} else if (d.code === 1) {
//账户存在,或者验证码错误提示
notify.warning(d.msg, "vcenter", "shadow", false);
} else {
//账户注册失败
notify.error(d.msg, "vcenter", "shadow", false);
}
},
}).done(function () {
setTimeout(function () {
parent.location.reload();//重载页面
}, 1500);
});
}, 3000);
return false; // 阻止默认 form 跳转
});
});
</script>
接着再是controller代码
/*
* 账户注册
* register
* */
@PostMapping("/register")
public ResultUtil register(@RequestParam(value = "account") String account,
@RequestParam(value = "password") String password,
@RequestParam(value = "vercode") String vercode,
@RequestParam(value = "nickname") String nickname,HttpSession session) {
//测试数据
//System.out.println("账户："+account+"密码："+password+"验证码："+vercode+"昵称："+nickname);
//从session中获取验证码
String verificationCode = (String) session.getAttribute("verificationCode");
//从session中获取手机号
String phone = (String) session.getAttribute("phone");
//获取session中的发送时间
Date sendTime = (Date) session.getAttribute("sendTime");
//从session中获取验证码类型
Integer status = (Integer) session.getAttribute("status");
//第一步判断，这里必须要status为1，否则就是验证码类型错误
if (status != null && status == 1) {
//如果session中没有发送时间，则验证码失效，这里如果不做判断会报错导致下面时间判断出错
if (sendTime==null){
return ResultUtil.warning(1,"验证码已失效，请重新获取验证码");
}
//判断如果现在时间大于发送时间5分钟，则验证码失效
if (new Date().getTime() - sendTime.getTime() > 5 * 60 * 1000) {
//清空session中的手机号
session.removeAttribute("phone");
//清空session中的验证码
session.removeAttribute("verificationCode");
//清空session中的发送时间
session.removeAttribute("sendTime");
//验证码失效
return ResultUtil.warning(1, "验证码已失效，请重新获取验证码");
}
//判断当前的手机号和验证码是否与session中的手机号和验证码是否一致
if (phone.equals(account) && verificationCode.equals(vercode)) {
//根据账户查询用户信息，如果用户信息为空，则进行注册操作
UserEntity user = userService.getUserByAccount(account);
if (user == null) {
// 密码加密
String encrypt = MD5Util.encrypt(password);
// 创建用户实体
UserEntity userEntity = new UserEntity();
// 设置用户信息
userEntity.setAccount(account);
// 设置密码
userEntity.setPassword(encrypt);
//设置昵称
userEntity.setNickname(nickname);
//设置状态
userEntity.setStatus(1);
//设置角色
userEntity.setRoleId(2);
//进行注册
userService.registerAccount(userEntity);
//返回成功信息
return ResultUtil.ok(0, "账户注册成功！");
}
return ResultUtil.warning(1,"该账户已存在，请勿重复注册");
}
return ResultUtil.warning(1, "请输入正确的手机号或验证码");
}
return ResultUtil.error( "该验证码不适用于当前操作！");
}
