• 【学生管理系统】用户登录三种验证方式—图片验证、短信验证、邮件验证

    目录

    一、页面需求展示

    二、验证方式—按钮组件

    三、手机短信验证

    四、邮件验证

    五、图片验证邮件验证

    💟 创作不易，不妨点赞💚评论❤️收藏💙一下

    一、页面需求展示

    二、验证方式—按钮组件

     2.1前端

    1. <el-form-item label="验证方式">
    2.         <el-button type="primary" icon="el-icon-phone" circle @click.prevent="verModeFn(1)">el-button>
    3.         <el-button type="success" icon="el-icon-message" circle @click.prevent="verModeFn(2)">el-button>
    4.         <el-button type="warning" icon="el-icon-camera" circle @click.prevent="verModeFn(3)">el-button>
    5. el-form-item>
    6. <el-form-item v-if="verMode == 1" label="手机号" prop="telephone">
    7. el-form-item>
    8. <el-form-item v-if="verMode == 1" label="短信验证">
    9. el-form-item>
    10. <el-form-item v-if="verMode == 2" label="邮箱" prop="email">
    11. el-form-item>
    12. <el-form-item v-if="verMode == 2" label="邮件验证">
    13. el-form-item>
    14. <el-form-item v-if="verMode == 3" label="图片验证">
    15. el-form-item>
    1. <script>
    2.  
    3. export default {
    4.   data() {
    5.     return {
    6.       verMode : '3' ,  //验证方式 
    7.     }
    8.   },
    9.   methods:{
    10.     //验证方式点击方法
    11.     verModeFn(vo){
    12.       this.verMode = vo
    13.     },
    14.   
    15. }
    16. script>

    三、手机短信验证

    3.1 前端

    1. <el-form-item v-if="verMode == 1" label="手机号" prop="telephone">
    2.         <el-row>
    3.           <el-col :span="13">
    4.               <el-input v-model="user.telephone">el-input>
    5.           el-col>
    6.           <el-col :span="11">
    7.               <el-button type="success" style="margin-left: 5px;padding: 10px 6px" 
    8.               @click.prevent="sendSmsCodeFn"
    9.               :disabled="btnDisabled"
    10.               >短信发送{{seconds}}秒el-button>
    11.           el-col>
    12.         el-row>  
    13.       el-form-item>
    14.       <el-form-item v-if="verMode == 1" label="短信验证">
    15.         <el-row>
    16.           <el-col :span="13">
    17.               <el-input v-model="user.codeSms">el-input>
    18.           el-col>
    19.           <el-col :spam="11">
    20.               <span style="color:red">{{errorMsg.message}}span>
    21.           el-col>
    22.         el-row>
    23. el-form-item>
    1. <script>
    2.  
    3. export default {
    4.   data() {
    5.     return {
    6.       user:{
    7.         userName:'',
    8.         password:'',
    9.         telephone:'',    //手机号
    10.       },
    11.       errorMsg: {},
    12.       verMode : '3' ,  //验证方式
    13.       btnDisabled : false ,  //倒计时控制变量，可用不可用
    14.       seconds: 10 ,    //默认倒计时秒数
    15.       timer : null   ,  //接收定时器，清除定时器
    16.   },
    17.   methods:{
    18.     //验证方式点击方法
    19.     verModeFn(vo){
    20.       this.verMode = vo
    21.     },
    22.     //发送短信验证--
    23.     async sendSmsCodeFn(){
    24.       let {data:baseResult} = await this.$axios.post(`/user-service/sms/code`,this.user);
    25.       this.errorMsg = baseResult ;
    26.         //按钮不可用
    27.         this.btnDisabled = true ;
    28.         //倒计时
    29.         this.timer = setInterval(() => {
    30.           if(this.seconds <= 1){
    31.             //结束，重置秒数
    32.             this.seconds = 10 ;
    33.             this.btnDisabled = false ;
    34.             //停止定时器
    35.             clearInterval(this.timer);
    36.           }else{
    37.             this.seconds-- ;
    38.           }
    39.         }, 1000);
    40.     },
    41.   
    42. }
    43. script>

    3.2后端

     生成短信验证码，保存在redis中

    1. @RestController
    2. @RequestMapping("/sms")
    3. public class SmsController {
    4.     @Resource
    5.     private StringRedisTemplate stringRedisTemplate ;
    6.  
    7.     @PostMapping("/code")
    8.     public BaseResult sendSms(@RequestBody TbUser user){
    9.         //获取当前毫秒值
    10.         long start = System.currentTimeMillis();
    11.         try {
    12.             //发送短信
    13.             //1.生成验证码，随机4位数
    14.             String code = RandomStringUtils.randomNumeric(4);
    15.             System.out.println("短信验证码：" + code);
    16.             //存放在redis中
    17.             stringRedisTemplate.opsForValue().set("smsPhone"+user.getTelephone(),code,1, TimeUnit.HOURS);
    18.             //发送短信
    19.             SendSmsResponse smsResponse = SmsUtil.sendSms(user.getTelephone(), user.getUserName(), code, "", "");
    20.             if ("OK".equalsIgnoreCase(smsResponse.getCode())){
    21.                 return BaseResult.ok("短信发送成功，请查收！");
    22.             }else {
    23.                 return BaseResult.error(smsResponse.getMessage());
    24.             }
    25.         } catch (ClientException e) {
    26.             //获取结束时间毫秒值
    27.             long end = System.currentTimeMillis();
    28.             System.out.println(end -start);
    29.             return BaseResult.error("短信发送失败！");
    30.         }
    31.     }
    32.  
    33. }

    点击登录进行短信验证码判断是否正确

    1. @RestController
    2. @RequestMapping("/user")
    3. public class UserController {
    4.     @Resource
    5.     private UserService userService ;
    6.  
    7.     @Resource
    8.     private JwtProperties jwtProperties ;
    9.  
    10.     @Resource
    11.     private StringRedisTemplate stringRedisTemplate ;
    12.  
    13.  
    14.     @PostMapping("/login")
    15.     public BaseResult login(@RequestBody TbUser user) throws Exception {
    16.         //手机短信验证
    17.         if (user.getCodeSms() != null) {
    18.             //获取短信验证码
    19.             String sms = "smsPhone" + user.getTelephone() ;
    20.             String keySms = stringRedisTemplate.opsForValue().get(sms);
    21.             stringRedisTemplate.delete(keySms);
    22.             if (keySms == null ){
    23.                 return BaseResult.error("短信验证码无效！");
    24.             }
    25.             if (!keySms.equalsIgnoreCase(user.getCodeSms())){
    26.                 return BaseResult.error("短信验证码错误！");
    27.             }
    28.         }
    29.  
    30.         //登录对用户名和密码进行判断
    31.         //调用userService接口中的方法login进行实现类编写，判断用户名和密码是否正确
    32.         TbUser findUser = userService.login(user);
    33.         if (findUser != null){
    34.             //设置token
    35.             String token = JwtUtils.generateToken(findUser, jwtProperties.getExpire(), jwtProperties.getPrivateKey());
    36.             return BaseResult.ok("登录成功，欢迎"+findUser.getUserName(),findUser).append("token",token);
    37.         }else {
    38.             return BaseResult.error("用户名或密码不正确！");
    39.         }
    40.     }
    41. }

    四、邮件验证

    4.1 前端

    1. <el-form-item v-if="verMode == 2" label="邮箱" prop="email">
    2.         <el-row>
    3.           <el-col :span="13">
    4.              <el-input v-model="user.email">el-input>
    5.           el-col>
    6.           <el-col :span="11">
    7.               <el-button type="success" style="margin-left: 5px;padding: 10px 6px"
    8.                @click.prevent="emailCodeFn"
    9.                :disabled="btnDisabled"
    10.                >邮件发送{{seconds}}秒el-button>
    11.           el-col>
    12.         el-row>  
    13.       el-form-item>
    14.       <el-form-item v-if="verMode == 2" label="邮件验证">
    15.         <el-row>
    16.           <el-col :span="13">
    17.               <el-input v-model="user.emailCode">el-input>
    18.           el-col>
    19.           <el-col :spam="11">
    20.               <span style="color:red">{{errorMsg.message}}span>
    21.           el-col>
    22.         el-row>
    23. el-form-item>
    1. <script>
    2.  
    3. export default {
    4.   data() {
    5.     return {
    6.       user:{
    7.         userName:'',
    8.         password:'',
    9.         email : ''      
    10.       },
    11.       errorMsg: {},
    12.       verMode : '3' ,  //验证方式
    13.       btnDisabled : false ,  //倒计时控制变量，可用不可用
    14.       seconds: 10 ,    //默认倒计时秒数
    15.       timer : null   ,  //接收定时器，清除定时器
    16.   },
    17.   methods:{
    18.     //验证方式点击方法
    19.     verModeFn(vo){
    20.       this.verMode = vo
    21.     },
    22.     //发送邮箱验证
    23.     async emailCodeFn(){
    24.       let {data:baseResult} = await this.$axios.post(`/user-service/email/send`,this.user);
    25.       this.errorMsg = baseResult ;
    26.       if(baseResult.code == 20000){
    27.           this.btnDisabled = true ;
    28.           this.timer = setInterval(() => {
    29.             if(this.seconds <= 1){
    30.               this.seconds = 10 ;
    31.               this.btnDisabled = false ;
    32.               clearInterval(this.timer);
    33.           }else {
    34.             this.seconds-- ;
    35.           }
    36.         }, 1000);
    37.       }
    38.     }
    39.   
    40. }
    41. script>

    4.2后端

      生成短信验证码，保存在redis中

    1. @RestController
    2. @RequestMapping("/email")
    3. public class EmailController {
    4.     @Resource
    5.     private StringRedisTemplate stringRedisTemplate ;
    6.     @Resource
    7.     private JavaMailSender javaMailSender ;
    8.  
    9.     @PostMapping("/send")
    10.     public BaseResult send(@RequestBody TbUser tbUser){
    11.         try {
    12.             //随机生成验证码
    13.             String code = RandomStringUtils.randomNumeric(4);
    14.             System.out.println("邮件验证码："+code);
    15.             //保存到redis
    16.             String key = "email"+tbUser.getUserName();
    17.             stringRedisTemplate.opsForValue().set(key,code,1, TimeUnit.HOURS);
    18.             //发送
    19.             EmailUtils.sendEmail(javaMailSender,tbUser.getEmail(),"邮件验证码为："+code);
    20.             //返回
    21.             return BaseResult.ok("邮件发送成功！");
    22.         } catch (Exception e) {
    23.             e.getMessage();
    24.             return BaseResult.error("发送邮件失败！");
    25.         }
    26.     }
    27. }

    点击登录进行邮件验证码判断是否正确

    1. @RestController
    2. @RequestMapping("/user")
    3. public class UserController {
    4.     @Resource
    5.     private UserService userService ;
    6.  
    7.     @Resource
    8.     private JwtProperties jwtProperties ;
    9.  
    10.     @Resource
    11.     private StringRedisTemplate stringRedisTemplate ;
    12.  
    13.  
    14.     @PostMapping("/login")
    15.     public BaseResult login(@RequestBody TbUser user) throws Exception {
    16.        //邮箱验证
    17.         if (user.getEmailCode() != null){
    18.             //获取邮箱验证码
    19.             String keyEmail = "email"+user.getUserName();
    20.             String redisEmail = stringRedisTemplate.opsForValue().get(keyEmail);
    21.             stringRedisTemplate.delete(keyEmail);
    22.             if (redisEmail == null){
    23.                 return BaseResult.error("email验证码无效！");
    24.             }
    25.             if (!redisEmail.equalsIgnoreCase(user.getEmailCode())){
    26.                 return BaseResult.error("email验证码错误！");
    27.             }
    28.         }
    29.  
    30.         //登录对用户名和密码进行判断
    31.         //调用userService接口中的方法login进行实现类编写，判断用户名和密码是否正确
    32.         TbUser findUser = userService.login(user);
    33.         if (findUser != null){
    34.             //设置token
    35.             String token = JwtUtils.generateToken(findUser, jwtProperties.getExpire(), jwtProperties.getPrivateKey());
    36.             return BaseResult.ok("登录成功，欢迎"+findUser.getUserName(),findUser).append("token",token);
    37.         }else {
    38.             return BaseResult.error("用户名或密码不正确！");
    39.         }
    40.     }
    41. }

    五、图片验证邮件验证

    5.1 前端

    1. <el-form-item v-if="verMode == 3" label="图片验证">
    2.         <el-row>
    3.           <el-col :span="11">
    4.             <el-input v-model="user.verifyCode">el-input>
    5.           el-col>
    6.           <el-col :span="13" >
    7.             <img :src="imgSrc"  v-if="user.userName != ''"
    8.             style="width: 90px;height: 39px;padding-left: 4px"
    9.             @click.prevent="changeVerifyCode"
    10.             />
    11.             <span>看不清？<a href="" @click.prevent="changeVerifyCode">换一张a>span>
    12.           el-col>
    13.         el-row>
    14.         <span style="color:red">{{errorMsg.message}}span>
    15.       el-form-item>
    16. <el-form-item>
    1. <script>
    2.  
    3. export default {
    4.   data() {
    5.     return {
    6.       user:{
    7.         userName:'',
    8.         password:'',
    9.         verifyCode:'', //图片验证码
    10.       },
    11.       imgSrc: '',    //绑定图片
    12.       errorMsg: {},
    13.       verMode : '3' ,  //验证方式
    14.   },
    15.   methods:{
    16.     //验证方式点击方法
    17.     verModeFn(vo){
    18.       this.verMode = vo
    19.     },
    20.     //图片验证码
    21.     changeVerifyCode(){
    22.       if(this.user.userName){
    23.         //使用时间对验证码进行标识
    24.         //与用户名进行绑定，只要用户名失去焦点就对图片验证码进行一个更新
    25.         this.imgSrc = `http://localhost:10010/user-service/verifycode?userName=${this.user.userName}&t=${new Date().getTime()}` 
    26.       }else{
    27.         this.errorMsg.message = '用户不能为空';
    28.       }     
    29.     },
    30.   
    31. }
    32. script>

    5.2后端

     生成图片验证码，保存在redis中

    1. @Controller
    2. @RequestMapping("/verifycode")
    3. public class VerifyCodeController {
    4.     @Resource
    5.     private StringRedisTemplate stringRedisTemplate ;
    6.  
    7.     @GetMapping
    8.     public void verifyCodeFn(String userName,HttpServletResponse response) throws Exception {
    9.         //准备数据
    10.         //字体只显示大写，去掉了1,0,i,o几个容易混淆的字符
    11.         String VERIFY_CODES = "23456789ABCDEFGHJKLMNPQRSTUVWXYZ";
    12.  
    13.         int IMG_WIDTH = 72;
    14.         int IMG_HEIGTH = 27;
    15.         Random random = new Random();
    16.         //创建图片
    17.         BufferedImage image = new BufferedImage(IMG_WIDTH, IMG_HEIGTH, BufferedImage.TYPE_INT_RGB);
    18.         //画板
    19.         Graphics g = image.getGraphics();
    20.         //填充背景
    21.         g.setColor(Color.WHITE);
    22.         g.fillRect(1,1,IMG_WIDTH-2,IMG_HEIGTH-2);
    23.  
    24.         g.setFont(new Font("楷体", Font.BOLD,25));
    25.  
    26.         StringBuilder sb = new StringBuilder();
    27.         //写字
    28.         for(int i = 1 ; i <= 4 ; i ++){
    29.             //随机颜色
    30.             g.setColor(new Color(random.nextInt(255),random.nextInt(255),random.nextInt(255)));
    31.             int len = random.nextInt(VERIFY_CODES.length());
    32.             String str = VERIFY_CODES.substring(len,len+1);
    33.             sb.append(str);
    34.             g.drawString(str, IMG_WIDTH / 6 * i , 22 );
    35.         }
    36.  
    37.         //将验证码存放到redis
    38.         //设置名称login+username ,过期时间1小时
    39.         stringRedisTemplate.opsForValue().set( "login" + userName , sb.toString() , 1 , TimeUnit.HOURS);
    40.  
    41.         // 生成随机干扰线
    42.         for (int i = 0; i < 30; i++) {
    43.             //随机颜色
    44.             g.setColor(new Color(random.nextInt(255),random.nextInt(255),random.nextInt(255)));
    45.             int x = random.nextInt(IMG_WIDTH - 1);
    46.             int y = random.nextInt(IMG_HEIGTH - 1);
    47.             int x1 = random.nextInt(12) + 1;
    48.             int y1 = random.nextInt(6) + 1;
    49.             g.drawLine(x, y, x - x1, y - y1);
    50.         }
    51.         //响应到浏览器
    52.         ImageIO.write(image,"jpeg", response.getOutputStream());
    53.     }
    54. }

    点击登录进行图片验证码判断是否正确

    1. @RestController
    2. @RequestMapping("/user")
    3. public class UserController {
    4.     @Resource
    5.     private UserService userService ;
    6.  
    7.     @Resource
    8.     private JwtProperties jwtProperties ;
    9.  
    10.     @Resource
    11.     private StringRedisTemplate stringRedisTemplate ;
    12.  
    13.  
    14.     @PostMapping("/login")
    15.     public BaseResult login(@RequestBody TbUser user) throws Exception {
    16.          //校验图片验证码
    17.         if (!user.getVerifyCode().equals("")) {
    18.             //获取验证码
    19.             String key = "login" + user.getUserName() ;
    20.             String verify = stringRedisTemplate.opsForValue().get(key);
    21.             //删除验证码
    22.             stringRedisTemplate.delete(key);
    23.             if (verify == null) {
    24.                 return BaseResult.error("图片验证码无效！");
    25.             }
    26.             if (!verify.equalsIgnoreCase(user.getVerifyCode())) {
    27.                 return BaseResult.error("图片验证码错误！");
    28.             }
    29.         }
    30.  
    31.         //登录对用户名和密码进行判断
    32.         //调用userService接口中的方法login进行实现类编写，判断用户名和密码是否正确
    33.         TbUser findUser = userService.login(user);
    34.         if (findUser != null){
    35.             //设置token
    36.             String token = JwtUtils.generateToken(findUser, jwtProperties.getExpire(), jwtProperties.getPrivateKey());
    37.             return BaseResult.ok("登录成功，欢迎"+findUser.getUserName(),findUser).append("token",token);
    38.         }else {
    39.             return BaseResult.error("用户名或密码不正确！");
    40.         }
    41.     }
    42. }

    写到最后

    四季轮换，已经数不清凋零了多少， 愿我们往后能向心而行，一路招摇胜！

    🐋 你的支持认可是我创作的动力

    💟 创作不易，不妨点赞💚评论❤️收藏💙一下

    😘 感谢大佬们的支持，欢迎各位前来不吝赐教

  • 相关阅读:
    Spring Data JPA系列4——Spring声明式事务处理与多数据源支持
    服务器租用机房机房的类型应该如何选择
    英语句式参考纯享版 - 定语从句
    asp毕业设计—— 基于asp+access的网上动态同学录系统设计与实现（毕业论文+程序源码）——同学录系统
    maven项目如何打包运行指定java程序(maven-shade-plugin插件的使用)
    【MQTT】Javascript通过WebSocket连接MQTT
    基于MxNet实现目标检测-YoloV4【附部分源码及模型】
    Element Plus 组件库相关技术：7. 组件实现的基本流程及 Icon 组件的实现
    云上未来：探索云计算的技术变革与应用趋势
    【复旦邱锡鹏教授《神经网络与深度学习公开课》笔记】神经元和人工神经网络
  • 原文地址：https://blog.csdn.net/zsy3757486/article/details/127701189