登陆页面添加验证码
想做一个登陆页面,但想要更加的贴近于真实的场景就得加上验证码。加上验证码的好处是可以有效防止恶意登录注册,验证码每次都不同,这就可以排除,用软件自动申请用户或者自动登陆,有效防止这种问题。
这里我们的验证码使用了
simplecaptcha
这个开源的组件
jar包下载
基本使用
simplecaptcha
提供了四种形式的验证码。
StickyCaptchaServlet
:SimpleCaptchaServlet
:ChineseCaptchaServlet
:这个验证码还没测试 ^_^`
AudioCaptchaServlet
:可以为视障用户提供音频验证码
这里我用的是SimpleCaptchaServlet
。StickyCaptchaServlet
在页面刷新的时候,他不会刷新验证码,而且我加的js(点击验证码刷新也对SimpleCaptchaServlet
不生效)
配置Servlet
根据上面提到的,根据自己的需要的验证码来配置相应的Servlet。
我们这里以
SimpleCaptchaServlet
为例:
<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>
// 在你的html页面引入img标签,src地址是你Servlet中配的地址
<img src="simpleImg" title="看不清,换一张" id="securityCode"/>
// 这里用的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只需要有一个就行,当然前提是你得懂点
前端
的基础。
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);
}
}
演示
最后这里贴出我的效果图。
这里的前端页面来自Etui۹(・༥・´)و ̑̑
当然simplecaptcha
的功能还不止这么简单。除此之外它还支持自定义验证码,详细的内容请移步simplecaptcha官网
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Lunatic!
评论