今天给大家分享一下利用Springboot玩腾讯云短信验证码的服务,把真正的短信验证码发送到手机上并且存进Redis里面,再判断验证码的正确性实现注册用户功能,为什么不用到登录功能,因为腾讯云的短信验证码免费的只有一百条,博主没钱购买。。。
首先,大家按照下面这个博主分享的方法,先注册公众号和注册腾讯云服务器,我只是在他的基础上加上了注册功能的实现,并补充一下需要注意的地方。
博主
一,博主用的是centos7系统,先在虚拟机查出虚拟机的ip地址,用命令ifconfig可查看,这个inet对应的就是ip地址,并记住
二,再用ping命令测试你的centos7是否可以连接本机,本机指的是你当前的windows电脑,用ipconfig查询IP地址
有回应表示ping成功。
整合到springboot中,我们现在在yml的配置文件中连接Redis
#配置redis
redis:
#刚刚查询到的虚拟机IP地址
host: ***
port: 6379
timeout: 20000
#redis的密码,如果没设置就删掉
password: ***
database: 0
pool:
max-active: 8
min-idle: 0
max-idle: 8
max-wait: -1
把上面的***换成你们自己电脑的信息,然后就根据那个博主的文章进行操作。
然后根据你redis的安装路径启动redis,我的是命令是 redis-server /etc/redis.conf ,然后访问 redis-cli ,有密码的需要用auth命令登录。
注册页代码
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>注册</title>
<!-- Font Icon -->
<link rel="stylesheet" th:href="@{/fonts/material-icon/css/material-design-iconic-font.min.css}">
<!-- Main css -->
<link rel="stylesheet" th:href="@{/css/style-regist.css}">
</head>
<body>
<div class="main" style="padding: 50px 0">
<!-- Sing in Form -->
<section class="sign-in">
<div class="container">
<div class="signin-content">
<div class="signin-image">
<figure><img th:src="@{/images/signup-image.jpg}" alt="sing up image"></figure>
<a th:href="@{/toLogin}" class="signup-image-link">登录</a>
</div>
<div class="signin-form">
<h2 class="form-title">欢迎注册</h2>
<h6 id="msg" style="color: orangered"></h6>
<form method="POST" class="register-form" id="login-form">
<div class="form-group">
<label for="username"><i class="zmdi zmdi-account material-icons-name"></i></label>
<input type="text" name="username" id="username" placeholder="用户名"/>
</div>
<div class="form-group">
<label for="password"><i class="zmdi zmdi-lock"></i></label>
<input type="password" name="password" id="password" placeholder="密码" required>
</div>
<div class="form-group">
<label for="email"><i class="zmdi zmdi-email"></i></label>
<input type="email" name="email" id="email" placeholder="邮箱" required>
</div>
<div class="form-group">
<label for="address"><i class="zmdi zmdi-pin"></i></label>
<input type="text" name="address" id="address" placeholder="地址" required>
</div>
<div class="form-group">
<label for="phone"><i class="zmdi zmdi-phone"></i></label>
<input type="text" name="phone" id="phone" placeholder="电话"/>
</div>
<div class="form-group display-flex align-items-center">
<label for="phoneCode"><i class="zmdi zmdi-shield-check"></i></label>
<input type="text" name="phoneCode" id="phoneCode" placeholder="验证码" style="width: 50%">
<input class="form-submit " type="button" name="setPhoneCode" id="setPhoneCode"
value="发送验证码" onclick="settime(this)" style="padding: 8px 35px;margin-top: 0px"/>
</div>
<div class="form-group form-button">
<input type="button" name="register" id="register" class="form-submit" value="注册"/>
</div>
</form>
<div class="social-login">
<span class="social-label">Or login with</span>
<ul class="socials">
<li><a href="#"><i class="display-flex-center zmdi zmdi-facebook"></i></a></li>
<li><a href="#"><i class="display-flex-center zmdi zmdi-twitter"></i></a></li>
<li><a href="#"><i class="display-flex-center zmdi zmdi-google"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- JS -->
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/main-regist.js}"></script>
<script type="text/javascript">
$(function () {
$("#register").click(function () {
var username = $("#username").val();
var password = $("#password").val();
var email = $("#email").val();
var address = $("#address").val();
var phone = $("#phone").val();
var phoneCode = $("#phoneCode").val();
$.ajax({
type: "post",
url: "/user/register",
data: {
username: username,
password: password,
email: email,
address: address,
phone: phone,
phoneCode: phoneCode,
},
dataType: "json",
success: function (data) {
console.log("data-------", data)
if (data.code == 200) {
{
console.log(data.message)
window.location.href = "/index";
}
} else {
$("#msg").text(data.message);
console.log(data.code);
console.log(data.message)
// refresh();
}
}
});
})
})
$(function () {
$("#setPhoneCode").click(function () {
var phone = $("#phone").val();
console.log(phone)
$.ajax({
type: "post",
url: "/user/phoneCode",
data: {
phone: phone,
},
dataType: "json",
success: function (data) {
console.log("data-------", data)
if (data.code == 200) {
{
console.log(data.message)
//window.location.href = "/index";
}
} else {
$("#msg").text(data.message);
console.log(data.code);
console.log(data.message)
// refresh();
}
}
});
})
})
/*发送短信后60秒才能再次发送*/
var countdown = 60;
function settime(val) {
if (countdown == 0) {
val.removeAttribute("disabled");
val.value = "发送验证码";
countdown = 60;
} else {
val.setAttribute("disabled", true);
val.value = "重新发送(" + countdown + ")";
countdown--;
}
setTimeout(function () {
settime(val)
}, 1000)
}
</script>
</body>
</html>
控制器Controller
//注册
@RequestMapping("/register")
@ResponseBody
public RespBean register(User user,String phone,String phoneCode){
//首先去redis中查该规定时间内手机号有没有生成验证码
String code = redisTemplate.opsForValue().get(phone);
System.out.println("redis中的验证码----------"+code);
AssertUtil.isTrue(StringUtil.isEmpty(code), "验证码已过期!");
AssertUtil.isTrue(!(phoneCode.equals(code)),"验证码错误");
userService.register(user);
return RespBean.success("注册成功");
}
Service层
void register(User user);
Serviceimpl
//注册
@Override
@Transactional(propagation = Propagation.REQUIRED, rollbackFor = Exception.class)
public void register(User user) {
AssertUtil.isTrue(StringUtil.isEmpty(user.getUsername()), "用户名不能为空!");
AssertUtil.isTrue(null != this.findUserByUsername(user.getUsername()), "用户名已存在");
user.setPassword(passwordEncoder.encode(user.getPassword()));
user.setStatus("正常");
user.setType(0);
user.setImgPath("/upload/8473656f-695c-4e5d-9d7f-190f58be3249.jpg");
AssertUtil.isTrue(!(this.save(user)), "用户添加失败");
}
默认是0号库,先看看库里面有没有key
然后我们就发送一下验证码,有可能会遇到报错问题,说连接超时等问题,可能出现的原因:
第一,6379端口没开放
第二,ip地址写错了或者没用密码登录
第三,防火墙没关闭,用以下命令操作
1、查看防火墙状态
systemctl status firewalld.service
active(running)说明防火墙已经被打开了。
Active: inactive (dead) :说明防火墙关闭。
2、在命令行中输入systemctl stop firewalld.service 关闭防火墙
3、再在命令行中输入命令“systemctl disable firewalld.service” 永久关闭防火墙
最后就发送成功啦,也收到短信了,还是挺好玩的。