Spring boot 120秒内实现邮箱验证码的登录

1.准备工作:

1.1配置好spring boot导入邮件依赖包

<dependency>
     <groupId>org.springframework.boot</groupId>
     <artifactId>spring-boot-starter-mail</artifactId>
     <version>2.4.2</version>
</dependency>

1.2application.yml文件中的email配置, 在配置前要先把smtp服务打开,这里就不在阐述了,开启smtp服务可以百度得到

mail:
    host: smtp.qq.com  我这是qq邮件
    username:你的邮箱
    password: 开启smtp服务的密码

2.发送代码的实现

2.1 生成6位随机密码,并把6位随机数发送,来实现邮件的发送

@Component
public class UtilsTool{

    //生成6位随机数
    public char[] VerifyCode() {
        String chars = "1234567890qwertyuiopasdfghjklzxcvbnm";
        char[] rands = new char[6];
        for (int i = 0; i < 6; i++) {
            int rand = (int)(Math.random()*35);
            rands[i] = chars.charAt(rand);
        }
        return rands;
    }
 //实现邮箱验证码的发送
    @Autowired
    private JavaMailSender mailSender;
    public String SendEmailVerifyCode(String email) {
        String resultCode = String.valueOf(VerifyCode());
        try {
            SimpleMailMessage simpleMailMessage = new SimpleMailMessage();
            simpleMailMessage.setFrom("你发送方的邮箱");
            simpleMailMessage.setTo(email);
            simpleMailMessage.setSubject("System 验证码");
            simpleMailMessage.setText("尊敬的用户:<br /><hr>" +
                    "你的邮箱验证代码为:<h3>" + resultCode + "</h3>请在60s内完成验证!");
            mailSender.send(simpleMailMessage);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return resultCode;
    }
}

3.前端部分代码的实现

3.1前端邮箱登录代码实现

<div id="mail">
                <form class="layui-form login-bottom" action="/login" method="post">
                    <div class="center">
                        <div class="item" >
                            <span class="layui-icon layui-icon-user" style="font-size:20px; color: #A6B6D6;"></span>
                            <input type="text" name="email" class="inputs"  id="email" lay-verify="required"  placeholder="请输入您的邮箱" maxlength="24" style="padding-left: 12px; padding-top:3px; font-size: 18px;"/>
                        </div>
                        <div class="item">
                            <span class="layui-icon layui-icon-vercode" style="font-size:20px; color: #A6B6D6;"></span>
                            <input type="text" class="inputsEmail" name="verifycode"  placeholder="请输入验证码! "style="padding-left: 12px; padding-top:3px; font-size: 18px;"/>
                            <button type="button" id="sendMail" class="layui-btn layui-btn-normal" onclick="sendCode()">发送</button>
                        </div>
                    </div>
                    <div class="tip">
                        <a onclick="openregister()">用户注册</a>
                    </div>
                    <div class="layui-form-item" style="text-align:center; width:100%;height:100%;margin:0px;">
                        <input type="submit" class="login-btn" value="登录" />
                    </div>
                </form>
            </div>

3.2 利用ajax(异步)来进行后端的交互,利用javascript中的定时器来实现,点击按钮发送邮件,120秒后调用后台删除seesion

function sendCode(){
    var button = document.getElementById("sendMail");
    var email = document.getElementById("email").value;
    var xmlhttp = new XMLHttpRequest();
    var wait = 120;
    if(email.length > 0){
        //按钮值等于发送时才能执行下面语句
        if(button.innerHTML == "发送"){
            //客户端发送主要代码
            xmlhttp.open("POST", "/send?mail="+email, false);
            xmlhttp.send();

            
            if(xmlhttp.responseText){
                function countTime(){
                    wait --;
                    if(wait == -1){
                        clearInterval(stop);
                        //wait的值为-1时,调用后端映射地址为clear, 删除session值
                        xmlhttp.open("POST", "clear",false);
                        xmlhttp.send();
                        button.innerHTML = "发送";
                    }else{
                        button.innerHTML = wait + "秒";
                    }
                }
                var stop = setInterval(countTime, 1000);
            }
        }
    }
}

4.Controller层的实现

4.1客户端点击发送,调用后端映射地址为send的方法,然后进行发送邮件功能

@Autowired
    private UtilsTool utilsTool;


@RequestMapping("send")
    String sendMail(String mail, HttpServletRequest request){
        if(!mail.equals("") && mail != null){
            //调用Utils类中的.SendEmailVerifyCode方法
            String emailCode = String.valueOf(utilsTool.SendEmailVerifyCode(mail));
            request.getSession().setAttribute("emailCode", emailCode);
            System.out.println(emailCode+"     send");
            //return emailCode;
            return "redirect:/login";
        }
        return null;
    }

4.2进行邮箱验证登录,数据库可自行建,只要获得session并比较用户输入的验证码就可以了进行登录

@RequestMapping("login")
    String loginUserAll(User user, String verifycode, Model model, HttpServletRequest request){
        

        //得到seesion中值为emailCode的数据
        String emailCode = (String)request.getSession().getAttribute("emailCode");

        //调用service层
        User getUser = this.userService.loginUser(user);
        //如果没有此用户则直接返回登录界面
        if(getUser == null){
            return "page/user/user_login";
        }
        if(user.getEmail() == null){
            //验证密码,相同则登录, 不同则返回登录界面, 如果为root就进入后台管理界面,如果不是则进入前台
            if(getUser.getPassword().equals(user.getPassword())){
                String Mppings = modelHtml(getUser,model);
                return Mppings;
            }
        }else{





            //进行邮箱验证码登录
            System.out.println("email logins succeed:"+emailCode);
            if(verifycode.equals(emailCode)) {
                String Mppings = modelHtml(getUser, model);
                return Mppings;
            }
        }
        //初始界面
        return "page/user/user_login";
    }

4.3 120秒后删除session,你也可以选择删除全部session

//2   120秒过后清除清除session缓存,清除emailcode
    @RequestMapping("clear")
    public String removeSession(HttpServletRequest request){
        System.out.println("清除sessiion");
        request.getSession().removeAttribute("emailCode");
        return "redirect:/login";
    }

5.实现功能图如下:

邮箱和验证码正确后进入前端界面,root则进入后台