基于SpringBoot实现QQ邮箱验证码注册功能_Java

开启邮箱服务

（1）首先打开qq邮箱，点击设置并来到账号页面

（2）找到并开通以下的邮件协议服务，而且服务开启也较为简单，需要我们发送一个短信到指定的号码，开启后平台会提供一个授权码，一定要记住这个授权码，发邮件的时候需要这个。

导入项目依赖

发送邮件的核心依赖是 mail ，由于该项目还涉及其他依赖就全都导进来了。

    <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>3.0.3</version>
        </dependency>
        <dependency>
            <groupid>com.mysql</groupid>
            <artifactid>mysql-connector-j</artifactid>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupid>org.projectlombok</groupid>
            <artifactid>lombok</artifactid>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupid>org.springframework.boot</groupid>
            <artifactid>spring-boot-starter-test</artifactid>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupid>org.mybatis.spring.boot</groupid>
            <artifactid>mybatis-spring-boot-starter-test</artifactid>
            <version>3.0.3</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupid>org.springframework.boot</groupid>
            <artifactid>spring-boot-starter-mail</artifactid>
        </dependency>
        <dependency>
            <groupid>org.springframework.boot</groupid>
            <artifactid>spring-boot-starter-thymeleaf</artifactid>
        </dependency>
        <dependency>
            <groupid>org.springframework.boot</groupid>
            <artifactid>spring-boot-starter-data-redis</artifactid>
        </dependency>
        <dependency>
            <groupid>junit</groupid>
            <artifactid>junit</artifactid>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupid>cn.hutool</groupid>
            <artifactid>hutool-all</artifactid>
            <version>4.5.16</version>
        </dependency>
    </dependencies>

配置 yml 文件

spring:
  application:
    name: demo
    # 配置数据库
  datasource:
    url: jdbc:mysql://localhost:3306/user?usessl=false&useunicode=true&characterencoding=utf8
    username: root
    password:
    driver-class-name: com.mysql.cj.jdbc.driver
  mail:
    # smtp服务主机  qq邮箱则为smtp.qq.com; 163邮箱是smtp.163.com
    host: smtp.qq.com
    # 服务协议
    protocol: smtp
    # 编码集
    default-encoding: utf-8
    # 发送邮件的账户
    username: xxx@qq.com
    # 授权码
    password: xxx
    # 发送人昵称
    nickname: xxx
 
    test-connection: true
    properties:
      mail:
        smtp:
          auth: true
          starttls:
            enable: true
            required: true

其中的 username 是你第一步中操作的邮箱账号，nickname 是接收者收到邮件中显示的发件人。

host 是根据服务主机区分，网易邮箱是 smtp.163.com, qq邮箱是 smtp.qq.com。其它的默认即可。

创建数据库文件

create table `user` (
  `username` varchar(20) not null,
  `password` varchar(20) not null,
  `mailbox` varchar(20) not null,
  `id` int(20) not null auto_increment,
  primary key (`id`)
) engine=innodb auto_increment=56 default charset=utf8

dao 层

@mapper
public interface userdaoimpl {
    @select("select * from user.user where username = #{username} and password = #{password}")
    user queryuser(@param("username") string username, @param("password")  string password);
 
    @select("select * from user.user where username = #{username}")
    user selectbyusername(string username);
 
    @insert("insert into user.user(username,password,mailbox) values (#{username},#{password},#{mailbox})")
    void adduser(@param("username") string username, @param("password") string password, @param("mailbox") string mailbox);
}

@repository
public class userdao implements userdaoimpl{
    @autowired
    private userdaoimpl userdaoimpl;
 
    @override
    public user queryuser(string username, string password) {
        return userdaoimpl.queryuser(username,password);
    }
 
    @override
    public user selectbyusername(string username){
        return userdaoimpl.selectbyusername(username);
    }
 
    @override
    public void adduser(string username, string password, string mailbox) {
        userdaoimpl.adduser(username,password,mailbox);
    }
}

service 层

public interface userserviceimpl {
    user queryuser(string username, string password);
    user selectbyusername(string username);
    void adduser(string username, string password, string mailbox);
}

@service
public class userservice implements userserviceimpl{
    @autowired
    private userdao userdao;
 
    @override
    public user queryuser(string username, string password) {
        return userdao.queryuser(username, password);
    }
 
    @override
    public user selectbyusername(string username) {
        return userdao.selectbyusername(username);
    }
 
    @override
    public void adduser(string username, string password, string mailbox) {
        userdao.adduser(username, password, mailbox);
    }
}

controller 层

@requestmapping("/user")
@restcontroller
public class usercontroller {
    @autowired
    private userservice userservice;
 
    // 判断登入
    @requestmapping(value = "/login", method = requestmethod.post)
    public boolean login(string name, string password, httpsession session){
        if (!stringutils.haslength(name) || !stringutils.haslength(password)){
            system.out.println(false);
            return false;
        }
        if (userservice.selectbyusername(name) != null&&
                userservice.queryuser(name,password)!= null){
            session.setattribute("username", name);
            system.out.println(true);
            return true;
        }
        system.out.println(false);
        return false;
    }
    // 获取用户名
    @requestmapping("/getloginuser")
    public string getloginuser(httpsession session){
        if(session.getattribute("username")!=null){
            return (string)session.getattribute("username");
        }
        return "";
    }
 
}

注册

@restcontroller
@requestmapping("/email")
public class emailcontroller {
    @autowired
    private userservice userservice;
    // 这个是 mail 依赖提供给的发送邮件的接口
    @autowired
    private javamailsender mailsender;
    // 获取发件人邮箱
    @value("${spring.mail.username}")
    private string sender;
    // 获取发件人昵称
    @value("${spring.mail.nickname}")
    private string nickname;
    // 获取验证码
    @getmapping("/code")
    public boolean getcode(@requestparam("email")string email,httpsession session){
        simplemailmessage message = new simplemailmessage();
        message.setfrom(nickname + '<' + sender + '>');
        message.setto(email);
        message.setsubject("欢迎访问东方");
 
        // 使用 hutool-all 生成 6 位随机数验证码
        string code = randomutil.randomnumbers(6);
        session.setattribute("email", code);
        string content = "【验证码】您的验证码为：" + code + " 。 3分钟内有效，请勿泄露和转发。如非本人操作，请忽略此短信。\n\n\n";
        message.settext(content);
        mailsender.send(message);
        return true;
    }
    // 注册账号
    @postmapping("/signin")
    public boolean usersignin(@requestparam("username")string username,
                              @requestparam("password")string password,
                              @requestparam("mailbox")string mailbox,
                              @requestparam("verification")string verification,
                              httpsession session){
        // 通过 session 获取验证码
        string signinemail = (string)session.getattribute("email");
        // 如果用户名存在返回 false
        if(userservice.selectbyusername(username)!= null)return false;
        // 验证码为空返回 false
        if(signinemail == null) return false;
        // 验证码对得上才进行插入操作，并返回 true
        if(signinemail.equals(verification)){
            userservice.adduser(username,password,mailbox);
            return true;
        }
        return false;
    }

前端

login.html

<!doctype html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登入</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow"  rel="external nofollow" >
    <link rel="stylesheet" href="css/login.css" rel="external nofollow"  rel="external nofollow" >
    <script type="text/javascript" src="js/jquery.min.js"></script>
</head>
 
<body>
<div class="container-login">
    <div class="container-pic">
        <img src="pic/computer.png" width="350px">
    </div>
    <div class="login-dialog">
        <h3>登陆</h3>
        <div class="row">
            <span>用户名</span>
            <input type="text" name="username" id="username" class="form-control">
        </div>
        <div class="row">
            <span>密码</span>
            <input type="password" name="password" id="password" class="form-control">
        </div>
        <div class="row">
            <button type="button" class="btn btn-info btn-lg" onclick="login()">登录</button>
        </div>
        <div class="row">
            <button type="button" class="btn btn-info btn-lg" onclick="signin()">注册</button>
        </div>
    </div>
</div>
<script src="js/jquery.min.js"></script>
<script>
    function login() {
        $.ajax({
            type: "post",
            url: "/user/login",
            data: {
                name: $("#username").val(),
                password: $("#password").val()
            },
            success: function(result){
                if(result){
                    //登录成功
                    location.href = "index.html";
                }else{
                    alert("账号或密码错误");
                }
            }
        });
    }
</script>
 
<script>
    function signin(){
        window.location.href="signin.html" rel="external nofollow" ;
    }
</script>
 
</body>
 
</html>

signin.html

<!doctype html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow"  rel="external nofollow" >
    <link rel="stylesheet" href="css/login.css" rel="external nofollow"  rel="external nofollow" >
    <script type="text/javascript" src="js/jquery.min.js"></script>
</head>
 
<body>
<div class="container-login">
    <div class="container-pic">
        <img src="pic/computer.png" width="350px">
    </div>
    <div class="login-dialog">
        <h3>注册</h3>
        <div class="row">
            <span>用户名</span>
            <input type="text" name="username" id="username" class="form-control">
        </div>
 
        <div class="row">
            <span>密码</span>
            <input type="password" name="password" id="password" class="form-control">
        </div>
 
        <div class="row">
            <span>邮箱</span>
            <input type="mailbox" name="mailbox" id="mailbox" class="form-control">
        </div>
 
        <input type="button" value="发送验证码" id="email" onclick="jump()">
 
        <div class="row">
            <span>验证码</span>
            <input type="verification" name="verification" id="verification" class="form-control">
        </div>
        <div class="row">
            <button type="button" class="btn btn-info btn-lg" onclick="signin()">注册</button>
        </div>
    </div>
</div>
 
<script src="js/jquery.min.js"></script>
 
<script>
        function signin() {
            $.ajax({
                type: "post",
                url: "/email/signin",
                data: {
                    username: $("#username").val(),
                    password: $("#password").val(),
                    mailbox: $("#mailbox").val(),
                    verification: $("#verification").val(),
                },
                success: function(result){
                    if(result){
                        alert("注册成功");
                        location.href = "login.html";
                    }else{
                        alert("注册失败");
                    }
                }
            });
            }
</script>
 
 
<script>
    function jump() {
        $.ajax({
            type: "get",
            url: "/email/code",
            data: {
                email: $("#mailbox").val()
            },
            success: function (result) {
                if (result) alert("验证码发送成功");
            }
        });
    }
</script>
 
</body>
 
</html>

到此这篇关于基于springboot实现qq邮箱验证码注册功能的文章就介绍到这了,更多相关springboot qq邮箱验证码注册内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！