집 >Java >java지도 시간 >인증 코드 기능 구현을 위한 JavaWeb 코드 세부 정보(데모)

인증 코드 기능 구현을 위한 JavaWeb 코드 세부 정보(데모)

黄舟원래의: 2017-03-09 10:21:362182검색

WEB-APP에서는 일반적으로 로그인, 등록, 특정 티켓 구매, 플래시 세일 및 기타 시나리오에 사용됩니다. 오늘은 편집자가 구현 방법을 설명할 것입니다. 예제 코드를 통해 javaweb의 인증 코드 기능 필요한 것 참고로 친구들

말할 필요도 없이 WEB-APP에서는 일반적으로 인증 코드가 사용됩니다: 로그인, 등록, 특정 티켓 구매, 플래시 판매 및 다른 시나리오. 모두가 그들과 접촉해 왔고, 그들은 온갖 종류의 이상하고 다양하다고 할 수 있습니다.

DEMO 대상 기능

인증 코드 페이지 입력입니다.
페이지 교체 확인 코드(비동기 구현)입니다.
백엔드 검증 및 반환 검증 결과.

공사 시작

페이지: deco1.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
 <head>
 <title>验证示例</title>
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">
 <style type="text/css">
 img {
 width: 87px;
 height: 33px;
 border: 1px solid gray;
 }
 #msg {color: red;} /* 后台返回的验证信息显示为红色 */
 </style>
 </head>
 <body>
 <form action="${pageContext.request.contextPath}/check" method="post" enctype="application/x-www-form-urlencoded">
 验证码：<input type="text" name="code" size="4" maxlength="4" id="code" /> 
 <img id="code-img" src="" alt="验证码" style="display: none;"/> 
 <a href="javascript:void(0)" rel="external nofollow" id="changeCode">看不清？换一张</a> <br/><br/>
 <input type="submit" value="验证"/> <span id="msg">${msg}</span>
 </form>
 </body>
</html>

설명 :

페이지가 새로 고쳐지는 것을 방지하기 위해 "잘 보이지 않습니까? 하나 변경"의 href 속성을 javascript:void(0)으로 작성합니다. 여기서 교체 기능은 AJAX에 의해 비동기적으로 완료됩니다.

JavaScript 도구: util.js(네이티브 JS를 사용하는 이유는 부담스럽죠~하)

/**
 * 获取 XMLHttpRequest Object
 * @returns XMLHttpRequest Object
 */
function getXHR() {
 var xmlHttp;
 try { // Firefox, Opera 8.0+, Safari
 xmlHttp = new XMLHttpRequest();
 } catch (e) { // Internet Explorer
 try {
 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
 } catch (e) {
 try {
 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 } catch (e) {
 alert("Sorry, 您的浏览器不支持 AJAX！");
 return false;
 }
 }
 }
 return xmlHttp;
}

페이지의 JavaScript 코드

<script type="text/javascript" src="${pageContext.request.contextPath}/js/util.js"></script>
 <script type="text/javascript">
 var xhr = getXHR(); // 获得 XMLHttpRequest 对象
 // 页面加载时加载验证码，但验证码初始为隐藏状态
 window.onload=function() {
 // 为 onreadystatechange 事件注册回调函数。由于 xhr 为全局变量，所以注册后就不用管啦
 xhr.onreadystatechange=function() {
 if(xhr.readyState==4 && xhr.status==200) {
 document.getElementById(&#39;code-img&#39;).src="data:image/png;base64,"+xhr.responseText;
 }
 }
 xhr.open("GET","${pageContext.request.contextPath}/captcha/code",true);
 xhr.send(null);
 }
 // 验证码输入框获得焦点时，验证码状态更改为显示
 document.getElementById(&#39;code&#39;).onfocus=function() {
 document.getElementById(&#39;code-img&#39;).style.display="inline";
 }
 // 异步请求，更换验证码
 document.getElementById(&#39;changeCode&#39;).onclick=function() {
 xhr.open("GET","${pageContext.request.contextPath}/captcha/code",true);
 xhr.send(null);
 }
 </script>

인증 코드를 생성하는 CaptchaCodeServlet.java

package com.leo.web.captcha;
import java.io.IOException;
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 com.leo.util.ImageUtil;
import cn.dsna.util.images.ValidateCode;
@WebServlet("/captcha/code")
public class CaptchaCodeServlet extends HttpServlet {
 private static final long serialVersionUID = 1L;
 @Override
 protected void doGet(HttpServletRequest request, HttpServletResponse response)
 throws ServletException, IOException
 { 
 // 生成验证码（构造参数分别代表：宽度,高度,字符数,干扰线条数）
 ValidateCode code = new ValidateCode(87, 33, 4, 23);
 // 将验证码保存到 session 中，用于验证
 request.getSession().setAttribute("code", code.getCode());
 // 响应返回验证码图片 base64 编码后的数据给浏览器
 response.getWriter().write(ImageUtil.encodeImg2Base64(code.getBuffImg(), "png"));
 }
 @Override
 protected void doPost(HttpServletRequest request, HttpServletResponse response)
 throws ServletException, IOException
 {
 this.doGet(request, response);
 }
}

설명:

Servlet3.0 의 새로운 기능이 여기에서 사용됩니다. 주석으로 url-pattern를 구성합니다(사용하기 매우 재미있습니다). 즉, 간단한 프로젝트에는 더 이상 web.xml 가 필요하지 않지만 Tomcat 에는 7.0 이상이 필요합니다.

두 번째로, ValidateCode.jar라는 작은 도구를 사용하여 인증 코드를 생성했습니다. 이 도구는 매우 간단하며 마음에 들지 않으면 직접 작성할 수 있습니다. 그런데 기능이 너무 적어서 ImageUtil를 하나 더 썼습니다. 또한 인증 코드 도구를 직접 오픈소스로 만들 계획도 있습니다.

ImageUtil.java

package com.leo.util;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import javax.imageio.ImageIO;
import sun.misc.BASE64Encoder;
public class ImageUtil {
 /**
 * 将图片二进制数据进行 base64 编码
 * @param bufImg
 * @return base64 编码后的字符串
 */
 public static String encodeImg2Base64(BufferedImage bufImg, String formatName) {
 ByteArrayOutputStream outputStream = null;
 try {
 outputStream = new ByteArrayOutputStream();
 ImageIO.write(bufImg, formatName, outputStream);
 } catch (IOException e) {
 throw new RuntimeException("Base64 编码失败！"+e.getMessage());
 }
 BASE64Encoder encoder = new BASE64Encoder();
 return encoder.encode(outputStream.toByteArray());
 }
 private ImageUtil() {} // 工具类私有化构造方法是常见的做法
}

설명:

이미지 바이너리 데이터를 Base64로 인코딩해야 하는 이유는 무엇입니까? 79d7c95122630a3791db16c5259dc98d 태그는 src 속성 값을 ${pageContext.request.contextPath}/captcha/code으로 직접 설정하여 해당 서블릿에 직접 표시할 바이너리 데이터를 가져오도록 요청할 수 있지만 AJAX 비동기 요청의 응답은 xhr.responseText 입니다. 데이터가 img 태그의 src 속성에 직접 제공되는 경우 Chrome-tool 로 보면 바이너리의 텍스트로 구문 분석되는 잘못된 문자 묶음만 생성되므로 이 추가 단계가 필요합니다.

초보자라 다른 편리한 기술은 잘 모르겠네요. 하지만 비동기식을 사용하고 싶지 않다면 img src 을 요청 주소로 직접 설정하는 것이 가장 쉬운 방법이 될 것입니다. 인증 코드를 변경하는 것은 img src 이벤트를 듣고 해당 주소로 재설정하는 것 이상입니다. 또 다른 요청).

세부 정보: JS는 브라우저에서 Base64 인코딩 이미지를 구문 분석합니다.

package com.leo.web.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/check")
public class CheckServlet extends HttpServlet {
 private static final long serialVersionUID = -6588625852621588221L;
 @Override
 public void doGet(HttpServletRequest request, HttpServletResponse response)
 throws ServletException, IOException
 {
 String encoding = "UTF-8";
 request.setCharacterEncoding(encoding);
 response.setContentType("text/html;charset="+encoding);
 /* 验证码验证 */
 String inputCode = request.getParameter("code");
 // 获得 session 中的正确验证码
 String realCode = (String) request.getSession().getAttribute("code");
 System.out.println("input: "+inputCode+"\nreal: "+realCode); // 用于 Debug
 if(!(inputCode!=null && realCode!=null &&
 inputCode.equalsIgnoreCase(realCode))) {
 // 若验证码不正确：回到页面并提示错误
 request.setAttribute("msg", "验证码错误!请重新输入");
 request.getRequestDispatcher("/demo1.jsp").forward(request, response);
 return;
 }
 // 验证码正确，响应一句话表示 OK
 response.getWriter().write("验证成功！");
 }
 @Override
 public void doPost(HttpServletRequest request, HttpServletResponse response)
 throws ServletException, IOException
 {
 doGet(request, response);
 }
}

참고:

doGet() 메서드는 처음에 중국어 왜곡 문자를 처리하며 인코딩은 UTF-8로 균일하게 설정됩니다. 실제 프로젝트에서 코딩 문제는 일반적으로 한 번에 모든 효과를 얻기 위해 필터로 전달됩니다.

효과

주의! 경고하다! ! 얼굴 통제, 신속하게 대피해주세요! ! !

마지막에 작성

위는 JavaWeb 인증 코드 Small DEMO의 전체 내용을 제출하는 것이 가장 좋습니다. 확인도 비동기화되면 여기에 문제가 발생합니다. WEB 프로젝트에 인증코드 기능 추가를 시도하지 않은 친구도 시작할 수 있습니다! 실제 프로젝트에서는 JQuery와 같은 프레임워크를 사용하여 AJAX를 처리하고 아름다운 프런트 엔드 페이지와 결합하면 완벽합니다.

위 내용은 인증 코드 기능 구현을 위한 JavaWeb 코드 세부 정보(데모)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：Java 생성 그래픽 검증 코드 도구 클래스 상세 소개다음 기사：Java 생성 그래픽 검증 코드 도구 클래스 상세 소개