登陆页面添加验证码
这里我们的验证码使用了
simplecaptcha
这个开源的组件
jar包下载
基本使用
simplecaptcha
提供了四种形式的验证码。
-
StickyCaptchaServlet
: -
SimpleCaptchaServlet
: -
ChineseCaptchaServlet
:这个验证码还没测试 _ -
``AudioCaptchaServlet`:可以为视障用户提供音频验证码
这里我用的是
SimpleCaptchaServlet
。StickyCaptchaServlet
在页面刷新的时候,他不会刷新验证码,而且我加的js(点击验证码刷新也对SimpleCaptchaServlet
不生效)
配置Servlet
根据上面提到的,根据自己的需要的验证码来配置相应的Servlet。
我们这里以
SimpleCaptchaServlet
为例:
- 配置web.xml
<servlet>
<servlet-name>SimpleCaptchaServlet</servlet-name>
<servlet-class>nl.captcha.servlet.SimpleCaptchaServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>SimpleCaptchaServlet</servlet-name>
<url-pattern>/simpleImg</url-pattern>
</servlet-mapping>
- jsp页面或者html
// 在你的html页面引入img标签,src地址是你Servlet中配的地址
<img src="simpleImg" title="看不清,换一张" id="securityCode"/>
- js刷新代码
// 这里用的jquery
$("#securityCode").click(
function () {
// 刷新验证码,加随机数是为了防止缓存
$(this).attr('src', 'simpleImg?' + Math.floor(Math.random() * 100))
})
// JavaScript代码
var sc = document.getElementById("securityCode");
sc.onclick = function () {
sc.setAttribute("src","simpleImg?" + Math.floor(Math.random() * 100))
}
- 这里给
src
属性设置属性值的时候,加上Math.floor(Math.random() * 100
是为了防止缓存,导致刷新不起作用。- js和jquery只需要有一个就行,当然前提是你得懂点
前端
的基础。
- tab java代码
package com.securityCode;
import com.google.gson.Gson;
import nl.captcha.Captcha;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.io.PrintWriter;
public class CheckSecurityCode extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
/**
* 处理验证码
*/
HttpSession session = req.getSession();
Captcha captcha = (Captcha) session.getAttribute(Captcha.NAME);
String answer = req.getParameter("answer");
resp.setContentType("text/html;charset=utf-8");
if (captcha.isCorrect(answer)) {
Systom.out.println("验证码正确");
}else {
Systom.out.println("验证码错误");
}
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}
}
当然simplecaptcha
的功能还不止这么简单。除此之外它还支持自定义验证码,详细的内容请移步simplecaptcha官网