使用springboot实现邮箱验证码功能

最新推荐文章于 2023-11-27 20:38:46 发布

梅比斯-维维亚米利欧

最新推荐文章于 2023-11-27 20:38:46 发布

阅读量1.6w

点赞数 9

分类专栏： springboot 文章标签：邮箱验证码

本文链接：https://blog.csdn.net/q1054733797/article/details/84763287

版权

springboot 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

我这边使用的QQ邮箱

1、首先创建maven项目，配置pom文件

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>

	<groupId>com.example</groupId>
	<artifactId>springbootdemo</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>jar</packaging>

	<name>springbootdemo</name>
	<description>Demo project for Spring Boot</description>

	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.0.4.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>

	<properties>
		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
		<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
		<java.version>1.8</java.version>
	</properties>

	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<dependency>
			<groupId>org.mybatis.spring.boot</groupId>
			<artifactId>mybatis-spring-boot-starter</artifactId>
			<version>1.3.2</version>
		</dependency>
		<!--邮件发送核心包-->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-mail</artifactId>
		</dependency>
		<dependency>
			<groupId>commons-io</groupId>
			<artifactId>commons-io</artifactId>
			<version>2.4</version>
		</dependency>
		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
			<scope>runtime</scope>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
		<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <optional>true</optional> <!-- 这个需要为 true 热部署才有效 -->
        </dependency>

		<!--mybatis分页插件-->
		<dependency>
			<groupId>com.github.pagehelper</groupId>
			<artifactId>pagehelper</artifactId>
			<version>4.1.6</version>
		</dependency>


	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
		<resources>
			<resource>
				<directory>src/main/java</directory>
					<includes>
						<include>**/*.xml</include>
					</includes>
			</resource>
		</resources>
	</build>

</project>

2、配置springboot，我这里使用的是properties方式

#配置Mybatis别名和扫描包
mybatis.type-aliases-package=com.demo.bean
mybatis.mapper-locations=classpath:mapper/*.xml

#数据库相关
spring.datasource.url=jdbc:mysql://localhost:3306/ssm?useSSL=false
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.jdbc.Driver

#配置日志
logging.level.root=info
logging.level.com.demo.mapper=debug

#配置视图前缀和后缀
spring.mvc.view.prefix=/
spring.mvc.view.suffix=.html

#邮件发送配置
spring.mail.default-encoding=UTF-8
spring.mail.host=smtp.qq.com
spring.mail.username=你的邮箱
spring.mail.password=邮箱授权码
spring.mail.properties.mail.smtp.auth=true
spring.mail.properties.mail.smtp.starttls.enable=true
spring.mail.properties.mail.smtp.starttls.required=true

#thymeleaf配置
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.servlet.content-type=text/html
spring.thymeleaf.cache=false

邮箱授权码可以按以下方法获取

打开QQ邮箱网页→设置→账户→POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务→开启POP3/SMTP服务，然后就能看到授权码了

3、编写mailService

${spring.mail.username}是在properties中配置的属性，这里有一个方法，第一个是发送普通邮件，第二个是发送带有附件的邮件

@Service("mailService")
public class MailService {
    @Value("${spring.mail.username}")
    private String from;
    @Autowired
    private JavaMailSender mailSender;

    Logger logger = LoggerFactory.getLogger(this.getClass());

    public void sendSimpleMail(String to,String title,String content){
        SimpleMailMessage message = new SimpleMailMessage();
        message.setFrom(from);
        message.setTo(to);
        message.setSubject(title);
        message.setText(content);
        mailSender.send(message);
        logger.info("邮件发送成功");
    }

    public void sendAttachmentsMail(String to, String title, String cotent, List<File> fileList){
        MimeMessage message = mailSender.createMimeMessage();
        try {
            MimeMessageHelper helper = new MimeMessageHelper(message,true);
            helper.setFrom(from);
            helper.setTo(to);
            helper.setSubject(title);
            helper.setText(cotent);
            String fileName = null;
            for (File file:fileList) {
                fileName = MimeUtility.encodeText(file.getName(), "GB2312", "B");
                helper.addAttachment(fileName, file);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        mailSender.send(message);
        logger.info("邮件发送成功");
    }
}

4、编写controller

@Controller
public class MailController {
    @Autowired
    private MailService mailService;

    @RequestMapping("getCheckCode")
    @ResponseBody
    public String getCheckCode(String email){
        String checkCode = String.valueOf(new Random().nextInt(899999) + 100000);
        String message = "您的注册验证码为："+checkCode;
        try {
            mailService.sendSimpleMail(email, "注册验证码", message);
        }catch (Exception e){
            return "";
        }
        return checkCode;
    }
}

5、编写页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
</head>
<body style="width: 100%;height: 100%;">
    <div style="margin-top: 15%;">
        <div class="layui-main" style="width: 700px;">
            <h1 style="text-align: center">请输入注册信息</h1>
            <form class="layui-form layui-form-pane">
                <div class="layui-form-item">
                    <label class="layui-form-label">邮箱：</label>
                    <div class="layui-input-block">
                        <input id="email" type="email" name="username" class="layui-input" lay-verify="required"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码：</label>
                    <div class="layui-input-block">
                        <input id="password" type="password" name="password" class="layui-input" lay-verify="required"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">邮箱验证码：</label>
                    <div class="layui-input-block">
                        <input id="checkCode" type="text" name="checkCode" class="layui-input" lay-verify="required"/>
                        <button id="sendCheckCode" type="button" class="layui-btn layui-btn-normal">获取验证码</button>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="register">确认</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script>
        layui.use("form",function () {
            var form = layui.form;
            var $ = layui.$;
            
            form.on("submit(register)",function (data) {
                var inputCheckCode = $("#checkCode").val();
                if (inputCheckCode == checkCode){
                    $.ajax({
                        url:"/register",
                        type:"POST",
                        data:data.field,
                        async:false,
                        success:function (text) {
                            if ("ok" == text){
                                layer.alert("注册成功",function () {
                                    window.location.href = "index.html";
                                });
                            }else{
                                layer.alert("注册失败");
                            }
                        }
                    });
                } else{
                    layer.msg("验证码输入错误");
                }
                return false;
            });

            //验证码
            var checkCode = "";

            $("#sendCheckCode").click(function () {
                var email = $("#email").val();
                if (email == null || email == ""){
                    layer.msg("请输入邮箱！！！");
                    return;
                }
                var index = layer.open({
                    type:3,
                    content:"邮件发送中..."
                });

                $.ajax({
                    url:"/getCheckCode?email="+email,
                    type:"get",
                    success:function (text) {
                        if (text != null && text != ""){
                            layer.close(index);
                            layer.msg("已发送");
                            checkCode = text;
                            countDown();
                        } else{
                            layer.alert("获取失败，请重新获取")
                        }
                    }
                });
            });

            var maxTime = 60;
            function countDown(){
                if (maxTime == 0){
                    checkCode = "";
                    $("#sendCheckCode").removeClass("layui-btn-disabled");
                    $("#sendCheckCode").removeAttr("disabled")
                    $("#sendCheckCode").html("获取验证码");
                    maxTime = 60;
                }else{
                    $("#sendCheckCode").attr("disabled","disabled");
                    $("#sendCheckCode").addClass("layui-btn-disabled");
                    form.render();
                    $("#sendCheckCode").html(maxTime+"秒后重新获取");
                    maxTime--;
                    setTimeout(countDown,1000);
                }
            }

        });
    </script>
</body>
</html>

6、测试

梅比斯-维维亚米利欧

关注

9
点赞
踩
81

收藏

觉得还不错? 一键收藏
12
评论
使用springboot实现邮箱验证码功能

我这边使用的QQ邮箱1、首先创建maven项目，配置pom文件&lt;?xml version="1.0" encoding="UTF-8"?&gt;&lt;project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schema...
复制链接

扫一扫