자바 웹 인증 코드 기능 구현(demo)

9641 단어 javaweb인증번호
인증 코드 는 말 할 필요 도 없 이 WEB-APP 에서 보통 로그 인,등록,특정한 표를 사고 스톱워치 하 는 장면 에 사용 된다.다 들 접 해 봤 어 요~별 게 다 있어 요.
DEMO 목표 기능
  • 인증 코드 페이지 입력.
  • 페이지 에서 인증 코드 를 바 꿉 니 다(비동기 실현).
  • 백 스테이지 검증 및 검증 결 과 를 되 돌려 줍 니 다.
    • 조업 을 시작 하 다
    페이지:demo1.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.자바
    
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() {} //                 
}
    설명:
    왜 그림 바 이 너 리 데 이 터 를 Base 64 인 코딩 합 니까?<img/>탭 은 속성 값src을${pageContext.request.contextPath}/captcha/code으로 직접 설정 하여 바 이 너 리 데 이 터 를 직접 표시 하도록 요청 할 수 있 지만,AJAX 비동기 요청 에서 응답 한 것 은xhr.responseText 이기 때문이다.데 이 터 를 img 탭 의 src 속성 에 직접 줄 때 Chrome-tool 으로 보면 바 이 너 리 를 텍스트 로 해석 하 는 어 지 러 운 문자 로 만 볼 수 있 기 때문에 이 단 계 를 더 해 야 합 니 다.
    어쩌면 나 는 몽 신 으로서 다른 편리 한 기 교 를 모 를 지도 모른다.그러나 이 보 를 사용 하지 않 으 려 면 직접img src 요청 주소 로 설정 하 는 것 이 가장 쉬 운 선택 입 니 다.인증 코드 를 바 꾸 는 것 은 감청 이벤트 img src 가 이 주소 로 다시 설정 하 는 것 이 아 닙 니 다(다시 요청).
    상세 한 자료:JS 브 라 우 저 에서 Base 64 인 코딩 그림 분석
    　　　　　　　　 Base 64 이미지 인 코딩 분석 및 브 라 우 저의 호환성 처리
    백그라운드 인증 코드:CheckServlet.jave
    
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+"
    real: "+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 로 통일 적 으로 설정 합 니 다.실제 프로젝트 에서 인 코딩 문 제 는 보통 하나의 Filter 에 맡 겨 완성 하여 영원히 편안 한 효 과 를 얻는다.
    효과.
    경고!경고!!얼굴 컨트롤 빨리 철수 하 세 요!!

    마지막 에 쓰다
    이상 은 자바 웹 인증 코드 작은 DEMO 의 모든 내용 입 니 다.인증 제출 도 비동기 로 하 는 것 이 좋 습 니 다.여 기 는 정돈 되 지 않 습 니 다.WEB 프로젝트 에서 인증 코드 기능 을 추가 해 본 적 이 없 는 파트너 가 시작 할 수 있 습 니 다!실제 프로젝트 에 서 는 JQuery 등 프레임 워 크 를 이용 해 AJAX 를 처리 하고 예 쁜 전단 페이지 를 하나 더 매치 하면 완벽 하 다.
    위 에서 말 한 것 은 소 편 이 소개 한 자바 웹 이 인증 코드 기능 을 실현 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
    spring MVC cors 크로스 필드 에서 소스 코드 분석 실현
    자바 그래 픽 인증 코드 생 성 도구 클래스

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage