• 头歌实验Java生成验证码

    第一关，使用Servlet生成验证码

    任务描述

    本关任务：使用servlet生成验证码。

    相关知识
    验证码在我们登陆、注册网站，火车票买票的时候经常会见到的，为什么要有验证码呢？可能很多人都会有这个疑问。

    但是作为开发者，可能我们更多的就会关注怎么生成验证码了。

    要了解如何生成验证码，我们首先要知道什么是验证码，网站为什么需要它。

    为什么要有验证码，什么是验证码
    我们经常需要在网站或者应用程序中填写验证码，不过作为用户而言其实我们一点都不喜欢验证码，因为有时候老容易填错。

    为什么这个影响用户体验的东西还是一直存在呢？

    肯定是有道理的。

    一个网站除了我们人操作电脑可以登录之外，使用JavaScript代码和一些脚本语言也是可以登录的，但是我们开发网站是给人用的而不是给机器使用的，我们想象一个网站如果没有验证码，我们只需要编写一段脚本就可以无限次数的登陆某个网站，这样无数次的尝试就可以暴力破解用户的密码，如果是注册行为那就会给网站制造很多垃圾信息，这个就会对该网站造成极大的资源浪费，严重的可能会让这个网站崩溃，所以就有了验证码。

    说白了，验证码就是用来判断是人在操作还是机器在操作。

    如何使用Servlet生成验证码
    在Java中我们可以在Web项目中使用Servlet来生成验证码，流程是：前端请求验证码servlet对应的地址，后端servlet收到请求，生成一串字符作为验证码，存入到Session中，最后将验证码作为一张图片返回给前端。前端填写了验证码提交到服务器来验证。

    我们看一个示例，你也可以根据这个示例在右侧编辑器中一步一步实现验证码的功能。

    项目和servlet已经创建好了，我们首先在web.xml文件中注册servlet。

    题解

    如下：也是通关代码，不用改直接照抄就行

    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    // 使用验证码的步骤
    // 定义图片的宽高
    int height = 20;
    int width = 60;
    BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
    // 绘图工具
    Graphics graphics = image.getGraphics();
    // 绘制矩形
    graphics.setColor(getRandColor());
    // 绘制矩形背景 前两个参数 是 x y的坐标
    graphics.fillRect(0, 0, width, height);
    // 设置文字的颜色 为白色
    graphics.setColor(Color.WHITE);
    String yzm = "";
    // 生成四个随机数字并且画在图片上
    for (int i = 1; i <= 4; i++) {
        // 生成随机数字并且显示到页面上
        int number = new Random().nextInt(10);
        yzm += number;
        graphics.drawString(number + "", 10 * i, 10);
    }
    // 将验证码放入Httpsession中
    HttpSession session = req.getSession();
    session.setAttribute("sessionYzm", yzm);
    // 将验证码图片输出到客户端
    ImageIO.write(image, "jpg", resp.getOutputStream());
}
// 获取随机颜色
private Color getRandColor() {
    int red = new Random().nextInt(255);
    int green = new Random().nextInt(255);
    int blue = new Random().nextInt(255);
    return new Color(red, green, blue);
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35

    第二关，用户登录时校验验证码是否正确

    任务描述

    本关任务：编写程序验证验证码是否正确。

    相关知识
    上一关我们已经学习如何生成验证码了，为了完成一整套的验证码使用流程我们还需要知道如何验证用户提交的验证码是否正确。

    登录功能
    我们经常在登录注册的时候填写验证码，本关我们就来实现登录功能。

    首先我们来理解验证码校验的基本流程：

    上图展示了一个用户填写验证码的基本流程，用户打开网页显示服务端生成的验证码，点击“看不清楚”标签可以重新生成，这个时候会从新请求服务端数据，服务端用Session来保存验证码信息。

    当用户点击确认按钮的时候，我们就需要对用户通过表单提交的验证码进行校验了，这个时候服务端获取Session保存的验证码信息和用户提交的验证码数据进行校验如果两者一致则校验通过。

    这就是一个完整的验证码流程了。

    我们可以将验证码的流程总结为：前端表单登陆 => 后端获取到验证码校验 => 前端收到后端的响应。

    借下来我们来实现这个过程。

    在login.jsp中写就行，照抄不用改。login.jsp在右上角文件夹的目录中找，示例图如下：
    在这里插入图片描述

    题解

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录title>
head>
<body>
    <form action="loginServlet">
        用户名：
        <input type="text" name="username">
        <br>
        密 码：
        <input type="text" name="password">
        <br>
        验证码：
        <input type="text" name="verifycode" id="yzm">
        
        <a href="javascript:reload()"><img id="yzmImg" src="code"/> a>
        <br>
        <input type="submit" value="提交">
    form>
body>
<script type="text/javascript">
    //重新加载验证码
    function reload() {
        var img = document.getElementById("yzmImg");
        img.src = "code?" + new Date().getTime();
    }
script>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    后端校验

    前端页面写好之后我们就可以验证在后端编写代码来验证，表单传递过来的参数是否正确了。

    步骤如下：

    接收用户传递的参数：username，password，verifycode；
    判断验证码是否正确；
    如果验证码正确则判断用户名和密码是否正确。否则提示客户端验证码错误；
    用户名密码正确，回传给客户端“登录成功”。

    编程要求

    好了，该你啦，使用本关所学内容，完成登录的校验，具体要求如下：

    首先实现验证码校验的功能，当验证码填写错误的时候，给前端返回数据“验证码错误”；

    当用户名为admin，密码为admin123时可以登录成功，返回“登录成功”，其他情况返回“登录失败”；

    前端页面已经编写完成，你需要编写的是后端代码。
    校验验证码的核心代码如下：（微改）
    在这里插入图片描述

    题解(LoginServelt.java)

    给了代码也不能抄系列思路就是记得从login.jsp的表单中得到值，并且返回的是登录成功而不是验证成功
    在这里插入图片描述

    第三关，使用Kaptcha组件生成验证码

    题解 captchacode.jsp

    照抄就行

    <script type="text/javascript">
    function reloadCode() {
        var date = new Date().getTime();
        document.getElementById("code").src = "<%=request.getContextPath() %>/imageKaptcha?d="+date;
    }
script>
<form action="checkCaptcha.jsp" method = "post">
     <img alt="验证码" src="imageKaptcha" id = "code"><a href = "javascript:reloadCode();">看不清a>
     <input type = "text" name = "captcha">
     <input type = "submit" value = "submit">
form>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    CheckCaptchaServlet.java(微改)

    思路：首先得获取会话session，然后还得定义输出函数out.就这两。
    在这里插入图片描述

  • 相关阅读:
    linux脚本笔记
    RabbitMQ的高可用方案
    安卓手机APP开发__媒体开发部分__播放器的接口
    【深入浅出Spring6】第四期——实例化Bean和Bean的生命周期
    Debezium系列之：修改源码支持drop foreign key if exists fk
    Java核心技术面试题(附答案)，纯手码，赶紧带走冲刺10月秋招
    ONNX Runtime入门示例：在C#中使用ResNet50v2进行图像识别
    MySQL 教程：MySQL IN 语句（高级）
    Python的命令行参数实例详解
    干货！手把手教你穿透内网
  • 原文地址：https://blog.csdn.net/qq_51580852/article/details/127854463