实现开源的验证码登录
Posted 名字真的很急用
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实现开源的验证码登录相关的知识，希望对你有一定的参考价值。
1.如何生成验证码
第一种方式：自己实现
第二种方式：别人实现
能自己实现就自己实现，对于非常简单的功能来说，
但绝大多业务通用的功能，别人已经实现好了，
所以这里我们就使用开源的类库来实现验证码登录
能用开源的项目就是使用开源的项目，不过在上线之前需要经过大量的测试。
EasyCaptcha的地址：
https://gitee.com/whvse/EasyCaptcha
maven方式引入
<dependencies>
<dependency>
<groupId>com.github.whvcse</groupId>
<artifactId>easy-captcha</artifactId>
<version>1.6.2</version>
</dependency>
</dependencies>
前端html代码：
<img src="/captcha" width="130px" height="48px" />
在servlet中使用
web.xml中配置servlet：
<web-app>
<!-- 图形验证码servlet -->
<servlet>
<servlet-name>CaptchaServlet</servlet-name>
<servlet-class>com.wf.captcha.servlet.CaptchaServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>CaptchaServlet</servlet-name>
<url-pattern>/captcha</url-pattern>
</servlet-mapping>
</web-app>
例如前端的页面：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>验证码</title>
</head>
<body>
<form action="/login" method="post" >
用户名: <input name="username" type="text" /><br/>
密 码：<input name="password" type="password" /><br/>
验证码：<input type="text" name="captcha">
<img src="/captcha" width="130px" height="48px" /><br>
<input type="submit" value="提交" />
</form>
</body>
</html>
后端的servlet验证登录：
package 验证码;
import session实现用户登录.User;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
public void doGet(HttpServletRequest request,HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
String username = request.getParameter("username");
String password = request.getParameter("password");
//获取请求验证码的参数
String checkCode = request.getParameter("captcha");
//获取生成的验证码
//session的应用场景，将servlet生成的验证码存储到session中。
String savedCode = (String) request.getSession().getAttribute(
"captcha");
PrintWriter pw = response.getWriter();
//检验验证码是否正确，验证码不区分大小写
if(savedCode.equalsIgnoreCase(checkCode){
if(username!=null&&username!=""&&password!=null&&password!=""){
User user = new User();
user.setName(username);
user.setPassword(password);
boolean login =userService.login(user);
if(login){
pw.write("登录成功")
}
else{
pw.write("登录失败")
}
}
else{
pw.write("登录失败")
}
}
}
public void doPost(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
验证码的图片切换
需求是当我们点击验证码图片时，验证码会自动的更换图片
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>验证码</title>
</head>
<body>
<form action="/login" method="post" >
用户名: <input name="username" type="text" /><br/>
密 码：<input name="password" type="password" /><br/>
验证码：<input type="text" name="captcha">
<img src="/captcha" width="130px" height="48px" id="captcha" onClick="changeCaptche()"/><br>
<input type="submit" value="提交" />
</form>
<script>
//用户点击图片实现切换图片
function changeCaptche(){
console.log("点击图片了")
var imgElement = document.getElementById("captcha");
//因为当访问路径没有改变的时候，服务器会认为我们发送的是同一个请求，所以服务器会返回一个状态码304，所以服务器会从缓存中读取数据
//如果每次访问的URL有变化了，就不会从缓存中读取数据，因此可以在请求的地址后面加一个动态参数，例如时间日期。
imgElement.setAttribute("src","/captcha?date="+new Date())
}
</script>
</body>
</html>
以上是关于实现开源的验证码登录的主要内容，如果未能解决你的问题，请参考以下文章