11 07 2017
SimpleCaptcha 예제
- javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
function fnCmdLogin() { var captcha = $('#captcha').val(); if(captcha == ''){ alert("자동등록 방지 문자를 입력해 주세요."); $('#captcha').focus(); return; } var captchaOk = $.commandAjax('<c:url value="/mngr/com/login/checkCaptcha.do"/>', 'loginForm'); if (captchaOk.status == 'FAIL') { alert(captchaOk.message); return; } var logId = $('#logId').val(); var pwd = $('#logPw').val(); if(logId == ''){ alert("아이디를 입력하세요."); $('#logId').focus(); return; } if(pwd == ''){ alert("비밀번호를 입력하세요."); $('#logPw').focus(); return; } var login = $.commandAjax('LoginConfirm.do', 'loginForm'); if (login.status == 'SUCCESS') { location.href = login.message; } else { alert(login.message); } return false; } function fnCmdReCaptcha() { var $captchaLoader = $("#loginForm .box.captcha .loading"); var $captchaImg = $("#loginForm .box.captcha img"); $captchaLoader.show(); $('#captchaImg').attr("src", "/captcha?ran=" + Math.random()); $captchaLoader.fadeOut(500); } |
- html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<table class="logintb"><colgroup> <col style="width: 32%;" /> <col /> <col style="width: 20%;" /> </colgroup> <tbody> <tr class="box captcha"> <td style="padding-left: 30px;" colspan="3"> <div class="loading"></div> <img id="captchaImg" title="캡차 이미지" src="/captcha" alt="캡차 이미지" /></td> </tr> <tr> <th><label for="captcha">자동 로그인 방지</label></th> <td><input id="captcha" autocomplete="off" name="captcha" required="" type="text" /></td> <td><a class="reflashbtn" onclick="fnCmdReCaptcha();" tabindex="3" href="#none">새로고침</a></td> </tr> <tr> <th>ID</th> <td><input id="logId" style="ime-mode: inactive;" tabindex="1" maxlength="20" name="logId" type="text" placeholder="Login Id" /></td> <td rowspan="2"><a class="loginbtn" tabindex="3" href="#none">로그인</a></td> </tr> <tr> <th>Password</th> <td><input id="logPw" tabindex="2" maxlength="20" name="logPw" type="password" placeholder="Password" /></td> </tr> </tbody> </table> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
//자동등록 문자 확인 URL @ResponseBody @RequestMapping(value = "/mngr/com/login/checkCaptcha.do") public ValidationResponse checkCaptcha(HttpServletRequest request, HttpServletResponse response) throws Exception { ValidationResponse validationResponse = new ValidationResponse(); Captcha captchaService = (Captcha) request.getSession().getAttribute(Captcha.NAME); request.setCharacterEncoding("UTF-8"); // Do this so we can capture non-Latin chars String captcha = request.getParameter("captcha");// captcha.value if (captchaService.isCorrect(captcha)) { validationResponse.setStatus(ValidationMessage.SUCCESS); validationResponse.setResult(""); } else { validationResponse.setStatus(ValidationMessage.FAIL); validationResponse.setResult("자동 등록 방지를 위한 문자를 잘못 입력했습니다."); } return validationResponse; } //로그인 처리부분에 아래 부분 포함 Captcha captchaService = (Captcha) request.getSession().getAttribute(Captcha.NAME); String captcha = request.getParameter("captcha");// captcha.value if (!captchaService.isCorrect(captcha)) { validationResponse.setStatus(ValidationMessage.FAIL); validationResponse.setResult("자동 등록 방지를 위한 문자를 잘못 입력했습니다."); return validationResponse; } |
- Web.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<servlet> <servlet-name>SimpleCaptcha</servlet-name> <servlet-class>nl.captcha.servlet.SimpleCaptchaServlet</servlet-class> <init-param> <param-name>captcha-width</param-name> <param-value>300</param-value> </init-param> <init-param> <param-name>captcha-height</param-name> <param-value>100</param-value> </init-param> </servlet> <servlet-mapping> <servlet-name>SimpleCaptcha</servlet-name> <url-pattern>/captcha</url-pattern> </servlet-mapping> |
- Maven pom.xml
1 2 3 4 5 |
<dependency> <groupId>nl.captcha</groupId> <artifactId>SimpleCaptcha</artifactId> <version>1.2.1</version> </dependency> |
또는
SimpleCaptcha-1.2.1.jar 추가
SimpleCaptcha(캡차)의 Unix,Linux에서 sun.awt.X11GraphicsEnvironment 에러 IOS Swift Tip