Springboot整合Redis实现腾讯云发送短信验证码并实现注册功能

一.前言

今天给大家分享一下利用Springboot玩腾讯云短信验证码的服务,把真正的短信验证码发送到手机上并且存进Redis里面,再判断验证码的正确性实现注册用户功能,为什么不用到登录功能,因为腾讯云的短信验证码免费的只有一百条,博主没钱购买。。。

二.功能实现

第一步

首先,大家按照下面这个博主分享的方法,先注册公众号和注册腾讯云服务器,我只是在他的基础上加上了注册功能的实现,并补充一下需要注意的地方。

博主

第二步

一,博主用的是centos7系统,先在虚拟机查出虚拟机的ip地址,用命令ifconfig可查看,这个inet对应的就是ip地址,并记住
Springboot整合Redis实现腾讯云发送短信验证码并实现注册功能_第1张图片

二,再用ping命令测试你的centos7是否可以连接本机,本机指的是你当前的windows电脑,用ipconfig查询IP地址
Springboot整合Redis实现腾讯云发送短信验证码并实现注册功能_第2张图片
Springboot整合Redis实现腾讯云发送短信验证码并实现注册功能_第3张图片
有回应表示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命令登录。

在这里插入图片描述

第四步

实现注册功能
Springboot整合Redis实现腾讯云发送短信验证码并实现注册功能_第4张图片

注册页代码

<!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” 永久关闭防火墙

三.总结

最后就发送成功啦,也收到短信了,还是挺好玩的。

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

Springboot整合Redis实现腾讯云发送短信验证码并实现注册功能_第5张图片
希望大家关注一下《南辞个人公众号》哈,有资料也会跟大家分享,最后希望大家多多指教,大家一起进步。

你可能感兴趣的:(项目,腾讯云,spring,boot,redis,intellij,idea,java)