引入QQ邮箱发送验证码进行安全校验

news2024/11/15 12:42:17

最近想给自己的项目在注册时加点安全校验，本想着使用短信验证码，奈何囊中羞涩只能退而求次改用QQ邮箱验证注册~

一.需求分析

  • 场景：用户输入自己的邮箱，点击获取验证码，后台会发送一封邮件到对应邮箱中。

  • 分析：防止刷爆邮箱，可以限制一分钟内只能获取一次。

    • 前端：期限内禁用button按钮。
    • 后端：存入redis设置过期时间，请求先判断redis中是否有数据。

二.环境准备

(1) 邮箱环境

在QQ邮箱中开启SMTP服务，获取授权码

  1. 网页版：进入邮箱，点击设置中的账户
    在这里插入图片描述

  2. 往下翻可以看到如下服务开关，点击开启
    请添加图片描述

点击开启后会得到一串授权码，后端程序中需要用到。

  1. 可能会要求完成相关安全验证
    在这里插入图片描述

(2) 后端环境

大概率是在web项目中使用到，因此我们创建一个SpringBoot工程

  1. 创建好项目后在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>
  1. 由于我们需要在spring项目使用redis缓存验证码因此还要导入redis的jar包
   <!--     使用redis缓存验证码时效-->
         <dependency>
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-starter-data-redis</artifactId>
         </dependency>
  1. 在yml文件中配置redis,设置了redis密码记得加上密码配置
spring:
  redis:
    # redis数据库索引(默认为0)，我们使用索引为3的数据库，避免和其他数据库冲突
    database: 3
    # redis服务器地址（默认为localhost）
    host: localhost
    # redis端口（默认为6379）
    port: 6379

三.后端程序

(1) 效果实现

  1. 发送邮箱应该算个工具，因此我们可以在工具类中写入如下代码
package com.example.utils;

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


public class SendMailUtil {

    /**
     * 发送邮件代码
     *
     * @param targetEmail 目标用户邮箱
     * @param authCode    发送的验证码
     */
    public static void sendEmailCode(String targetEmail, String authCode) {
        try {
            // 创建邮箱对象
            SimpleEmail mail = new SimpleEmail();
            // 设置发送邮件的服务器
            mail.setHostName("smtp.qq.com");
            // "你的邮箱号"+ "上文开启SMTP获得的授权码"
            mail.setAuthentication("158xxx69@qq.com", "fbsxxxxxsijdj");
            // 发送邮件 "你的邮箱号"+"发送时用的昵称"
            mail.setFrom("15xxx69@qq.com", "观止");
            // 使用安全链接
            mail.setSSLOnConnect(true);
            // 接收用户的邮箱
            mail.addTo(targetEmail);
            // 邮件的主题(标题)
            mail.setSubject("注册验证码");
            // 邮件的内容
            mail.setMsg("您的验证码为:" + authCode+"(一分钟内有效)");
            // 发送
            mail.send();
        } catch (EmailException e) {
            e.printStackTrace();
        }
    }
}
  1. 编写如下接口
@RestController
public class SendMail {

    @PostMapping("/getCode")
    @ResponseBody
    public String mail(@RequestParam("targetEmail") String targetEmail) {
        // 随机生成六位数验证码
        String authCode = String.valueOf(new Random().nextInt(899999) + 100000);
        SendMailUtil.sendEmailCode(targetEmail,authCode);
        return "ok";
    }
}
  1. 让我们测试一下接口
GET http://localhost:8080/getCode?targetEmail=35xxxx947@qq.com

可以看到如下效果：
在这里插入图片描述

如此我们初步效果就已经实现啦~

(3) 缓存改进

上述程序我们疯狂发送请求可以一直发送邮箱，这显然不是我们所期待的，接下来我们加入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) {
        // 发送前先看下我们是否已经缓存了验证码
        String yzm = redisTemplate.opsForValue().get("yzm");
        // 判断是否存在
        if (yzm == null){
            // 生成六位数验证码
            int authNum = new Random().nextInt(899999) + 100000;
            String authCode = String.valueOf(authNum);
            // 不存在，我们发送邮箱给用户
            SendMailUtil.sendEmailCode(targetEmail, "你的验证码为:" + authCode + "(五分钟内有效)");
            // 存入redis中，设置有效期为1分钟
            redisTemplate.opsForValue().set("yzm", authCode, 1, TimeUnit.MINUTES);
            return "发送成功";
        }
        // 存在，直接返回，不再发送邮箱~
        return "请勿重复发送验证码";
    }
   }

如此再次测试，可以发现疯狂点击不再产生效果，成功被拦截，如此安全了许多
在这里插入图片描述

至此我们开始想要的效果便已经在小demo中实现了，接下来可以引入正式自己项目啦

四.前端(补充)

用原生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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/340944.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

element表单搜索框与表格高度自适应

element表单搜索框与表格高度自适应

一般在后台管理系统中&#xff0c;表单搜索框和表格的搭配是非常常见的&#xff0c;如下所示&#xff1a; 在该图中&#xff0c;搜索框有五个&#xff0c;分为了两行排列。但根据大多数的UI标准&#xff0c;搜索框默认只显示一行&#xff0c;多余的需要进行隐藏。此时的页面被…
阅读更多...
韩顺平Linux基础学习（1）

韩顺平Linux基础学习（1）

内容概括
阅读更多...
【Flutter入门到进阶】跨平台相关-Flutter的选择

【Flutter入门到进阶】跨平台相关-Flutter的选择

1.回顾Android渲染机制工作流程 1.1 图例 1.2 说明 1.Android内部自己通过skia引起完成图像构建 2.Android通过surfacefilinger来完成图像与驱动之间的处理 2 自建渲染引擎渲染方案 自建渲染引擎渲染方案&#xff0c;是有别于Web渲染采用WebView容器进行渲染UI、原生渲染…
阅读更多...
软件设计（十）--计算机系统知识

软件设计（十）--计算机系统知识

软件设计&#xff08;九&#xff09;https://blog.csdn.net/ke1ying/article/details/128990035 一、效验码 奇偶效验&#xff1a;是一种最简单的效验方法。基本思想是&#xff1a;通过在编码中增加一个效验位来使编码中1的个数为奇数&#xff08;奇效验&#xff09;或者为偶…
阅读更多...
微内核架构

微内核架构

QNX微内核架构 设计原则 最小化内核功能 将操作系统功能移到用户态&#xff0c;成为Server“服务”。在用户模块之间&#xff0c;通过消息传递机制通信。 在宏内核中&#xff0c;文件系统和磁盘驱动都是运行在内核态&#xff0c;应用通过内核调用文件系统&#xff0c;文件系…
阅读更多...
Ubuntu搭建博客typecho

Ubuntu搭建博客typecho

提示 见过这样类型的blog吧&#xff0c;现在就是最详细的搭建过程。 第一步 搭建apache2环境 安装命令 sudo apt -y install apache2 apache2-utils访问项目地址&#xff1a; /var/www/html配置文件在: /etc/apache2/日志在&#xff1a; /var/log/apache2/ 修改配置文件 vim…
阅读更多...
如何在项目中正确使用异常？

如何在项目中正确使用异常？

文章目录异常系列文章一、异常介绍二、异常体系三、异常处理机制四、异常处理五、异常调用链异常系列文章 如何在项目中正确使用异常&#xff1f;如何优雅的设计Java异常Java统一异常处理–实战篇Java 异常处理的误区和经验总结你要的Java常见异常都在这里Java中异常抛出后代码…
阅读更多...
SpringBoot后端接口请求参数映射方式详解

SpringBoot后端接口请求参数映射方式详解

在SpringBoot项目中&#xff0c;前端HTTP请求中的参数如何映射到Controller层的接口方法中的参数&#xff1f;这里针对各种方式做一个测试与总结。 1&#xff1a;QueryString方式 QueryString参数传递的方式为&#xff0c;在请求URL中直接拼接请求参数如&#xff1a;URL?para…
阅读更多...
Java实现调用ChatGPT详解

Java实现调用ChatGPT详解

Java调用ChatGPT的小插件1. 申请ChatGPT账号2. 配置阶段2.1 依赖引入2.2 配置application.yml文件2.3 EnableChatGPT注解3. 使用4. 测试1. 申请ChatGPT账号 CSDN上面有很多申请ChatGPT账号的教程&#xff0c;可以直接搜索chatgpt账号注册&#xff0c;然后按照高赞的几个回答注…
阅读更多...
谷粒商城--SPU和SKU

谷粒商城--SPU和SKU

目录 1.SPU和SKU概念 2.表的关系理解 3.导入前端代码 4.完善后端接口 5.属性分组详情 6.规格参数详情 7. 销售属性详情 8.分组与属性关联 9.发布商品 10.仓库服务 1.SPU和SKU概念 SPU&#xff1a;standard product unit(标准化产品单元)&#xff1a;是商品信息聚合的…
阅读更多...
链表OJ（一）

链表OJ（一）

目录 从尾到头打印链表_牛客题霸_牛客网 160. 相交链表 141. 环形链表 142. 环形链表 II 138. 复制带随机指针的链表 从尾到头打印链表_牛客题霸_牛客网 输入一个链表的头节点&#xff0c;按链表从尾到头的顺序返回每个节点的值&#xff08;用数组返回&#xff09;。 如输入…
阅读更多...
Three.js中的3D文字效果

Three.js中的3D文字效果

对于一些设计网页中经常会出现一些3D的文字效果&#xff0c;本文将利用Three.js实现各种动画WebGL文本输入效果。 示例效果 原文章 文本采样 通常情况下&#xff0c;文本网格是2D的平面形状&#xff0c;我们所要实现的3D文本形状则是要在2D的平面下&#xff0c;再生成z值形成…
阅读更多...
Oracle数据库启停命令

Oracle数据库启停命令

在日常工作中&#xff0c;关于数据库的启停&#xff1a;   先关闭上层应用服务 --> 关闭监听 --> 关闭数据库&#xff1b;   启动数据库 --> 启动监听 --> 启动应用(Oracle SQL Developer)。 监听lsnrctl Oracle监听命令。 lsnrctl start [listener-name]&a…
阅读更多...
Xml格式化与高亮显示

Xml格式化与高亮显示

具体请参考&#xff1a;Xml格式化与高亮显示
阅读更多...
分布式系统的数据一致性方案

分布式系统的数据一致性方案

1、在出现一致性问题时如果系统的并发或不一致情况较少&#xff0c;可以先使用重试来解决 a、同步重试 b、异步重试 c、入库&#xff0c;定时任务重试 2、分布式事务 基于数据库 XA 协议的 2PC、3PC&#xff0c;基于业务层的TCC,基于消息队列消息表的最终一致性方案&#xff0…
阅读更多...
七大设计原则之接口隔离原则应用

七大设计原则之接口隔离原则应用

目录1 接口隔离原则介绍2 接口隔离原则应用1 接口隔离原则介绍 接口隔离原则&#xff08;Interface Segregation Principle, ISP&#xff09;是指用多个专门的接口&#xff0c;而不使用单一的总接口&#xff0c;客户端不应该依赖它不需要的接口。这个原则指导我们在设计接口时…
阅读更多...
八、Git远程仓库操作——跨团队成员的协作

八、Git远程仓库操作——跨团队成员的协作

前言 前面一篇博文介绍了git团队成员之间的协作&#xff0c;现在在介绍下如果是跨团队成员的话&#xff0c;如何协作&#xff1f; 跨团队成员协作&#xff0c;其实就是你不属于那个项目的成员&#xff0c;你没有权限向那个仓库提交代码。但是github还有另一种 pull request&a…
阅读更多...
图形化深度学习开发平台PaddleStudio（代码开源）

图形化深度学习开发平台PaddleStudio（代码开源）

目录一、PaddleStudio概述二、环境准备2.1 安装PaddlePaddle2.2 安装依赖库三、基本使用介绍3.1 启动3.2 快速体验3.2.1 下载示例项目3.2.2 训练3.2.3 评估3.2.4 测试3.2.5 静态图导出四、数据集格式4.1 图像分类4.2 目标检测4.3 语义分割4.4 实例分割五、趣味项目实战&#xf…
阅读更多...
【前端笔试题二】从一个指定数组中，每次随机取一个数，且不能与上次取数相同，即避免相邻取数重复

【前端笔试题二】从一个指定数组中，每次随机取一个数，且不能与上次取数相同，即避免相邻取数重复

前言 本篇文章记录下我在笔试过程中遇到的真实题目&#xff0c;供大家参考。 1、题目 系统给定一个数组&#xff0c;需要我们编写一个函数&#xff0c;该函数每次调用&#xff0c;随机从该数组中获取一个数&#xff0c;且不能与上一次的取数相同。 2、思路解析 数组已经有了…
阅读更多...
Java编译过程、JIT编译详解、类加载过程

Java编译过程、JIT编译详解、类加载过程

文章目录Java编译执行过程类加载过程即时编译JITJIT编译优化中的常见技术方法内联逃逸分析 栈上分配 锁消除小总结Java编译执行过程 提到编译,可能大多数人想到的就是将**.java编译成***.class文件,但其实Java代码的编译执行是一个非常复杂的过程,将**.java编译成**.class…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023