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

其他方案=>引入短信服务发送手机验证码进行安全校验
操作相对复杂且收费，详细教程可供参考选择

在我们进行登录注册等等敏感操作时，为了保证用户信息的安全性，常常会碰到需要接收手机短信验证码进行验证的场景，虽然它的安全系数相对较高，但是引入手机验证码使用需要进行付费，显然不适合我们个人项目的学习，于是我们可以尝试使用各大平台的提供的邮件服务进行安全校验，步骤基本一致，本处我们采用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")@ResponseBodypublic 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 {@Resourceprivate RedisTemplate<String, String> redisTemplate = new RedisTemplate<>();/*** @param targetEmail 用户邮箱* @return*/@GetMapping("/getCode")@ResponseBodypublic 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中实现了，接下来可以引入正式自己项目啦

四.线上部署问题

按上述代码本地运行正常，但部署到线上环境如果产生如下错误:

1.Sending the email to the following server failed : smtp.163.com:465
2.Could not connect to SMTP host: smtp.163.com, port: 465
3.No appropriate protocol (protocol is disabled or cipher suites are inappropriate)

原因：阿里云等服务器厂商禁用了默认的25端口，我们需要使用例如465等可用端口发送邮件并开启ssl连接，并进行如下相关配置即可，最后在服务器防火墙开放对应窗口即可。

/*** 验证获取操作安全证书*/
public class CheckCodeUtils {/*** 发送邮件代码** @param targetEmail 目标用户邮箱* @param authCode    发送的验证码*/public static String GetEmailCode(String targetEmail, String authCode) {try {// 创建邮箱对象SimpleEmail mail = new SimpleEmail();// 设置发送邮件的服务器mail.setHostName("smtp.qq.com");// "你的邮箱号"+ "上文开启SMTP获得的授权码"mail.setAuthentication("fsp1xxxx@qq.com", "GHNUxxxxxVL");// 发送邮件 "你的邮箱号"+"发送时用的昵称"mail.setFrom("fsp15xxx@qq.com", "伙伴匹配系统");// 发送服务端口mail.setSslSmtpPort(String.valueOf(465));// 使用安全链接mail.setSSLOnConnect(true);System.setProperty("mail.smtp.ssl.enable", "true");System.setProperty("mail.smtp.ssl.protocols", "TLSv1.2");// 接收用户的邮箱mail.addTo(targetEmail);// 邮件的主题(标题)mail.setSubject("注册验证码");// 邮件的内容mail.setMsg("【伙伴匹配系统】您的验证码为:" + authCode + "(5分钟内有效)");// 发送mail.send();return "发送成功,请注意查收";} catch (EmailException e) {return e.getMessage();}}
}

五.前端(补充)

用原生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 = truelet second = 60;const intervalObj = setInterval(function () {getCode.innerText = "请" + second + "秒后再重试"if (second === 0) {getCode.innerText = "获取验证码"getCode.disabled = falseclearInterval(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.rhkb.cn/news/5684.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

ChatGPT与教育的未来

ChatGPT与教育的未来

Datawhale干货 作者&#xff1a;王鹏&#xff0c;腾讯研究院专家 来源&#xff1a;数说职教 历史上&#xff0c;每一次技术替代人类时&#xff0c;又提供了更多更好的新岗位。但我们往往忘记这个过程中牺牲掉的一代甚至几代人。教育系统的响应方式和速度也许将决定这个替代过程…
阅读更多...
万字知识长文：ChatGPT 从零完全上手实操指南

万字知识长文：ChatGPT 从零完全上手实操指南

ChatGPT 的横空出世&#xff0c;让很多人焦虑不已&#xff0c;不过&#xff0c;你完全不需要为此焦虑&#xff0c;因为比 AI 更强大永远是驾驭 AI 为自己所用的人类。 而且 GPT 远没有各大商家炒作的那么玄乎 &#xff0c;它应用逻辑也非常简单&#xff0c;你完全没必要为此去…
阅读更多...
玩转ChatGPT：吴恩达/OpenAI合作教程《面向开发者的ChatGPT提示工程》

玩转ChatGPT：吴恩达/OpenAI合作教程《面向开发者的ChatGPT提示工程》

一、写在前面 最近&#xff0c;吴恩达与CloseOpenAI合作出了一个教程《面向开发者的ChatGPT提示工程》&#xff0c;第一时间就观摩了&#xff0c;有些体会&#xff0c;现在把个人觉得有意思的搬运过来。 我的机器学习入门就是看的吴恩达的教程&#xff01;大佬长得像冯巩&…
阅读更多...
Android多语言切换

Android多语言切换

先看下demo中点击对应要显示语言的按钮&#xff0c;效果图如下&#xff1a; 先贴上项目目录图&#xff1a; values-语言代号-地区代号 分别表示不同地区语言资源&#xff0c;常用的国际化资源如下&#xff1a; 中文&#xff08;中国&#xff09;&#xff1a;values-zh-rCN 中…
阅读更多...
Android国际化多语言切换

Android国际化多语言切换

关于App国际化&#xff0c;之前有讲到国际化资源、字符换、布局相关&#xff0c;想要了解的猛戳用力抱一下APP国际化。借着本次重构多语言想跟大家聊一下多语言切换&#xff0c;多语言切换对于一款国际化App来讲是重中之重&#xff0c;并非难事&#xff0c;但是若要做好也是一件…
阅读更多...
几个chatGPT的难题，关于语言转换

几个chatGPT的难题，关于语言转换

不同语言代码的移植一直以来是程序员面临的难题&#xff0c;最近问了问chatGPT能否解决这个问题。 编写一个程序&#xff0c;实现c语言函数转换为php函数 答&#xff1a;这是一个非常困难的问题&#xff0c;因为两种语言的语法、结构和标准库都不相同。如果您希望完成这个任务&…
阅读更多...
使用 ChatGPT 从视频脚本创建知识图谱，使用 GPT-4 作为领域专家来帮助您从视频转录中提取知识（教程含完整源码）

使用 ChatGPT 从视频脚本创建知识图谱，使用 GPT-4 作为领域专家来帮助您从视频转录中提取知识（教程含完整源码）

我一直很喜欢深海纪录片，因为这里的生态系统和动物与陆地上的大不相同。因此，我决定在水下纪录片上测试 GPT-4 的信息提取能力。此外，我不知道有任何开源 NLP 模型经过训练可以检测海洋植物和生物之间的关系。因此，一部深海纪录片是使用 GPT-4 构建知识图谱的绝佳示例。 数…
阅读更多...
ChatGPT实战：短视频文案、脚本创作

ChatGPT实战：短视频文案、脚本创作

你还在拼脑力输出视频脚本吗&#xff1f;AI时代&#xff0c;该提高提高生产力了&#xff0c;机器一天的视频出货量能赶上以往几个月的工作量&#xff0c;人力怎么可能卷的过机器&#xff1f; 使用ChatGPT创作视频脚本可以带来一些好处&#xff1a; 创意激发&#xff1a;ChatGPT…
阅读更多...
玩转#ChatGPT之“用Chat GPT 做美食攻略”

玩转#ChatGPT之“用Chat GPT 做美食攻略”

ChatGPT是一个大型的语言模型&#xff0c;可以利用其强大的自然语言处理能力来帮助你进行美食攻略。 首先&#xff0c;你需要提供相应地区的美食相关信息&#xff0c;比如当地的名菜、特色小吃、饮食文化等。然后&#xff0c;你可以向ChatGPT提出问题&#xff0c;例如&#xf…
阅读更多...
如何使用ChatGPT做一份五一出游攻略？

如何使用ChatGPT做一份五一出游攻略？

五一假期即将来临&#xff0c;或许你已经着手计划这个假期的旅游行程了呢&#xff1f; 但是若是缺乏旅游行程规划的经验&#xff0c;或者在选择质量上良莠不齐的攻略时感到困惑&#xff0c;你可以尝试使用ChatGPT来创建一份自己的旅游攻略哦&#xff01; 首先&#xff0c;我们…
阅读更多...
如何高效使用ChatGPT

如何高效使用ChatGPT

随着ChatGPT的不断推广&#xff0c;许多人在使用时都会遇到一个问题&#xff1a;ChatGPT给出的回答不是我想要的答案。这也是我们早期接触ChatGPT时会遇到的状况——用得“不太好”。 在对ChatGPT不断地探索、尝试以及查阅官方资料后&#xff0c;我们找到了一个突破点。ChatGP…
阅读更多...
假期出行小程序+chatgpt旅游攻略

假期出行小程序+chatgpt旅游攻略

马上五一了，如果想出去旅游，需要提取规划好路线图，我们可以借助chatgpt的路线规划功能帮我们生成一份攻略，按照攻略我们就可以愉快的出去玩耍了。 本文结合chatgpt，利用低代码工具帮我们制作一份旅行导览小程序，可以按照行程方便的出行。 1 制定攻略 我们在聊天窗口输…
阅读更多...
快速解决无法登录网页版微信的问题，亲测有效

快速解决无法登录网页版微信的问题，亲测有效

在公司开发测试阶段&#xff0c;需要使用网页版微信对开发页面进行调试&#xff0c;但是我的两个微信号在扫码登录网页版微信时&#xff0c;都出现了以下提示&#xff1a; 为了你的帐号安全&#xff0c;此微信号不能登录网页微信。你可以使用Windows微信或Mac微信在电脑端登录。…
阅读更多...
ChatGPT修bug横扫全场，准确率达78%！程序员该开心还是难过？

ChatGPT修bug横扫全场，准确率达78%！程序员该开心还是难过？

金磊 衡宇 发自 凹非寺量子位 | 公众号 QbitAI ChatGPT到底有多会修bug&#xff1f; 这事终于有人正儿八经地搞研究了—— 来自德国、英国的研究人员&#xff0c;专门搭了个“擂台”来检验ChatGPT的这项本领。 除了ChatGPT之外&#xff0c;研究人员还找来了其它三位修bug的“AI…
阅读更多...
vue3.0仿写百度分页组件 chatgpt优化版

vue3.0仿写百度分页组件 chatgpt优化版

我写的<template><div class"paginations" v-iftotalItems > 0><button click"changePage(1)" >首页</button><button click"changePage(currentPage - 1)" :disabled"currentPage 1" :class"{ …
阅读更多...
ChatGPT目前优化现状

ChatGPT目前优化现状

文章目录 复习一下什么是ChatGPT一、目前优化的项&#xff08;使用中的感受&#xff09;二、结合上下文三、断层连续性四、知识跟进总结 复习一下什么是ChatGPT ChatGPT是基于OpenAI的GPT-3.5架构的语言模型&#xff0c;旨在提供广泛的语言理解和生成能力。它通过训练大量的文…
阅读更多...
ChatGPT + 低代码，将干掉 40% 的程序员

ChatGPT + 低代码，将干掉 40% 的程序员

见字如面&#xff0c;我是军哥&#xff01; 关于程序员失业有个段子&#xff1a;拖拽建站出来的时候&#xff0c;他们人说程序员会失业&#xff1b;低代码出来了&#xff0c;他们说程序员会失业&#xff1b;Copilot出来了&#xff0c;他们说程序员会失业&#xff1b;如今ChatGP…
阅读更多...
Java的Idea怎么用ChatGpt，让些代码变丝滑？

Java的Idea怎么用ChatGpt，让些代码变丝滑？

发现两款idea的AI插件神器&#xff0c;和一个AI编辑器 1、tabnine https://zhuanlan.zhihu.com/p/343938113 当提示代码出现后&#xff0c;其中 按tab键就可以通用提示出的代码了&#xff0c;alt[ 是换提示代码&#xff0c;试用期限为14天。&#xff08;注意标红的&#xff0…
阅读更多...
ChatGPT优化Python代码的小技巧

ChatGPT优化Python代码的小技巧

使用 chatGPT 优化代码并降低运行时的云成本 许多开发人员说“过早的优化是万恶之源”。 这句话的来源归功于Donald Knuth。在他的书《计算机编程的艺术》中&#xff0c;他写道&#xff1a; “真正的问题是&#xff0c;程序员在错误的时间和错误的地方花费了太多时间来担心效率…
阅读更多...
为什么有很多国家以及地区要限制chatGPT的发展

为什么有很多国家以及地区要限制chatGPT的发展

作为GPT-3.5 Turbo&#xff0c;我可以尝试为您解答这个问题。虽然我无法提供现实世界的观点&#xff0c;但我可以尝试为您提供一些可能的原因。 限制ChatGPT发展的国家和地区可能有各种原因。以下是其中一些可能的原因&#xff1a; 1.数据隐私和安全&#xff1a; 人们担心使用…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023