引入QQ郵箱發(fā)送驗證碼進行安全校驗功能實現(xiàn)

更新時間：2023年02月14日 11:29:08 作者：觀止study

最近遇到這樣的需求用戶輸入自己的郵箱，點擊獲取驗證碼，后臺會發(fā)送一封郵件到對應郵箱中，怎么實現(xiàn)呢？下面小編給大家?guī)砹艘隥Q郵箱發(fā)送驗證碼進行安全校驗功能,需要的朋友可以參考下

一.需求分析

場景：用戶輸入自己的郵箱，點擊獲取驗證碼，后臺會發(fā)送一封郵件到對應郵箱中。
分析：防止刷爆郵箱，可以限制一分鐘內只能獲取一次。
前端：期限內禁用button按鈕。
后端：存入redis設置過期時間，請求先判斷redis中是否有數(shù)據。

二.環(huán)境準備

(1) 郵箱環(huán)境

在QQ郵箱中開啟SMTP服務，獲取授權碼

1.網頁版：進入郵箱，點擊設置中的賬戶

2.往下翻可以看到如下服務開關，點擊開啟

請?zhí)砑訄D片描述

點擊開啟后會得到一串授權碼，后端程序中需要用到。

3.可能會要求完成相關安全驗證

(2) 后端環(huán)境

大概率是在web項目中使用到，因此我們創(chuàng)建一個SpringBoot工程

1.創(chuàng)建好項目后在pom文件中導入操作郵箱所需jar包

        <!--QQ郵箱驗證碼所需jar包-->
        <dependency>
            <groupId>javax.activation</groupId>
            <artifactId>activation</artifactId>
            <version>1.1.1</version>
        </dependency>

        <dependency>
            <groupId>javax.mail</groupId>
            <artifactId>mail</artifactId>
            <version>1.4.7</version>
        </dependency>

        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-email</artifactId>
            <version>1.4</version>
        </dependency>

2.由于我們需要在spring項目使用redis緩存驗證碼因此還要導入redis的jar包

   <!--     使用redis緩存驗證碼時效-->
         <dependency>
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-starter-data-redis</artifactId>
         </dependency>

3.在yml文件中配置redis,設置了redis密碼記得加上密碼配置

spring:
  redis:
    # redis數(shù)據庫索引(默認為0)，我們使用索引為3的數(shù)據庫，避免和其他數(shù)據庫沖突
    database: 3
    # redis服務器地址（默認為localhost）
    host: localhost
    # redis端口（默認為6379）
    port: 6379

三.后端程序

(1) 效果實現(xiàn)

1.發(fā)送郵箱應該算個工具，因此我們可以在工具類中寫入如下代碼

package com.example.utils;

import org.apache.commons.mail.EmailException;
import org.apache.commons.mail.SimpleEmail;


public class SendMailUtil {

    /**
     * 發(fā)送郵件代碼
     *
     * @param targetEmail 目標用戶郵箱
     * @param authCode    發(fā)送的驗證碼
     */
    public static void sendEmailCode(String targetEmail, String authCode) {
        try {
            // 創(chuàng)建郵箱對象
            SimpleEmail mail = new SimpleEmail();
            // 設置發(fā)送郵件的服務器
            mail.setHostName("smtp.qq.com");
            // "你的郵箱號"+ "上文開啟SMTP獲得的授權碼"
            mail.setAuthentication("158xxx69@qq.com", "fbsxxxxxsijdj");
            // 發(fā)送郵件 "你的郵箱號"+"發(fā)送時用的昵稱"
            mail.setFrom("15xxx69@qq.com", "觀止");
            // 使用安全鏈接
            mail.setSSLOnConnect(true);
            // 接收用戶的郵箱
            mail.addTo(targetEmail);
            // 郵件的主題(標題)
            mail.setSubject("注冊驗證碼");
            // 郵件的內容
            mail.setMsg("您的驗證碼為:" + authCode+"(一分鐘內有效)");
            // 發(fā)送
            mail.send();
        } catch (EmailException e) {
            e.printStackTrace();
        }
    }
}

2.編寫如下接口

@RestController
public class SendMail {

    @PostMapping("/getCode")
    @ResponseBody
    public String mail(@RequestParam("targetEmail") String targetEmail) {
        // 隨機生成六位數(shù)驗證碼
        String authCode = String.valueOf(new Random().nextInt(899999) + 100000);
        SendMailUtil.sendEmailCode(targetEmail,authCode);
        return "ok";
    }
}

3.讓我們測試一下接口

GET http://localhost:8080/getCode?targetEmail=35xxxx947@qq.com

可以看到如下效果：

如此我們初步效果就已經實現(xiàn)啦~

(2) 緩存改進

上述程序我們瘋狂發(fā)送請求可以一直發(fā)送郵箱，這顯然不是我們所期待的，接下來我們加入redis來改進一下。

@RestController
public class SendMail {
    @Resource
    private RedisTemplate<String, String> redisTemplate = new RedisTemplate<>();

    /**
     * @param targetEmail 用戶郵箱
     * @return
     */
    @GetMapping("/getCode")
    @ResponseBody
    public String mail(@RequestParam("targetEmail") String targetEmail) {
        // 發(fā)送前先看下我們是否已經緩存了驗證碼
        String yzm = redisTemplate.opsForValue().get("yzm");
        // 判斷是否存在
        if (yzm == null){
            // 生成六位數(shù)驗證碼
            int authNum = new Random().nextInt(899999) + 100000;
            String authCode = String.valueOf(authNum);
            // 不存在，我們發(fā)送郵箱給用戶
            SendMailUtil.sendEmailCode(targetEmail, "你的驗證碼為:" + authCode + "(五分鐘內有效)");
            // 存入redis中，設置有效期為1分鐘
            redisTemplate.opsForValue().set("yzm", authCode, 1, TimeUnit.MINUTES);
            return "發(fā)送成功";
        }
        // 存在，直接返回，不再發(fā)送郵箱~
        return "請勿重復發(fā)送驗證碼";
    }
   }

如此再次測試，可以發(fā)現(xiàn)瘋狂點擊不再產生效果，成功被攔截，如此安全了許多

至此我們開始想要的效果便已經在小demo中實現(xiàn)了，接下來可以引入正式自己項目啦

四.前端(補充)

用原生js簡單寫了一個界面，感興趣的可以看一看

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <input id="mail" type="text">
    <button id="getCode">獲取驗證碼</button>
</div>
<script>

    /*按鈕禁用60秒,并顯示倒計時*/
    function disabledButton() {
        const getCode = document.querySelector("#getCode")
        getCode.disabled = true
        let second = 60;
        const intervalObj = setInterval(function () {
            getCode.innerText = "請" + second + "秒后再重試"
            if (second === 0) {
                getCode.innerText = "獲取驗證碼"
                getCode.disabled = false
                clearInterval(intervalObj);
            }
            second--;
        }, 1000);
    }
    
    document.querySelector("#getCode").addEventListener('click', function () {
        const mail = document.querySelector("#mail")
        let xhr = new XMLHttpRequest();
        xhr.open("GET", "http://localhost:8080/getCode?targetEmail=" + mail.value, true);
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                alert(xhr.response);
                disabledButton()
            }
        }
    })

</script>
</body>
</html>

到此這篇關于引入QQ郵箱發(fā)送驗證碼進行安全校驗的文章就介紹到這了,更多相關QQ郵箱發(fā)送驗證碼內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: