基于SpringBoot實(shí)現(xiàn)QQ郵箱驗(yàn)證碼注冊功能

更新時(shí)間：2024年11月07日 11:14:58 作者：煙雨長虹，孤鶩齊飛

QQ 郵箱是由騰訊公司推出的一款免費(fèi)郵箱服務(wù),它提供了完整的郵件發(fā)送和接收功能,并且還支持多種郵件格式和附件類型,QQ 郵箱還具有強(qiáng)大的反垃圾郵件功能,可以有效地過濾垃圾郵件,并保護(hù)用戶隱私和安全,所以本文給大家介紹了基于SpringBoot實(shí)現(xiàn)QQ郵箱驗(yàn)證碼注冊功能

開啟郵箱服務(wù)

（1）首先打開QQ郵箱，點(diǎn)擊設(shè)置并來到賬號頁面

（2）找到并開通以下的郵件協(xié)議服務(wù)，而且服務(wù)開啟也較為簡單，需要我們發(fā)送一個(gè)短信到指定的號碼，開啟后平臺會(huì)提供一個(gè)授權(quán)碼，一定要記住這個(gè)授權(quán)碼，發(fā)郵件的時(shí)候需要這個(gè)。

導(dǎo)入項(xiàng)目依賴

發(fā)送郵件的核心依賴是 mail ，由于該項(xiàng)目還涉及其他依賴就全都導(dǎo)進(jìn)來了。

    <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
    # 配置數(shù)據(jù)庫
  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服務(wù)主機(jī)  qq郵箱則為smtp.qq.com; 163郵箱是smtp.163.com
    host: smtp.qq.com
    # 服務(wù)協(xié)議
    protocol: smtp
    # 編碼集
    default-encoding: UTF-8
    # 發(fā)送郵件的賬戶
    username: xxx@qq.com
    # 授權(quán)碼
    password: xxx
    # 發(fā)送人昵稱
    nickname: xxx
 
    test-connection: true
    properties:
      mail:
        smtp:
          auth: true
          starttls:
            enable: true
            required: true

其中的 username 是你第一步中操作的郵箱賬號，nickname 是接收者收到郵件中顯示的發(fā)件人。

host 是根據(jù)服務(wù)主機(jī)區(qū)分，網(wǎng)易郵箱是 smtp.163.com, qq郵箱是 smtp.qq.com。其它的默認(rèn)即可。

創(chuàng)建數(shù)據(jù)庫文件

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;
    // 這個(gè)是 mail 依賴提供給的發(fā)送郵件的接口
    @Autowired
    private JavaMailSender mailSender;
    // 獲取發(fā)件人郵箱
    @Value("${spring.mail.username}")
    private String sender;
    // 獲取發(fā)件人昵稱
    @Value("${spring.mail.nickname}")
    private String nickname;
    // 獲取驗(yàn)證碼
    @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 位隨機(jī)數(shù)驗(yàn)證碼
        String code = RandomUtil.randomNumbers(6);
        session.setAttribute("email", code);
        String content = "【驗(yàn)證碼】您的驗(yàn)證碼為：" + code + " 。 3分鐘內(nèi)有效，請勿泄露和轉(zhuǎn)發(fā)。如非本人操作，請忽略此短信。\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 獲取驗(yàn)證碼
        String SignInEmail = (String)session.getAttribute("email");
        // 如果用戶名存在返回 false
        if(userService.selectByUsername(userName)!= null)return false;
        // 驗(yàn)證碼為空返回 false
        if(SignInEmail == null) return false;
        // 驗(yàn)證碼對得上才進(jìn)行插入操作，并返回 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("賬號或密碼錯(cuò)誤");
                }
            }
        });
    }
</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="發(fā)送驗(yàn)證碼" id="email" onclick="jump()">
 
        <div class="row">
            <span>驗(yàn)證碼</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("驗(yàn)證碼發(fā)送成功");
            }
        });
    }
</script>
 
</body>
 
</html>

到此這篇關(guān)于基于SpringBoot實(shí)現(xiàn)QQ郵箱驗(yàn)證碼注冊功能的文章就介紹到這了,更多相關(guān)SpringBoot QQ郵箱驗(yàn)證碼注冊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: