实现开源的验证码登录

1.如何生成验证码第一种方式：自己实现第二种方式：别人实现能自己实现就自己实现，对于非常简单的功能来说，但绝大多业务通用的功能，别人已经实现好了，所以这里我们就使用开源的类库来实现验证码登录能用开源的项目就是使用开源的项目，不过在上线之前需要经过大量的测试。EasyCaptcha的地址：https://gitee.com/whvse/EasyCaptchamaven方式引入<dependen

名字真的很急用

675人浏览 · 2021-10-05 01:22:08

名字真的很急用 · 2021-10-05 01:22:08 发布

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/>
    密&nbsp;&nbsp;码：<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/>
    密&nbsp;&nbsp;码：<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>