当前位置：首页 > news >正文

实现如何利用 Kafka 延时删除用户邮箱的验证码（如何发送邮箱+源码) - 第一期

news 2025/7/4 20:25:22

技术框架：

前端:vue3+axios

后端:springboot3+ jakarta.mail

简单流程：

1. 用户输入邮箱，点击获取验证码

<div v-if="activeMethod === 'email'" class="form-group">            <input               v-model="email.number"               type="text"               placeholder="请输入邮箱"              class="form-input"            >            <div class="code-input-group">              <input                 v-model="email.code"                 type="text"                 placeholder="验证码"                class="form-input code-input"              >              <button class="send-code-btn" @click="sendCode">                {{ countdown > 0 ? `${countdown}s后重发` : '获取验证码' }}              </button>            </div>          </div>

const sendCode = () => {// 请求后端 邮箱接口  axios.get('http://127.0.0.1:8848/emailv3', {    params: {      to: email.value.number    }  }).then(res => {    console.log(res)    alert("验证码已发送,请留意邮箱")    // 存储uuid    localStorage.setItem('uuid',res.data)  })}

2. 后端接收前端发出的邮箱，先判断数据库中是否已经存在邮箱了，如果没有则随机生成a-zA-Z0-9的6位验证码并保存到数据库，然后通过邮件功能去发送用户的邮箱，并返回 uuid，并且存储到本地缓存中，作为临时邮箱验证码的依据

//  查询邮箱是否唯一    public boolean SelectMail(String mail) {        QueryWrapper<Users> queryWrapper = new QueryWrapper<>();        System.out.println("查询邮箱是否唯一"+mail);        queryWrapper.eq("user_mail", mail);        Users users = userMapper.selectOne(queryWrapper);        if (users != null) {            return true;        }        return false;    }

private static final String CODE = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";private static final int CODE_LENGTH = 6;    // 创建随机 6 位 数字 字母 的验证码    public String generateCode() {        StringBuilder sb = new StringBuilder();        for (int i = 0; i < CODE_LENGTH; i++) {            int index = (int) (Math.random() * CODE.length());            sb.append(CODE.charAt(index));        }        return sb.toString();    }    // 生成一个UUID作为验证码的唯一辅助标识符    public String generateUUID() {        return UUID.randomUUID().toString().replace("-", "").substring(0, 10);    }

// 发送邮箱时进行保存    public void saveQrCode( String code, String uuid) {        QrCodes qrCode = new QrCodes();        qrCode.setQrCode(null);        qrCode.setQrCode(code);        qrCode.setQrUuid(uuid);        int insert = qrCodeMapper.insert(qrCode);        if (insert > 0) {            System.out.println("存储成功");            System.out.println("验证码：" + code + ",UUID：" + uuid);        }    }

3. 用户去邮箱那边拿验证码

粘贴到登录界面的验证码框内

4. 点击登录的时候，就会获取邮箱框，验证码，UUID,

axios.post('http://127.0.0.1:8848/loginbymail', {      email: email.value.number,      uuid: localStorage.getItem('uuid'),      code: email.value.code    })

5. 后端创建一个模型请求类来获取

import lombok.AllArgsConstructor;import lombok.Data;import lombok.NoArgsConstructor;import lombok.ToString;@Data@AllArgsConstructor@NoArgsConstructor@ToStringpublic class EmailLogin {    private String email;    private String uuid;    private String code;}

6.邮箱登录

// 用户利用邮箱登录    @PostMapping("loginbymail")    public String UserLoginByMail(@RequestBody EmailLogin emailLogin){        System.out.println("用户传来的数据"+emailLogin);        // 判断uuid是否正确        String uuid = emailLogin.getUuid();        String email = emailLogin.getEmail();        String code = emailLogin.getCode();        String temp = "验证失败,UUID或验证码错误";        if (!emailService.getQrCodeByUuidAndCode(code, uuid)){            // 验证失败，UUID或验证码错误            return temp;        }        // 验证成功，注册用户        return userService.EmailRegisterUser(email)?"注册成功":temp;    }

7.校验 uuid + code

// 查询用户的 UUID+code    public boolean getQrCodeByUuidAndCode(String code, String uuid) {        QueryWrapper<QrCodes> qrCodeQueryWrapper = new QueryWrapper<>();        qrCodeQueryWrapper.eq("qr_uuid", uuid);        qrCodeQueryWrapper.eq("qr_code", code);        QrCodes qrCode = qrCodeMapper.selectOne(qrCodeQueryWrapper);        System.out.println("查询结果：" + qrCode.toString());        if (qrCode != null) {            return true;        }        return  false;    }

8.登录成功！