인증 코드 기능 구현을 위한 JavaWeb 코드 세부 정보(데모)-java지도 시간-php.cn

집

Java

java지도 시간

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

黄舟

Mar 09, 2017 am 10:21 AM

javaweb인증코드

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 src="/static/imghwm/default1.png"  data-src="" alt="  class="lazy"  id="code-img"  alt="验证码"   style="max-width:90%"/> 
 <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로 인코딩해야 하는 이유는 무엇입니까? <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/194/b5d6008b1e4890e4e7c073611f861588-0.png?x-oss-process=image/resize,p_40" class="lazy" alt="인증 코드 기능 구현을 위한 JavaWeb 코드 세부 정보(데모)" > 태그는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

Dreamweaver Mac版

시각적 웹 개발 도구

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.