您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
springBoot发送邮件(验证码,5分钟过期)超级详细,供大家参考,具体内容如下
自己百度了很久,终于成功了,这里记录一下过程
1.选择邮箱(这里选用163邮箱)
首先在网页登录在设置里面打开POP3/SMTP服务
在application.yaml中配置
要注意的就是这里的password是授权码而不是密码!!!如果使用qq邮箱把host改为smtp.qq.com
2.关于验证码的工具类
private static final String SYMBOLS = "0123456789"; /** * Math.random生成的是一般随机数,采用的是类似于统计学的随机数生成规则,其输出结果很容易预测,因此可能导致被攻击者击中。 * 而SecureRandom是真随机数,采用的是类似于密码学的随机数生成规则,其输出结果较难预测,若想要预防被攻击者攻击,最好做到使攻击者根本无法,或不可能鉴别生成的随机值和真正的随机值。 */ private static final Random RANDOM = new SecureRandom(); public static String generateVerCode() { char[] nonceChars = new char[6]; for (int i = 0; i < nonceChars.length; i++) { nonceChars[i] = SYMBOLS.charAt(RANDOM.nextInt(nonceChars.length)); } return new String(nonceChars); } /** *计算两个日期的分钟差 */ public static int getMinute(Date fromDate, Date toDate) { return (int) (toDate.getTime() - fromDate.getTime()) / (60 * 1000);
3.services模块
/** * 发送验证码到指定邮箱 * @param sender 发送地址 * @param mailSender spring自带 * @param receiver 接受地址 */ AdvanceResponse getCode(String sender,JavaMailSenderImpl mailSender,String receiver); /** * 注册用户 */ AdvanceResponse addUser(User user,String verCode);
AdvanceResponse是自己封装的返回对象,可以无视
/** * 验证码 */ private String code; /** * 发送时间 */ private Date sendTime; @Override @Async public AdvanceResponse getCode(String sender, JavaMailSenderImpl mailSender, String receiver) { SimpleMailMessage message = new SimpleMailMessage(); message.setSubject("验证码");//设置邮件标题 code = VerCodeGenerateUtil.generateVerCode(); sendTime = new Date(); message.setText("尊敬的用户,您好:\n" + "\n本次请求的邮件验证码为:" + code + ",本验证码5分钟内有效,请及时输入。(请勿泄露此验证码)\n" + "\n如非本人操作,请忽略该邮件。\n(这是一封自动发送的邮件,请不要直接回复)"); //设置邮件正文 message.setFrom(sender);//发件人 message.setTo(receiver);//收件人 mailSender.send(message);//发送邮件 return AdvanceResponse.successResponse(); } @Override public AdvanceResponse addUser(User user, String verCode) { Date date = new Date(); //判断验证码 if (VerCodeGenerateUtil.getMinute(sendTime, date) > 5) { return AdvanceResponse.failedResponse("验证码已经失效!!!"); } if (!verCode.equals(code)) { return AdvanceResponse.failedResponse("验证码不正确!!!"); } user.setRole(0); user.setCreateTime(date); user.setUpdateTime(date); userDao.insert(user); code = null; return AdvanceResponse.successResponse(); }
@Async表示异步,可以在邮件未发送完成时就返回,而不必等待太长时间,必须在总配置类上加@EnableAsync注解才可以生效
4.controller模块
@Autowired private UserService userService; @Autowired private JavaMailSenderImpl mailSender; @Value("${spring.mail.username}") private String sender; /** * 发送验证码到指定邮箱 */ @GetMapping("/verCode") public AdvanceResponse verCode(String receiver) { return userService.getCode(sender, mailSender, receiver); } /** * 注册用户 */ @PostMapping("/addUser") public AdvanceResponse addUser(User user, String sender, JavaMailSenderImpl mailSender, @RequestParam("verCode") String verCode) { return userService.addUser(user,verCode); }
基本上后端就完成了,在来看看前端
5.前端界面
<div class="layui-form-item"> <label for="email" class="layui-form-label"> <span class="x-red">*</span>邮箱 </label> <div class="layui-input-inline"> <input type="email" id="email" name="email" required="" lay-verify="email" autocomplete="off" class="layui-input"> </div> <div class="layui-form-mid layui-word-aux"> <span class="x-red" id="emailMsg"></span> </div> <button type="button" class="layui-btn" id="code">获取验证码</button> </div> <div class="layui-form-item"> <label for="verCode" class="layui-form-label"> <span class="x-red">*</span>验证码 </label> <div class="layui-input-inline"> <input type="text" id="verCode" name="verCode" required="" autocomplete="off" class="layui-input"> </div> <div class="layui-form-mid layui-word-aux"> <span class="x-red" id="verCodeMsg"></span> </div> </div>
前端使用了layui,只关注input表单即可
接下来是js代码
//获取验证码 $('#code').click(function () { const email = $('#email').val(); const myReg = /^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/; if (email === null || email.length === 0) { layer.msg('邮箱不能为空!', {time: 1500, icon: 5, shift: 6}); return false; } if (!myReg.test(email)) { layer.msg('邮箱格式不正确!', {time: 1500, icon: 5, shift: 6}); return false; } $.ajax({ type: 'GET', url: 'user/verCode', data: { 'receiver': email }, beforeSend: function () { loading = layer.msg('处理中', {icon: 16}) }, success: function () { layer.close(loading); } }) }); //这是提交表单,只保留关键部分 $.ajax({ type: 'POST', url: 'user/addUser', data: formData, cache: false, // 不缓存 processData: false, // jQuery不要去处理发送的数据 contentType: false, // jQuery不要去设置Content-Type请求头 beforeSend: function () { loading = layer.msg('处理中', {icon: 16}) }, success: function (result) { if (result.status === 0) { layer.msg(result.msg, {time: 1500, icon: 5, shift: 6}); } else { layer.close(loading); xadmin.close(); } } })
基本上全部完成!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持亿速云。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。