2. 程式人生 > >使用Servlet實現圖形驗證碼登入頁面

使用Servlet實現圖形驗證碼登入頁面

阿新 • • 發佈：2018-12-22

1.介紹

首先需要寫一個生成圖形驗證碼的Servlet：
我這裡的Servlet為：createImageServlet
然後我們使用登入頁面來驗證是否能獲取圖形驗證碼。
登入後通過Servlet判斷使用者名稱密碼是否為張三和123（這裡簡單操作就不連線資料庫了）
登入頁面：login.jsp
這個頁面就是一個表單
判斷使用者名稱的Servlet：logCheckServlet
如果使用者名稱密碼正確則請求轉發回去登入頁面輸出登入成功
否則請求轉發回去輸出登入失敗
我們還需要做的一件事情就是驗證輸入的驗證碼是否與驗證碼圖片內容匹配。匹配錯則輸出驗證碼不是正確。
最後一個Servlet是當驗證碼看不清楚點選切換圖片的Servlet即重新整理驗證碼Servlet：changeCheckCodeServlet

2.程式碼：

生成圖形驗證碼Servlet：
createImageServlet：

package control;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.IOException;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

/**
 * Servlet implementation class createImageServlet
 */
public class createImageServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("image/jpeg");
        HttpSession session = request.getSession();
        int width = 60;
        int height = 20;
        //設定瀏覽器不要快取此圖片
        response.setHeader("Pragma", "No-cache");
        response.setHeader("Cache-Control", "no-cache");
        response.setDateHeader("Expires", 0);
        //建立記憶體影象並獲得其圖形上下文
        BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
        Graphics g = image.getGraphics();
        //產生隨機驗證碼
        //定義驗證碼的字元表
        String chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        char[] rands = new char[4];
        for(int i = 0;i<4;i++){
            int rand = (int)(Math.random()*36);
            rands[i] = chars.charAt(rand);
        }
        //產生影象，畫背景
        g.setColor(new Color(0xDCDCDC));
        g.fillRect(0, 0, width, height);
        //隨機產生120個干擾點
        for(int i = 0;i<120;i++){
            int x = (int)(Math.random()*width);
            int y = (int)(Math.random()*height);
            int red = (int)(Math.random()*255);
            int green = (int)(Math.random()*255);
            int blue = (int)(Math.random()*255);
            g.setColor(new Color(red,green,blue));
            g.drawOval(x, y, 1, 0);
        }
        g.setColor(Color.BLACK);
        g.setFont(new Font(null,Font.ITALIC|Font.BOLD,18));
        //在不同的高度上輸出驗證碼的不同字元
        g.drawString("" +rands[0], 1,17);
        g.drawString("" +rands[1], 16,15);
        g.drawString("" +rands[2], 31,18);
        g.drawString("" +rands[3], 46,16);
        g.dispose();
        //將影象輸出到客戶端
        ServletOutputStream sos = response.getOutputStream();
        ByteArrayOutputStream baos = new ByteArrayOutputStream();
        ImageIO.write(image, "JPEG", baos);
        byte[] buffer = baos.toByteArray();
        response.setContentLength(buffer.length);
        sos.write(buffer);
        baos.close();
        sos.close();
        //將驗證碼存放到session中
        session.setAttribute("createImageServlet", new String(rands));
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}

登入頁面：login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <form action="post" name = "form1">
    使用者名稱<input type = "text" name = "userid" onclick = "mes.innerHTML="value = "${param.userid }"/><br/>
    密&nbsp;&nbsp;&nbsp;碼<input type = "password" name = "userpwd" value = "${param.userpwd }"/><br/>
    驗證碼<input type = "text" name = "checkcode"/>
    <img border="0" src="createImageServlet"/>
    <input type = "submit" value = "換一張" onclick = "form1.action='changeCheckCodeServlet'"/>
    <br/>
    <input type = "submit" value = "登入" onclick = "form1.action = 'logCheckServlet'"/>
    <input type = "reset" value = "重置"/>
    <div id = "mes">${info }</div>
    </form>
</body>
</html>

登入驗證Servlet：logCheckServlet

package control;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

/**
 * Servlet implementation class logCheckServlet
 */
public class logCheckServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        String userid = request.getParameter("userid");
        String userpwd = request.getParameter("userpwd");
        String usercheckcode = request.getParameter("checkcode");
        String info = "";
        HttpSession session = request.getSession();
        String servercheckcode = (String)session.getAttribute("createImageServlet");
        if(!servercheckcode.equalsIgnoreCase(usercheckcode)){
            info = "驗證碼不正確，請重新輸入";
        }else if("張三".equals(userid)&&"123".equals(userpwd)){
            info = "登陸成功";
        }else{
            info = "使用者名稱或密碼不正確";
        }
        request.setAttribute("info", info);
        request.getRequestDispatcher("/login.jsp").forward(request,response);
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}

更新驗證碼Servlet：changeCheckCodeServlet:

package control;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class changeCheckCodeServlet
 */
public class changeCheckCodeServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.getRequestDispatcher("/login.jsp").forward(request, response);
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}

配置檔案：web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <display-name>testImage</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  <servlet>
    <description></description>
    <display-name>createImageServlet</display-name>
    <servlet-name>createImageServlet</servlet-name>
    <servlet-class>control.createImageServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>createImageServlet</servlet-name>
    <url-pattern>/createImageServlet</url-pattern>
  </servlet-mapping>
  <servlet>
    <description></description>
    <display-name>logCheckServlet</display-name>
    <servlet-name>logCheckServlet</servlet-name>
    <servlet-class>control.logCheckServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>logCheckServlet</servlet-name>
    <url-pattern>/logCheckServlet</url-pattern>
  </servlet-mapping>
  <servlet>
    <description></description>
    <display-name>changeCheckCodeServlet</display-name>
    <servlet-name>changeCheckCodeServlet</servlet-name>
    <servlet-class>control.changeCheckCodeServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>changeCheckCodeServlet</servlet-name>
    <url-pattern>/changeCheckCodeServlet</url-pattern>
  </servlet-mapping>
</web-app>

web.xml配置的Servlet對映地址不要隨意更改，請保持一致即能實現。

3.實現


如果實現不了歡迎來我的自建部落格評論，我的郵箱會自動收到，也可以及時回覆你們，關注一下，大家一起學習。
自建部落格：http://47.107.118.184

相關推薦

使用Servlet實現圖形驗證碼登入頁面

1.介紹 首先需要寫一個生成圖形驗證碼的Servlet： 我這裡的Servlet為：createImageServlet 然後我們使用登入頁面來驗證是否能獲取圖形驗證碼。 登入後通過Servlet判斷使用者名稱密碼是否為張三和123（這裡簡單操作就不連線資料庫了） 登入頁面

Tornado框架實現圖形驗證碼功能

tor length turn 黑客 body world 工作流 params fun 圖形驗證碼是項目開發過程中經常遇到的一個功能，在很多語言中都有對應的不同形式的圖形驗證碼功能的封裝，python 中同樣也有類似的封裝操作，通過繪制生成一個指定的圖形數據，讓前端HTM

php實現圖形驗證碼詳解！

最近由於專案需要，圖形驗證碼，就寫了一個，為大家詳細介紹下實現過程！ 1、驗證碼封裝實現方法 //生成驗證碼 public function get_img_code(){ ob_clean(); cookie('code',NULL); session('code',NU

Java實現圖形驗證碼

一、功能分析 在登入頁面實現圖形驗證碼的功能 具體實現：（思路分析） 1、登入頁面中通過img標籤呼叫封裝的工具類VerifyUtil（說明登入頁面用jsp實現，為了後期接收響應結果） 2、編寫工具類VerifyUtil，具體功能： 生成四個隨機

Spring Security、實現圖形驗證碼功能、實現"記住我"功能

說在前面 博主最近會有很多專案跟大家一起分享,做完後會上傳github上的,希望讀友們能給博主提提意見哈哈 這個專案是第三方登入和安全方面的,關於後臺與a

Spring Boot+Spring Security專案開發(三)：實現簡訊驗證碼登入

說在前面 博主最近會有很多專案跟大家一起分享,做完後會上傳github上的,希望讀友們能給博主提提意見哈哈 這個專案是第三方登入和安全方面的,關於後臺與app和網站的登入連線操作的實戰專案 各位如果可以就給我star哈哈謝謝啦 實

Spring Security實現圖形驗證碼的功能

res 成了 urn 圖形驗證碼 buffere 實現 static 寫到 驗證 一、生成圖片驗證碼的步驟1.根據隨機數生成數字2.將隨機數存到Session中3.將生成的圖片寫到接口的響應中 public class ImageCode { private Bu

重構Spring Security實現圖形驗證碼的功能

不單要寫完功能，而是要把它變的可以配置，供其他的應用可以使用優化要點 驗證碼的基本引數可配置（寬/高/驗證碼數字的長度/驗證碼的有效時間等） 驗證碼的攔截介面可配置（url地址） 驗證碼的生成邏輯可配置（更復雜的驗證碼生成邏輯） 1.驗證碼的基本引數可配置 在呼叫方 呼叫驗證碼的時候，

Servlet實現帶驗證碼登陸功能Demo

“紙上得來終覺淺”，動手比看書印象更深，學到的更多。下面用Servlet實現簡單的登陸功能，來鞏固對Servlet的學習。 1、在WEB－INF下新建一個名為index.html作為登陸介面。 index.html程式碼如下： <!DOCTYPE html>

使用kbmmw 實現圖形驗證碼

null -c classes rst 字符 bit verify round span 首先感謝圖形驗證碼的提供者 晴空無彩虹 https://blog.csdn.net/u011784006/article/details/80827181 他用FMX 實現了驗證

Springboot+SpringSecurity實現圖片驗證碼登入問題

這個問題,網上找了好多,結果程式碼都不全,找了好多,要不是就自動注入的類注入不了,編譯報錯,要不異常捕獲不了浪費好多時間,就覺得,框架不熟就不能隨便用,全是坑,氣死我了,最後改了兩天.終於弄好啦; 問題主要是: 返回的驗證碼不知道在SpringSecurity的哪裡和存在Session裡的比較. 比較之後應

Python實現自動登入，強行突破圖形驗證碼！

  驗證碼有圖形驗證碼、極驗滑動驗證碼、點觸驗證碼、宮格驗證碼。這回重點講講圖形驗證碼的識別。 學習Python中有不明白推薦加入交流群                 號：516107834 &

利用Python識別圖形驗證碼！實現自動登入！室友驚訝的合不攏嘴！

驗證碼有圖形驗證碼、極驗滑動驗證碼、點觸驗證碼、宮格驗證碼。這回重點講講圖形驗證碼的識別。 雖說圖形驗證碼最簡單，但是對於我這等新手，還是要苦學一番。首先尋找測試網站，網站選的是如雲閣小說網，小網站不怕被封。他們的驗證碼一般如下：      

Servlet實現一個簡單的登入【驗證碼】功能

Servlet實現一個簡單的登入【驗證碼】功能 開發工具 主要用的開發工具為 MyEclipse（2014、2016均可）、Tomcat 6.0以上、瀏覽器等。 開發環境 開發環境為windows系統，已安裝配置Java最新版開發環境。 主要功

專案部署到阿里雲 登入頁面圖形驗證碼亂碼

有時java專案部署到阿里雲機器上，登入頁面的圖形驗證碼有可能是亂碼，如下圖所示 分析了java中生成驗證碼的方法 String s = RandomStringUtils.random(4, true, true); // 儲存入session,用於與使用者的輸

Jfinal框架登陸頁面的圖形驗證碼

ima 獲得 希望 刷新 body 是否 異步刷新 tor console 本文轉自，http://www.bubuko.com/infodetail-720511.html 驗證碼的工具類， 這個jfinal自帶的也有，但是下面這個和Jfinal自帶的有一點點小的改動

java圖形驗證碼生成工具類及web頁面校驗驗證碼

組合 line des resp word buffere 需要 case ali 最近做驗證碼，參考網上案例，發現有不少問題，特意進行了修改和完善。驗證碼生成器：[ht

圖形驗證碼的兩種實現方式

ava 輸入 urn color deb rect lac prev 後臺 情形一：圖形驗證碼跟短信驗證碼一起，只需要將後臺提供的動態鏈接填到（id="img"）的src中即可生成動態驗證碼。 然後，在需要請求接口的地方，只需把（id="imgCode"）中用戶輸入的信息通

前臺jsp頁面與servlet傳輸圖片驗證碼

效果圖 <%@page import="java.util.*"%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE h

使用requests庫實現驗證碼登入

import requests from bs4 import BeautifulSoup import urllib.request headers = { ‘User-Agent’: ‘Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWeb