Kaptcha验证码生成指南

Kaptcha 是google以前维护的一个开源的验证码生成工具类库,后来google公司放弃了,现在用的 Kaptcha 版本都是由 GitHub上进行维护的版本了。虽然由GitHub托管了,但是可以看到里面的很多的包结构都是有google的。
虽说现在前端完成的功能越来越全面了,有很多不同类型的机器验证,但是作为一个后端开发还是有必要学一学如何使用Servlet 生成 验证码。

1. 使用Maven 导入需要的jar包依赖

如果项目不是Maven的,那么可以通过这个下载链接下载相应的 jar 包 点此下载 密码:980c

    <!-- https://mvnrepository.com/artifact/com.github.penggle/kaptcha -->
    <dependency>
      <groupId>com.github.penggle</groupId>
      <artifactId>kaptcha</artifactId>
      <version>2.3.2</version>
    </dependency>

2. 配置相应的 web.xml

Kaptcha 的主要配置都是要依赖于 web.xml 进行完成的,要配置相应的验证码显示效果就需要修改相应的配置参数。
可以先直接将下面这一段先拷贝进去,后面会介绍每一个参数的具体含义以及具体的使用方法。

<servlet>
        <servlet-name>Kaptcha</servlet-name>
        <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
        <!-- 是否有边框 -->
        <init-param>
            <param-name>kaptcha.border</param-name>
            <param-value>no</param-value>
        </init-param>
        <!-- 字体颜色 -->
        <init-param>
            <param-name>kaptcha.textproducer.font.color</param-name>
            <param-value>black</param-value>
        </init-param>
        <!-- 图片宽度 -->
        <init-param>
            <param-name>kaptcha.image.width</param-name>
            <param-value>150</param-value>
        </init-param>
        <!-- 使用哪些字符生成验证码 -->
        <init-param>
            <param-name>kaptcha.textproducer.char.string</param-name>
            <param-value>ACDEFHKPRSTWX345678</param-value>
        </init-param>
        <!-- 图片高度 -->
        <init-param>
            <param-name>kaptcha.image.height</param-name>
            <param-value>50</param-value>
        </init-param>
        <!-- 字体大小 -->
        <init-param>
            <param-name>kaptcha.textproducer.font.size</param-name>
            <param-value>35</param-value>
        </init-param>
        <!-- 干扰线的颜色 -->
        <init-param>
            <param-name>kaptcha.noise.color</param-name>
            <param-value>white</param-value>
        </init-param>
        <!-- 字符的个数 -->
        <init-param>
            <param-name>kaptcha.textproducer.char.length</param-name>
            <param-value>4</param-value>
        </init-param>
        <!-- 字体 -->
        <init-param>
            <param-name>kaptcha.textproducer.font.names</param-name>
            <param-value>Arial</param-value>
        </init-param>
    </servlet>

    <servlet-mapping>
        <servlet-name>Kaptcha</servlet-name>
        <url-pattern>/Kaptcha</url-pattern>
    </servlet-mapping>

3. 前端显示代码

后端的业务完成了就要开始前端的显示了。
这里使用了

<html>
<head>
    <%--后面实现点击切换验证码的时候用到了jq --%>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>login</title>
</head>
<body>
<form action="loginServlet" method="post">
    账户:<input type="text" name="usernaem"><br>
    密码:<input type="password" name="password"><br>
    <%--验证码输入框--%>
    <input class="verifyInput" name="verifyInput" placeholder="请输入验证码">
    <%--验证码图片显示标签,验证码将在这里显示,并为图片绑定点击事件,点击切换下一张图片--%>
<%--src="Kaptcha" 表示请求项目的 一个Servlet ---> Kaptcha ,注意这个路径的问题--%>
    <img class="verifyCode" onclick="change()" src="Kaptcha">
    <input type="submit" value="登录">
</form>

<script>
    function change() {
        //带上一个时间戳,表示当前图片的唯一性。
        var src = " Kaptcha?" + new Date().getTime();
        // 将返回的图片路径返回并设置好。
        $('.verifyCode').attr("src", src);
    }
</script>

</body>
</html>

4. 将前端输入的验证码进行校验

前端输入验证码后是需要后端对验证码的一致性进行校验的。这个时候需要 处理表单提交的 Servlet 中进行逻辑判断。

        String verifyInput = req.getParameter("verifyInput");   // 得到前端输入的验证码的值,
        // 使用 Kaptcha 生成验证码后会自动的使用 Session 保存到私有空间里面。此时,可以看API文档,得知Session 的 key值为:om.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY 。可以直接通过这个key 值取得相应的,Session 的 value 值。然后对验证码进行判断。处理逻辑。
        String kaptchaExpected = (String) req.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);

        if (!verifyInput.equalsIgnoreCase(kaptchaExpected)){
            resp.getWriter().println("<h3>验证码错误</h3>");
            return;
        }

5. Kaptcha 使用文档

验证码图片的具体配置需要在 web.xml 中进行配置,示例格式如下:

        <!-- 是否有边框 -->
        <init-param>
            <param-name>kaptcha.border</param-name>
            <param-value>no</param-value>
        </init-param>
kaptcha.border : 是需要配置的类型,
no : 是需要配置的类型的具体的值。


取得Session 的值:

有什么疑问可以私信

日有所思,日有所进。
学而不思则罔,思而不学则殆。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章