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

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

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

開啟郵箱服務

（1）首先打開QQ郵箱，點擊設置并來到賬號頁面

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

導入項目依賴

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

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

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

創(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;
    // 這個是 mail 依賴提供給的發(fā)送郵件的接口
    @Autowired
    private JavaMailSender mailSender;
    // 獲取發(fā)件人郵箱
    @Value("${spring.mail.username}")
    private String sender;
    // 獲取發(fā)件人昵稱
    @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 位隨機數(shù)驗證碼
        String code = RandomUtil.randomNumbers(6);
        session.setAttribute("email", code);
        String content = "【驗證碼】您的驗證碼為：" + code + " 。 3分鐘內有效，請勿泄露和轉發(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 獲取驗證碼
        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="發(fā)送驗證碼" 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("驗證碼發(fā)送成功");
            }
        });
    }
</script>
 
</body>
 
</html>

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

您可能感興趣的文章:

Netty分布式ByteBuf使用directArena分配緩沖區(qū)過程解析
這篇文章主要介紹了Netty分布式ByteBuf使用directArena分配緩沖區(qū)過程解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-03-03
Java?Swing實現(xiàn)畫板的簡單操作
這篇文章主要介紹了Java?Swing實現(xiàn)畫板的簡單操作，修改顏色，更改圖形，清除，任務欄按鈕，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-06-06
Jenkins自動部署SpringBoot項目實踐教程
這篇文章主要介紹了Jenkins自動部署SpringBoot項目實踐教程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2021-11-11
Java?Web項目中如何添加Tomcat的Servlet-api.jar包(基于IDEA)
servlet-api.jar是在編寫servlet必須用到的jar包下面這篇文章主要給大家介紹了基于IDEAJava?Web項目中如何添加Tomcat的Servlet-api.jar包的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
2024-04-04
利用Spring Boot操作MongoDB的方法教程
mongodb是最早熱門非關系數(shù)據(jù)庫的之一，使用也比較普遍，一般會用做離線數(shù)據(jù)分析來使用，放到內網的居多，下面這篇文章主要給大家介紹了利用Spring Boot操作MongoDB的方法教程,需要的朋友可以參考下
2017-05-05
基于RabbitMQ幾種Exchange 模式詳解
下面小編就為大家?guī)硪黄赗abbitMQ幾種Exchange 模式詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-11-11
Java垃圾回收器的方法和原理總結
本篇文章主要介紹了Java垃圾回收器的方法和原理總結，Java垃圾回收器是Java虛擬機的重要模塊，具有一定的參考價值，有興趣的可以了解一下。
2016-12-12
Java實現(xiàn)漢字轉全拼音的方法總結
在軟件開發(fā)中,經常會遇到需要將漢字轉換成拼音的場景,比如在搜索引擎優(yōu)化、數(shù)據(jù)存儲、國際化等方面,Java作為一種廣泛使用的編程語言,提供了多種方法來實現(xiàn)漢字到拼音的轉換,本文將詳細介紹幾種常用的Java漢字轉全拼音的方法,并提供具體的代碼示例和步驟
2024-12-12
基于Calendar獲取當前時間的性能比較
這篇文章主要介紹了Calendar獲取當前時間的性能比較，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2021-06-06
SpringBoot+Redis布隆過濾器防惡意流量擊穿緩存
本文主要介紹了SpringBoot+Redis布隆過濾器防惡意流量擊穿緩存，文中根據(jù)實例編碼詳細介紹的十分詳盡，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03