Realize the verification code function based on the kaptcha plug-in (super simple, super easy to use)

Table of contents

Import kaptcha dependencies into the project

Use the plugin to complete the registration function

Import kaptcha dependencies into the project

Maven project form: import Kaptcha dependencies

<dependency>
<groupId>com.github.penggle</groupId>
<artifactId>kaptcha</artifactId>
<version>2.3.2</version>
</dependency>

Ordinary jar form:

Configure related configurations in web.xml (KaptchaServlet is essentially a Servlset)

    <servlet> 
        <servlet-name>KaptchaServlet</servlet-name> 
        <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class> 
<!-- Set verification code size --> 
<! -- <init-param>--> 
<!-- <param-name>kaptcha.textproducer.font.size</param-name>--> 
<!-- <param-value>28</param-value >--> 
<!-- </init-param>--> 
<!-- Set verification code without interference line --> 
        <init-param> 
            <param-name>kaptcha.noise.impl</param-name > 
            <param-value>com.google.code.kaptcha.impl.NoNoise</param-value> 
        </init-param> 
    </servlet> 
    <servlet-mapping> 
        <servlet-name>KaptchaServlet</servlet-name>
<!-- /kaptcha This represents the path of your front-end access, it will respond to the verification code in the form of a picture when it accesses this path --> 
        <url-pattern>/kaptcha</url-pattern> 
    </servlet-mapping>

Use the plugin to complete the registration function

Write front-end code
Get the verification code image
Compare and verify the verification code written by the front-end user with the back-end verification code

Write a front-end registration interface (below the code):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="http://localhost:8080/ssm_book/kaptcha" method="post"style="border: 1px solid cornflowerblue;width: 500px">
    <div class="form-item">
        <div>
            <label>用户名称:</label>
            <input type="text" placeholder="请输入用户名" id="username" name="uname" >

        </div>
    </div>
    <div class="form-item">
        <div>
    </div>
        </div>
            <input type="password" placeholder="Please enter password" name="pwd" id="pwdTxt">
            <label>User password:</label>
    <div class="form-item"> 
        <div> 
            <label>Confirm Password:</label> 
            <input type="password" placeholder="Please enter Confirm Password" id="pwdTxt2"> 
        </div> 
    </ div> 
    <div class="form-item"> 
        <div> 
            <label>User email:</label> 
            <input type="text" placeholder="Please enter email" name="email" id="emailTxt"> 
        </div> 
    </div> 
    <div class="form-item"> 
        <div> 

            <div class="verify"> 
                Verification code: <input type="text" placeholder="Please enter the verification code" name="code"> text" placeholder="Please enter 
                the verification code" name="code"> <img src="http://localhost:8080/ssm_book/kaptcha" alt="" style="width: 90px ;height: 35px" id= "vetifyImg">
            </div> 
        </div> 
    </div> 
    <button class="btn">Registration</button>
</form>

</body>
</html>

Effect picture: At this point, the generated verification code can be obtained

The next step is to receive the verification code stored in the session domain by the kaptcha class on the backend server

Explanation: When the kaptcha plugin generates the verification code picture, it will also save the verification code information to the session domain.

Validate on the backend:
After comparison, the verification codes are the same. The client sees the same as the kaptcha stored in the session domain

In this way, the verification code function is realized! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !

Finally: If you do not understand, please leave a message, I can answer, and if you want the jar of kaptcha, you can get it on my homepage.

Introduction to kaptcha attributes

kaptcha.producer.impl image implementation class com.google.code.kaptcha.impl.DefaultKaptcha
kaptcha.textproducer.impl text implementation class com.google.code.kaptcha.text.impl.DefaultTextCreator
kaptcha.textproducer.char.string text collection, Captcha value is obtained from this collection abcde2345678gfynmnpwx
kaptcha.textproducer.char.length captcha length 5
kaptcha.textproducer.font.names font Arial, Courier
kaptcha.textproducer.font.size font size 40px.
kaptcha.textproducer.font.color font color , legal values: r, g, b or white, black, blue. black
kaptcha.textproducer.char.space text space 2
kaptcha.noise.impl interference implementation class com.google.code.kaptcha.impl.DefaultNoise
kaptcha.noise. color Interference color, legal value: r, g, b or white, black, blue. black
kaptcha.obscurificator.impl Image style:
waterripple com.google.code.kaptcha.impl.WaterRipple
fisheye com.google.code.kaptcha.impl.FishEyeGimpy
shadow com.google.code.kaptcha.impl.ShadowGimpy com.google.code.kaptcha.impl.WaterRipple
kaptcha .background.impl background implementation class com.google.code.kaptcha.impl.DefaultBackground
kaptcha.background.clear.from background color gradient, start color light gray
kaptcha.background.clear.to background color gradient, end color white
kaptcha.word .impl text renderer com.google.code.kaptcha.text.impl.DefaultWordRenderer
kaptcha.session.key session key KAPTCHA_SESSION_KEY
kaptcha.session.da`te sessi`on date KAPTCHA_SESSION_DATE
Original link: https://blog.csdn.net /qq_42308456/article/details/109766092