验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)

news2024/11/15 5:55:11

🧸欢迎来到dream_ready的博客,📜相信你对这篇博客也感兴趣o (ˉ▽ˉ;)

📜表白墙/留言墙 —— 中级SpringBoot项目,MyBatis技术栈MySQL数据库开发,练手项目前后端开发(带完整源码) 全方位全步骤手把手教学

目录

1、验证码案例

1.1、项目前端页面展示:

1.2、代码结构展示:

2、Kaptcha 插件介绍及简单讲解如何使用

2.1、原理

2.2、引入依赖

2.3、生成验证码

2.4、Kaptcha详细配置如下:

2.5、常用配置如下(直接在yml里配置即可,可适当忽略上面那么多配置,下面这些是最常用的!):

3、验证码项目正式编写

3.1、约定前后端交互接口

3.2、创建SpringBoot项目

3.3、实现服务器端(后端)代码

3.3.1、引入依赖

3.3.2、通过yml配置创建验证码生成器

3.3.3、后端返回验证码

3.3.4、验证码校验

3.4、实现前端代码(带完整源码)

3.4.1、主页页面:

3.4.2、验证正确后跳转的页面:

!!!注意事项!部署前后必看!!!


1、验证码案例

注:验证码生成大多由前端负责,但由于各位后端程序员不太懂前端,又想学习验证码的生成和验证,所以作者编写了这篇基本由后端负责的验证码案例!

随着安全性的要求越来越⾼, ⽬前项⽬中很多都使⽤了验证码, 验证码的形式也是多种多样, 更复杂的图形验证码和行为验证码已经成为了更流⾏的趋势.

验证码的实现⽅式很多, ⽹上也有⽐较多的插件或者⼯具包可以使⽤, 咱们选择使⽤Google的开源项⽬ Kaptcha来实现.

1.1、项目前端页面展示:

 

1.2、代码结构展示:

2、Kaptcha 插件介绍及简单讲解如何使用

  • 此处我们使用的这个Kaptcha是适配SpringBoot进行二次开发后的,使用极其简单
  • Kaptcha 是Google的⼀个⾼度可配置的实⽤验证码⽣成⼯具,官方文档:
  • https://code.google.com/archive/p/kaptcha/
  • ⽹上有很多⼈甚⾄公司基于Google的kaptcha进⾏了⼆次开发. 我们选择⼀个直接适配SpringBoot的 开源项⽬
  • GitHub - oopsguy/kaptcha-spring-boot: Kaptcha Spring Boot Starter help you use Google Kaptcha with Spring Boot easier. 一个简单封装了 Kaptcha 验证码库的 Spring Boot Starter
  • 由于作者的⽂档写的不是很全, 下⾯简单介绍下插件的使⽤

2.1、原理

验证码可以客⼾端⽣成, 也可以服务器⽣成. 对于普通的字符验证码, 后端通常分两部分.

⼀是⽣成验证码内容, 根据验证码内容和⼲扰项等, ⽣成图⽚, 返回给客⼾端

⼆是把验证码内容存储起来, 校验时取出来进⾏对⽐.

kaptcha插件选择把验证码存储在Session⾥.

2.2、引入依赖

<dependency>
 <groupId>com.oopsguy.kaptcha</groupId>
 <artifactId>kaptcha-spring-boot-starter</artifactId>
 <version>1.0.0-beta-2</version>
</dependency>

2.3、生成验证码

该插件提供了两种⽅式⽣成验证码

  • GitHub - oopsguy/kaptcha-spring-boot: Kaptcha Spring Boot Starter help you use Google Kaptcha with Spring Boot easier. 一个简单封装了 Kaptcha 验证码库的 Spring Boot Starter  第一种参考官方文档即可,有点麻烦,此处不再介绍
  • 仅通过配置⽂件来⽣成验证码(超级简单,推荐)

2.4、Kaptcha详细配置如下:

上面的许多配置⽂档中都没有介绍, 感兴趣的朋友可以观看源码:

com.oopsguy.kaptcha.autoconfigure.KaptchaProperties

也可以使⽤ kaptcha.items 配置多个验证码⽣成器

kaptcha.items 是⼀个Map, key为验证码⽣成器名称, value为验证码⽣成器的配置

2.5、常用配置如下(直接在yml里配置即可,可适当忽略上面那么多配置,下面这些是最常用的!):

kaptcha:
  image:
    width: 100
    height: 60
  textproducer:
    font:
      size: 36
  items:
    # home captcha
    admin:
      path: /admin/captcha
      session:
        key:  HOME_KAPTCHA_SESSION_KEY
        date: HOME_KAPTCHA_SESSION_DATE

配置说明:

配置后, 可以直接访问 http://XXXX:port/home/captcha即可⽣成验证码

3、验证码项目正式编写

3.1、约定前后端交互接口

生成验证码

请求: GET         /admin/captcha

响应:图片内容

补充说明:浏览器给服务器发送⼀个 GET /admin/captcha 这样的请求, 服务器返回⼀个图⽚, 浏览器显示在页面上

校验验证码是否正确

请求:POST         /admin/check

请求中携带内容: captcha= XXXX (captcha是用户输入的验证码)

响应:true/false

根据⽤⼾输⼊的验证码, 校验验证码是否正确. true: 验证成功. false: 验证失败.

3.2、创建SpringBoot项目

如何在idea中创建Springboot项目? 手把手带你创建Springboot项目,稳!-CSDN博客

创建时导入SpringWeb和lombok依赖

3.3、实现服务器端(后端)代码

3.3.1、引入依赖

<dependency>
    <groupId>com.oopsguy.kaptcha</groupId>
    <artifactId>kaptcha-spring-boot-starter</artifactId>
    <version>1.0.0-beta-2</version>
</dependency>

3.3.2、通过yml配置创建验证码生成器

你的application文件后缀大概率是  .properties  ,将其后缀改为 .yml   即可

kaptcha:
  image:
    width: 100
    height: 60
  textproducer:
    font:
      size: 33
  items:
    # home captcha
    admin:
      path: /admin/captcha
      session:
        key:  HOME_KAPTCHA_SESSION_KEY
        date: HOME_KAPTCHA_SESSION_DATE

简单解释session下面的配置:

  • key:引入该配置后,它会自动帮我们把验证码内容(已转换成字符串)设置到session中,名称为key后面的内容
  • date:通常设置为验证码过期时间 

友情提示:我这里只写了部分配置,能满足上面我展示图片的要求,若你想配置更多样式,可以查看我上面的配置大全!这里不过多介绍

3.3.3、后端返回验证码

注:该配置引入后,不需要写其他代码,他会自动创建/admin/captcha接口,访问该接口即显示验证码,这个工作是该配置以及引入的依赖包自动帮我们完成的

3.3.4、验证码校验

import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpSession;
import java.util.Date;

@RequestMapping("/admin")
@RestController
public class CaptchaController {
    //企业标准(建议):
    //常量定义: key: 全部大写, 单词之间使用下划线分割  value: 通常是小写, 以下划线分割
    private static final String KAPTCHA_SESSION_KEY = "HOME_KAPTCHA_SESSION_KEY";
    private static final String KAPTCHA_SESSION_DATE = "HOME_KAPTCHA_SESSION_DATE";
    //验证码的有效时间:ms
    private static final Long SESSION_TIMEOUT = 60 * 1000L;
    //验证成功: true
    //验证失败: false

    /**
     *  1. 从Session中获取到生成的验证码
     *  2. 比对前端传递的验证码和Session中存储的是否一样
     */
    @RequestMapping("/check")
    public Boolean check(String captcha, HttpSession session){


        if (!StringUtils.hasLength(captcha)){
            return false;
        }
        //从Session中获取验证码
        String saveCaptcha = (String)session.getAttribute(KAPTCHA_SESSION_KEY);
        Date saveDate = (Date)session.getAttribute(KAPTCHA_SESSION_DATE);
        //比对验证码
        if (captcha.equals(saveCaptcha)){
            //比对日期
            if (saveDate==null || System.currentTimeMillis() - saveDate.getTime()<SESSION_TIMEOUT){
                return true;
            }
        }
        return false;
    }
}

逻辑如下:

  • 先判断验证码是否为空,若为空,直接返回false,不为空,往下走
  • 从session中获取验证码和过期时间
  • 比对验证码是否正确,且是否过期,如果有任意一个不符合条件,返回false,如果都符合条件,返回true

3.4、实现前端代码(带完整源码)

3.4.1、主页页面:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">

  <title>验证码</title>
  <style>
    #inputCaptcha {
      height: 30px;
      vertical-align: middle; 
    }
    #verificationCodeImg{
      vertical-align: middle; 
    }
    #checkCaptcha{
      height: 40px;
      width: 100px;
    }
  </style>
</head>

<body>
  <h1>输入验证码</h1>
  <div id="confirm">
    <input type="text" name="inputCaptcha" id="inputCaptcha">
<!--    <img id="verificationCodeImg" src="/admin/captcha" style="cursor: pointer;" title="看不清?换一张" />-->
    <img id="verificationCodeImg" src="http://127.0.0.1:8080/admin/captcha" style="cursor: pointer;" title="看不清?换一张" />
    <input type="button" value="提交" id="checkCaptcha">
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script>
    
    $("#verificationCodeImg").click(function(){
      // $(this).hide().attr('src', '/admin/captcha?dt=' + new Date().getTime()).fadeIn();
      $(this).hide().attr('src', 'http://127.0.0.1:8080/admin/captcha?dt=' + new Date().getTime()).fadeIn();
    });

    $("#checkCaptcha").click(function () {
      $.ajax({
        type: "get",
        url: "/admin/check",
        data:{
          captcha: $("#inputCaptcha").val()
        },
        success:function(result){
          if(result){
            location.href = "success.html";
            // location.assign("success.html");   // 和上面这句一样,也是页面跳转
          }else{
            alert("验证码错误");
          }
        }
      });
        // alert("验证码校验");
    });

  </script>
</body>

</html>

前端代码就不在这里过多解释了,会的不用解释,不会的解释两下还是不明白,建议丢给gpt 

3.4.2、验证正确后跳转的页面:

注:验证失败的话会在主页弹出一个小窗口,说明验证码校验失败

​​​​<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>验证成功页</title>
</head>
<body>
    <h1>验证成功</h1>
</body>
</html>

至此,项目所有代码编写完毕!

!!!注意事项!部署前后必看!!!

本项目部署在本地,默认是本地ip地址,也就是127.0.0.1或localhost

正常来说, 127.0.0.1:8080/index.html  和  localhost:8080/index.html  都可以,但是博主自己验证包括找了些其他博主验证,localhost:8080/index.html 访问的话是存在些许bug的,后端取session可能为空,原因是session没有设置

127.0.0.1不会有这个问题,跨域访问ip也不会有问题,所以只要不用localhost即可,请问放心使用!

🧸欢迎您于百忙之中阅读这篇博客,📜希望这篇博客给您带来了一些帮助,祝您生活愉快!

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

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

相关文章

4.6 Windows驱动开发:内核遍历进程VAD结构体

在上一篇文章《内核中实现Dump进程转储》中我们实现了ARK工具的转存功能&#xff0c;本篇文章继续以内存为出发点介绍VAD结构&#xff0c;该结构的全程是Virtual Address Descriptor即虚拟地址描述符&#xff0c;VAD是一个AVL自平衡二叉树&#xff0c;树的每一个节点代表一段虚…

计算机网络学习笔记(六):应用层(待更新)

目录​​​​​​​ 6.2 文件传送协议FTP(File Transfer Protocol) 6.2.1 FTP概述 6.2.2 FTP的基本工作原理 6.5 电子邮件&#xff1a;SMTP、POP3、IMAP 6.5.1 电子邮件概述 6.5.2 发邮件&#xff1a;简单邮件传送协议SMTP 6.5.3 电子邮件的信息格式、地址格式 6.5.4 收…

Python语言:随机生成几个数案例分析讲解

背景 在某一节课上&#xff0c;老师使用xx通软件随机生成几个学号&#xff0c;并让对应学号同学回答问题。虽然我对xx通软件没啥好感&#xff0c;不过感觉这个随机生成学号功能挺不错的。今天我用python实现一个这个功能。 其实原理挺简单的&#xff0c;就是就是在一堆数字里随…

vite vue3配置eslint和prettier以及sass

准备 教程 安装eslint 官网 vue-eslint ts-eslint 安装eslint yarn add eslint -D生成配置文件 npx eslint --init安装其他插件 yarn add -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier eslint-plugin…

搞科研、写论文,如何正确使用GPT?AIGC技术解析、提示词工程高级技巧、AI绘图、ChatGPT/GPT4应用

目录 专题一 OpenAI开发者大会最新技术发展及最新功能应用 专题二 AIGC技术解析 专题三 提示词工程高级技巧 专题四 ChatGPT/GPT4的实用案例 专题五 让ChatGPT/GPT4成为你的论文助手 专题六 让ChatGPT/GPT4成为你的编程助手 专题七 让ChatGPT/GPT4进行数据处理 专题八 …

【java学习—十四】反射机制获取类的属性和包(4)

文章目录 1. Field2. 类所在的包3. 举例 1. Field public Field[] getFields()&#xff1a;返回此 Class 对象所表示的类或接口的公有的 Field 。 public Field[] getDeclaredFields()&#xff1a;返回此 Class 对象所表示的类或接口的全部的 Field 。 Field 方法中&#xff…

四、hdfs文件系统基础操作-保姆级教程

1、启动Hadoop集群 想要使用hdfs文件系统&#xff0c;就先要启动Hadoop集群。 启动集群: start-dfs.sh 关闭集群: stop-dfs.sh 2、文件系统构成 &#xff08;1&#xff09;基础介绍 其实hdfs作为分布式存储的文件系统&#xff0c;其构成和Linux文件系统构成差不多一…

MySql的C语言API

创建数据库&#xff08;开辟堆空间资源&#xff09; 连接数据库 查询数据库 获取查询结果&#xff0c;获取一行信息 mysql_use_result这个函数并不会真正获取数据&#xff0c;只有当使用mysql_fetch_row才真正获取 数据 mysql_store_result会直接把所有查询结果存储下来 释…

技术阅读周刊第第6️⃣期

技术阅读周刊&#xff0c;每周更新。 历史更新 20231013&#xff1a;第一期20231022&#xff1a;第二期20231027&#xff1a;第三期20231103&#xff1a;第四期20231007&#xff1a;第五期 5 Skills the Best Engineers I Know Have in Common URL: https://www.developing.dev…

freeswitch的一个性能问题

概述 freeswitch是一款简单好用的VOIP开源软交换平台。 在fs的使用过程中&#xff0c;会遇到各种各样的问题&#xff0c;各种问题中&#xff0c;性能问题是最头疼的。 最近在测试某些场景的时候&#xff0c;压测会造成fs的内存占用持续升高&#xff0c;并在达到某个临界点的…

通信原理板块——奇偶监督码、方阵码、恒比码、正反码

微信公众号上线&#xff0c;搜索公众号小灰灰的FPGA,关注可获取相关源码&#xff0c;定期更新有关FPGA的项目以及开源项目源码&#xff0c;包括但不限于各类检测芯片驱动、低速接口驱动、高速接口驱动、数据信号处理、图像处理以及AXI总线等 1、奇偶监督码(parity check) 奇偶…

springboot jar包 无法读取静态资源文件

springboot jar包 无法读取静态资源文件 参考 springboot项目读取resources目录下的文件的9种方式 Resource resource resourceLoader.getResource("classpath:static/jkbw/jkbw4.txt");try{InputStream inputStream resource.getInputStream();BufferedReader r…

【广州华锐互动VRAR】VR元宇宙技术在气象卫星知识科普中的应用

随着科技的不断发展&#xff0c;虚拟现实&#xff08;VR&#xff09;和元宇宙等技术正逐渐走进我们的生活。这些技术为我们提供了一个全新的互动平台&#xff0c;使我们能够以更加直观和生动的方式了解和学习各种知识。在气象天文领域&#xff0c;VR元宇宙技术的应用也日益显现…

​​​​​​​实验二 运算符和内置函数使用(Python程序设计实验报告)

实验二 运算符和内置函数使用 实验环境 Python集成开发环境IDLE/Anaconda 实验目的 1&#xff0e;熟练掌握常用运算符的使用。 2. 熟练掌握常用内置函数的使用。 三、实验内容 1. 输入三角形的3个边长a、b、c&#xff0c;求三角形的面积area。利用如下海伦公式求三角形的…

毅速丨金属3D打印将为模具制造企业带来变革

金属3D打印技术的发展给模具制造带来了巨大的创新价值&#xff0c;包括重塑产品、重组制造、重构业务。 首先&#xff0c;3D打印技术可以大幅度缩短模具制造的生产周期&#xff0c;提高生产效率。传统的模具制造需要经过多个工序和加工过程&#xff0c;而3D打印技术通过打印完成…

CVE-2021-42287CVE-2021-42278 域内提权

倘见玉皇先跪奏&#xff1a;他生永不落红尘 本文首发于先知社区&#xff0c;原创作者即是本人 前言 网络安全技术学习&#xff0c;承认⾃⼰的弱点不是丑事。只有对原理了然于⼼&#xff0c;才能突破更多的限制。拥有快速学习能力的白帽子&#xff0c;是不能有短板的&#xf…

jQuery UI简单的讲解

我们先进入一下问答时间&#xff0c;你都知道多少呢&#xff1f; &#xff08;1&#xff09;什么是jQuery UI 呢&#xff1f; 解答&#xff1a;jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们…

【广州华锐互动】消防安全宣传知识3D交互展示提升公众学习沉浸感

随着科技的快速发展&#xff0c;我们的生活与工作环境愈发复杂&#xff0c;火灾风险也随之提高。为了提高公众的消防灭火能力&#xff0c;普及消防安全知识&#xff0c;广州华锐互动开发了消防安全宣传知识3D交互展示系统。 这是一种全新的教育方式&#xff0c;它利用3D技术&am…