kaptcha 驗證碼【自用】

1、引入jar包

<!-- 驗證碼 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

<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>
red</param-value>
      </init-param>
   
   <!--(樣式)使用那些字符生成驗證碼 -->
      <init-param>
          <param-name>
kaptcha.textproducer.char.string</param-name>
          <param-value>
QWERTYUIOPLKJHGFDSAMNBVCXZ123456789</param-value>
      </init-param>
 
    <!--(樣式)圖片寬度 -->
      <init-param>
          <param-name>
kaptcha.image.width</param-name>
          <param-value>
135</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>
43</param-value>
      </init-param>
    
 <!--(樣式)干擾線的顏色 -->
      <init-param>
          <param-name>
kaptcha.noise.color</param-name>
          <param-value>
black</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、頁面標籤定義

 <!-- 驗證碼 避免重複提交 (kaptcha控件)-->
        <li>
          <div
class="item-content">
            <div
class="item-inner">
              <div
class="item-title label">驗證碼:</div>
               <input
type="text" id="j_kaptcha" placeholder="驗證碼">
              <div
class="item-input">
                <img
type="text" id="kaptchaImg" alt="點擊更換" title="點擊更換" onclick="changeVerifyCode(this)" src="../Kaptcha">
             
  <!-- src="../Kaptcha" src指定web中配置的名字 即:Kaptcha -->
              </div>
            </div>
          </div>
        </li>

4、JS方法 (更換驗證碼)

function changeVerifyCode(img){
    img.src=
'../Kaptcha?'+Math.floor(Math.random() * 100);
}

5、後臺驗證

public static boolean CheckVerifyCode(HttpServletRequest request){
        String verifyCodeExpected=(String) request.getSession().getAttribute(Constants.KAPTCHA_SESSION_KEY);
        String code=HttpServletRequestUtil.getString(request, "code");
        if(code == null || !code.equals(verifyCodeExpected) ){
            return false;
        }
        return true;
        
    }

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