인증 코드 기능 구현을 위한 JavaWeb 코드 세부 정보(데모)
- 黄舟원래의
- 2017-03-09 10:21:362107검색
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('code-img').src="data:image/png;base64,"+xhr.responseText;
}
}
xhr.open("GET","${pageContext.request.contextPath}/captcha/code",true);
xhr.send(null);
}
// 验证码输入框获得焦点时，验证码状态更改为显示
document.getElementById('code').onfocus=function() {
document.getElementById('code-img').style.display="inline";
}
// 异步请求，更换验证码
document.getElementById('changeCode').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 중국어 웹사이트의 기타 관련 기사를 참조하세요!