简单验证码的实现

最新推荐文章于 2023-04-10 19:27:54 发布

Mr.樂意

最新推荐文章于 2023-04-10 19:27:54 发布

阅读量201

点赞数

分类专栏：笔记文章标签： js html5 java jquery

本文链接：https://blog.csdn.net/weixin_45826188/article/details/116999989

版权

笔记专栏收录该内容

32 篇文章 3 订阅

订阅专栏

验证码

一、验证码的实现

为什么需要使用验证码？

因为使用了简单的验证码功能相对来说用户的账号会比较安全，防止别人暴力破解用户的密码，然后实现登录操作，但是这种简单的验证码也不是一定安全的，现在的技术还是可以破解的。除非是那种非常复杂的验证码才是绝对的安全的，比如识别图片中的人物等验证码。

导入hutool工具类的依赖

<!--添加hutool工具类-->
<dependency>
    <groupId>cn.hutool</groupId>
    <artifactId>hutool-all</artifactId>
    <version>5.5.8</version>
</dependency>

hutool工具类生成验证码的controller层：

在前端直接调用这个接口就可以获取到验证码、然后将生成的这个验证码返回到前端页面和保存到session中，在后续用户输入登录的时候，与用户输入的验证码进行对比。

package com.simon.controller;

import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.ShearCaptcha;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Controller
@RequestMapping("/generate_code")
public class GenerateCodeController {

    /*
     * 使用hutool工具类生成图片验证码
     * */
    @RequestMapping("/randomCode")
    public void randomCodeImage(HttpServletRequest request, HttpServletResponse response) throws IOException {
        //定义图形验证码的长、宽、验证码字符数、干扰线宽度
        ShearCaptcha captcha = CaptchaUtil.createShearCaptcha(130, 45, 4, 4);
        //图形验证码写出，可以写出到文件，也可以写出到流
        //captcha.write("d:/shear.png");
        //写出到浏览器，直接写出到流，字节流
        captcha.write(response.getOutputStream());
        //获取验证码
        String code = captcha.getCode();
        System.out.println("验证码是:" + code);
        //将生成的验证码保存到session中
        request.getSession().setAttribute("code", code);
        //验证图形验证码的有效性，返回boolean值
        captcha.verify("1234");
    }

}

前端页面的实现：简单的登录页面！

<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<html>
    <head>
        <title>登录</title>
        <link rel="stylesheet" href="${resources}/css/font.css">
        <link rel="stylesheet" href="${resources}/css/login.css">
        <link rel="stylesheet" href="${resources}/css/xadmin.css">
        <script type="text/javascript" src="${resources}/jquery-2.1.1/jquery.min.js"></script>
        <link rel="stylesheet" href="${resources}/layer-v3.3.0/layer/mobile/need/layer.css"/>
        <link rel="stylesheet" href="${resources}/layDate-v5.2.0/laydate/theme/default/laydate.css"/>
        <script src="${resources}/layDate-v5.2.0/laydate/laydate.js"></script>
        <script src="${resources}/layer-v3.3.0/layer/layer.js"></script>
        <link rel="stylesheet" href="${resources}/layui-v2.6.4/layui/css/layui.css"/>
        <script src="${resources}/layui-v2.6.4/layui/layui.js"></script>
        <script type="text/javascript" src="${resources}/js/xadmin.js"></script>
    </head>
    <body class="login-bg">
        <div class="login layui-anim layui-anim-up">
            <div class="message">管理员后台登录</div>
            <div id="darkbannerwrap"></div>

            <form class="layui-form">
                <input name="aname" id="aname" placeholder="用户名" type="text" lay-verify="required" class="layui-input">
                <hr class="hr15">
                <input name="apass" id="apass" lay-verify="required" placeholder="密码" type="password" class="layui-input">
                <br/>
                <div class="layui-input-inline">
                    <input  name="randomCode" id="randomCode" lay-verify="required" placeholder="验证码"
                           type="text" class="layui-input-inline">
                    <img src="${root}/generate_code/randomCode" id="codeImg" οnclick="refresh()" alt="">
                </div>
                <hr class="hr15">
                <div style="margin: 3px 5px">
                    <a href="#" οnclick="xadmin.open('找回密码','${root}/admin/goRetrievePassword',600,400)">找回密码</a>
                </div>
                <hr class="hr15">
                <input value="登录" id="login" lay-submit lay-filter="login" style="width:100%;" type="button"/>
                <hr class="hr20">
            </form>
        </div>

        <script>
            /* 刷新验证码 */
            function refresh() {
                document.getElementById("codeImg").src = "${root}/generate_code/randomCode?time=" + new Date().getTime();
            }

            $(function () {
                //点击登录按钮
                $("#login").click(function () {
                    //获取表单中的数据
                    let aname = $("#aname").val();
                    let apass = $("#apass").val();
                    let randomCode = $("#randomCode").val();
                    $.ajax({
                        url: '${root}/admin/login',
                        data: {'aName': aname, 'aPass': apass,'randomCode':randomCode},
                        dataType: 'json',
                        type: 'post',
                        success: function (data) {
                            if (data.info === '验证码不正确！'){
                                $("#randomCode").val("");
                                layer.msg(data.info, {icon: 5});
                                refresh();
                                return;
                            }
                            if (data.info === "账号密码正确！") {
                                layer.msg(data.info, {icon: 6});
                                //跳转到主页
                                setTimeout("location.href='${root}/product/goIndex'", 1000);
                            } else {
                                $("#aname").val("");
                                $("#apass").val("");
                                $("#randomCode").val("");
                                layer.msg(data.info, {icon: 5});
                                refresh();
                            }
                        }
                    })
                });
            })
        </script>
    </body>
</html>

Mr.樂意

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单验证码的实现

验证码一、验证码的实现为什么需要使用验证码？因为使用了简单的验证码功能相对来说用户的账号会比较安全，防止别人暴力破解用户的密码，然后实现登录操作，但是这种简单的验证码也不是一定安全的，现在的技术还是可以破解的。除非是那种非常复杂的验证码才是绝对的安全的，比如识别图片中的人物等验证码。导入hutool工具类的依赖<dependency> <groupId>cn.hutool</groupId>
复制链接

扫一扫