温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

使用kaptcha怎么实现一个验证码功能

发布时间:2021-05-17 17:28:15 来源:亿速云 阅读:240 作者:Leah 栏目:编程语言

这期内容当中小编将会给大家带来有关使用kaptcha怎么实现一个验证码功能,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

1.首先在pom.xml文件中导入Maven依赖

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

2.在web.xml文件中配置一个servlet

<servlet>
 <!-- 生成图片的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.image.width</param-name>
 <param-value>135</param-value>
 </init-param>
 <!-- 使用哪些字符生成验证码 -->
 <init-param>
 <param-name>kaptcha.textproducer.char.string</param-name>
  <param-value>ACDEFHKPRSTWX345679</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>
 <!-- 映射的url -->
 <servlet-mapping>
 <servlet-name>Kaptcha</servlet-name>
 <url-pattern>/Kaptcha</url-pattern>
 </servlet-mapping>

3.页面代码如下

<div class="item-inner">
 <label for="j_captcha" class="item-title label">验证码</label>
 <input id="j_captcha" name="j_captcha" type="text" 
  class="form-control in" placeholder="验证码" />
 <div class="item-input">
   <img id="captcha_img" alt="点击更换" title="点击更换"
         onclick="changeVerifyCode(this)" src="../Kaptcha" />
 </div>
</div>

向后端提交数据

var verifyCodeActual = $('#j_captcha').val();
 if (!verifyCodeActual) {
  $.toast('请输入验证码!');
  return;
 }
 formData.append("verifyCodeActual", verifyCodeActual);

4.js交互

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

5.后端验证

import javax.servlet.http.HttpServletRequest;

public class CodeUtil {
 public static boolean checkVerifyCode(HttpServletRequest request) {
 String verifyCodeExpected = (String) request.getSession().getAttribute(
  com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
 String verifyCodeActual = HttpServletRequestUtil.getString(request,
  "verifyCodeActual");
 if (verifyCodeActual == null
  || !verifyCodeActual.equalsIgnoreCase(verifyCodeExpected)) {
  return false;
 }
 return true;
 }
}
import javax.servlet.http.HttpServletRequest;

public class HttpServletRequestUtil {
 public static int getInt(HttpServletRequest request, String name) {

 try {
  return Integer.decode(request.getParameter(name));
 } catch (Exception e) {
  return -1;
 }
 }

 public static long getLong(HttpServletRequest request, String name) {

 try {
  return Long.valueOf(request.getParameter(name));
 } catch (Exception e) {
  return -1;
 }
 }

 public static Double getDouble(HttpServletRequest request, String name) {

 try {
  return Double.valueOf(request.getParameter(name));
 } catch (Exception e) {
  return -1d;
 }
 }

 public static Boolean getBoolean(HttpServletRequest request, String name) {

 try {
  return Boolean.valueOf(request.getParameter(name));
 } catch (Exception e) {
  return false;
 }
 }

 public static String getString(HttpServletRequest request, String name) {
 try {
  String result = request.getParameter(name);
  if (result != null) {
  result = result.trim();
  }
  if ("".equals(result))
  result = null;
  return result;
 } catch (Exception e) {
  return null;
 }

 }
}

上述就是小编为大家分享的使用kaptcha怎么实现一个验证码功能了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI