当前位置: 移动技术网 > IT编程>开发语言>Java > Google Kaptcha 框架实现登录验证码功能(SSM 和 SpringBoot)

Google Kaptcha 框架实现登录验证码功能(SSM 和 SpringBoot)

2019年07月19日  | 移动技术网IT编程  | 我要评论

黑客技术吧,7k7k造梦西游,迁跃兽汉堡图纸

一、效果图:

二、导入 jar 包

1.由于这是大神写好封装起来的一个框架,所有我们使用前得先下载相关的 jar 包

第一种:maven

<!-- 验证码 -->
<!-- https://mvnrepository.com/artifact/com.github.penggle/kaptcha -->
<dependency>
    <groupid>com.github.penggle</groupid>
    <artifactid>kaptcha</artifactid>
    <version>2.3.2</version>
</dependency>

第二种:lib

打开链接:

三、ssm 通过 kaptcha 简单实现验证码

直接在 web.xml 里面直接配置

验证码的一些样式都是通过配置来实现的,下面是我自己使用的一个demo,如果需要更改字体颜色还有字体大小什么的等,可以自己根据注释来修改。不然直接复制粘贴也行。由于配置比较简单,不作过多解释,直接上代码。

<!-- 验证码相关属性的配置 -->
<servlet>
 <servlet-name>kaptcha</servlet-name>
 <servlet-class>com.google.code.kaptcha.servlet.kaptchaservlet</servlet-class>
 <!-- 定义 kaptcha 的样式 -->
 <!-- 是否有边框 -->
 <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.image.height</param-name>
  <param-value>50</param-value>
 </init-param>
 <!-- 使用哪些字符生成验证码 -->
 <init-param>
  <param-name>kaptcha.textproducer.char.string</param-name>
  <param-value>acdefhkprstwx345975</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.前端验证码的显示实现

div class="item-inner">
 <div class="item-title label">验证码</div>
 <input type="text" id="j_captcha" placeholder="验证码">
 <div class="item-input">
  <img id="captcha_img" alt="点击更换" title="点击更换"
    onclick="changeverifycode(this)" src="../kaptcha"/>
 </div>
</div>
function changeverifycode(img){
	img.src="../kaptcha?" + math.floor(math.random()*100);
}

解释:

验证码图片的链接 src 中的 "../kaptcha",这里的“kaptcha”是要与刚刚 web.xml 中的 url-pattern 配置的值一样的,并非随便写的。

4.后端进行验证码的输入验证

实现思路:我是把验证码的验证单独写成一个静态类,然后在控制层里面直接调用就行。

验证码静态类:

public class codeutil {
 public static boolean checkverifycode(httpservletrequest request){
  string verifycodeexpected = (string)request.getsession().getattribute(
    com.google.code.kaptcha.constants.kaptcha_session_key);
  //这里相当于 request.getparameter("verifycodeactual");
  string verifycodeactual = httpservletrequestutil.getstring(request, "verifycodeactual");
  if(verifycodeactual == null || verifycodeactual.equals(verifycodeexpected)){
   return false;
  }
  return true;
 }}

控制层调用代码:

if(!codeutil.checkverifycode(request)){
	modelmap.put("success", false);
	modelmap.put("errmsg", "输入了错误的验证码");
	return modelmap;
}
	modelmap.put("success", false);
	modelmap.put("errmsg", "输入了错误的验证码");
	return modelmap;
}

if 里面验证码不通过(错误)的时候,我自己做的一些处理,可以根据自己的实际情况进行修改。

ssm 环境下 kaptcha 的使用就介绍完了。

四、springboot 通过 kaptcha 简单实现验证码

思路:将 xml 的形势转化成代码实现。

package com.example.demo.config;
import com.google.code.kaptcha.impl.defaultkaptcha;
import com.google.code.kaptcha.util.config;
import org.springframework.context.annotation.bean;
import org.springframework.context.annotation.configuration;
import java.util.properties;
@configuration
public class kaptchacontroller {
 @bean(name="captchaproducer")
 public defaultkaptcha getkaptchabean(){
  defaultkaptcha defaultkaptcha=new defaultkaptcha();
  properties properties=new properties();
  properties.setproperty("kaptcha.border", "yes");
  properties.setproperty("kaptcha.border.color", "105,179,90");
  properties.setproperty("kaptcha.textproducer.font.color", "blue");
  properties.setproperty("kaptcha.image.width", "125");
  properties.setproperty("kaptcha.image.height", "45");
  properties.setproperty("kaptcha.session.key", "code");
  properties.setproperty("kaptcha.textproducer.char.length", "4");
  properties.setproperty("kaptcha.textproducer.font.names", "宋体,楷体,微软雅黑");
  config config=new config(properties);
  defaultkaptcha.setconfig(config);
  return defaultkaptcha;
 }
}

编写一个 controller 类。

package com.example.demo.controller;
import com.google.code.kaptcha.constants;
import com.google.code.kaptcha.producer;
import org.springframework.beans.factory.annotation.autowired;
import org.springframework.stereotype.controller;
import org.springframework.web.bind.annotation.getmapping;
import javax.imageio.imageio;
import javax.servlet.servletoutputstream;
import javax.servlet.http.httpservletresponse;
import javax.servlet.http.httpsession;
import java.awt.image.bufferedimage;
@controller
public class chacontroller {
 @autowired
 private producer captchaproducer;
 @getmapping("/getkaptchaimage")
 public void getkaptchaimage(httpservletresponse response,httpsession session) throws exception {
  response.setdateheader("expires", 0);
  // set standard http/1.1 no-cache headers.
  response.setheader("cache-control", "no-store, no-cache, must-revalidate");
  // set ie extended http/1.1 no-cache headers (use addheader).
  response.addheader("cache-control", "post-check=0, pre-check=0");
  // set standard http/1.0 no-cache header.
  response.setheader("pragma", "no-cache");
  // return a jpeg
  response.setcontenttype("image/jpeg");
  // create the text for the image
  string captext = captchaproducer.createtext();
  // store the text in the session
  //request.getsession().setattribute(constants.kaptcha_session_key, captext);
  //将验证码存到session
  session.setattribute(constants.kaptcha_session_key, captext);
  // create the image with the text
  bufferedimage bi = captchaproducer.createimage(captext);
  servletoutputstream out = response.getoutputstream();
  // write the data out
  imageio.write(bi, "jpg", out);
  try {
   out.flush();
  } finally {
   out.close();
  }
 }
}

前端代码:

<img id="captcha_img" alt="点击更换" title="点击更换"
    onclick="changeverifycode(this)" src="../getkaptchaimage"/>

至于点击切换验证码还有后台如何接受验证,跟前面 ssm 的使用方法一样,这里就不再赘述。

我们可以直接启动 springboot 的项目,在浏览器上直接访问获取验证码的接口。

http://localhost:8080/getkaptchaimage

就能在浏览器上看到验证码的图片了,说明配置是成功的。

五、kaptcha 属性表

总结

以上所述是小编给大家介绍的google kaptcha 框架实现登录验证码功能(ssm 和 springboot),希望对大家有所帮助

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
移动技术网