프론트 엔드 검증 코드 이미지의 생성 및 검증은 참조를 위해 SpringBoot에서 구현됩니다. 특정 내용은 다음과 같습니다
1. 효과
확인 코드를 클릭하여 새 확인 코드를 얻으십시오.
2. 원리
배경은 검증 코드 사진을 생성하고 사진을 프론트 데스크로 전달합니다.
배경은 세션에서 확인 코드 내용을 저장합니다.
프론트 데스크에서 확인 코드를 입력 한 후에는 배경으로 전달되어 확인을 위해 세션에 저장된 검증 코드를 검색합니다.
검증 코드의 일반 텍스트는 프론트 엔드로 전송 될 수 없습니다. 프론트 엔드 컨텐츠는 투명하고 안전하지 않습니다. 검증 코드는 사람뿐만 아니라 로봇을 방지하는 데 사용됩니다. 검증 코드가 프론트 엔드로 명확하게 전송되면 쉽게 갈라집니다.
3. 이미지 생성
검증 코드 생성 도구 클래스 RandomValidateCodeUtil
public class randomvalidatecodeutil {public static final strend randomcodekey = "randomvalidatecodekey"; // 키 프라이빗 문자열 randstring = "0123456789"; // 숫자 만있는 문자열을 무작위로 생성하십시오. randString = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"; // 숫자 생성 문자열 및 문자 개인 int 너비 = 95; // 이미지 너비 개인 int 높이 = 25; // 이미지 높이 개인 int 라인 리시즈 = 40; // 개인 int Stringnum = 4; loggerfactory.getLogger (randomValidateCodeUtil.class); 개인 랜덤 랜덤 = 새로운 랜덤 (); / *** 글꼴 get*/ private font getfont () {return new Font ( "고정식", font.center_baseline, 18); } / *** get color* / private color getRandColor (int fc, int bc) {if (fc> 255) fc = 255; IF (BC> 255) BC = 255; int r = fc + random.nextint (bc -fc -16); int g = fc + random.nextint (bc -fc -14); int b = fc + random.nextint (bc -fc -18); 새로운 색을 반환합니다 (R, G, B); } / *** 랜덤 이미지 생성* / public void getRandCode (httpservletRequest request, httpservletResponse 응답) {httpsession session = request.getSession (); // BufferedImage 클래스는 버퍼가있는 이미지 클래스이며 이미지 클래스는 이미지 정보를 설명하는 데 사용되는 클래스입니다. bufferedImage image = new bufferedImage (너비, 높이, bufferedImage.type_int_bgr); 그래픽 g = image.getGraphics (); // 이미지 객체의 그래픽 객체 생성. 객체 G.fillRect (0, 0, 너비, 높이); // 이미지 크기 G.SetFont (새 글꼴 ( "Times New Font", font.roman_baseline, 18)); // font size g.setColor (110, 133); // font interpresis linize; i ++) {drawline (g); } // randomString randomString = ""; for (int i = 1; i <= stringnum; i ++) {randomstring = drawString (g, randomstring, i); } logger.info (randomString); // 생성 된 임의 문자열을 세션 세션에 저장합니다 .removeattribute (randomcodekey); session.setattribute (randomcodekey, randomstring); g.dispose (); 시도 {// 흐르는 형태 imageio.write (image, "jpeg", response.getOutputStream ())을 통해 클라이언트에 메모리에서 이미지를 출력합니다. } catch (예외 e) {logger.error ( "flow >>>>", e)를 통해 메모리의 이미지를 클라이언트에게 출력하지 못했습니다. }} / *** Draw String* / private String drawString (그래픽 g, String RandomString, int i) {g.setfont (getfont ()); g.setColor (new color (random.nextint (101), random.nextint (111), random .nextint (121)); String Rand = String.valueof (getRandomString (random.nextInt (randstring .length ())); RandomString += rand; g.translate (random.nextint (3), random.nextint (3)); G.DrawString (rand, 13 * i, 16); 랜덤 스트링을 반환; } / *** 간섭 선을 그립니다* / private void drawline (그래픽 g) {int x = random.nextint (width); int y = random.nextInt (높이); int xl = random.nextint (13); int yl = random.nextint (15); G.DrawLine (X, Y, X + XL, Y + YL); } / *** 임의의 문자 가져 오기* / public string getRandomString (int num) {return string.valueof (randstring.charat (num)); }}컨트롤러에서 메소드를 호출하여 검증 코드 이미지를 생성하고 이미지를 프론트 엔드로 전달합니다.
/*** 검증 코드 생성*/@requestMapping (value = "/getVerify") public void getVerify (httpservletrequest request, httpservletreponse responsk) {try {response.setContentType ( "image/jpeg"); // 브라우저가 컨텐츠를 이미지 응답으로 출력하도록 지시합니다. "no-cache"); // 응답 헤더 정보를 설정하여 브라우저 에이 컨텐츠 응답을 캐시하지 말라고 지시합니다 .Setheader ( "Cache-Control", "No-Cache"); response.setDateHeader ( "expire", 0); randomvalidatecodeutil randomvalidatecode = new randomvalidatecodeutil (); randomvalidatecode.getRandCode (요청, 응답); // 출력 검증 코드 이미지 메소드} catch (예외 e) {logger.error ( "검증 코드를 얻지 못했습니다 >>>>", e); }} 프론트 엔드 검증 코드 사진을 얻습니다
HTML
<div> <div> <input type = "tel"id = "verify_input"placeholder = "verification code"maxlength = "4"> </div> </div> <div> <a href = "javascript : void (0); rel = "external nofollow"> <img id = "imgverify"src = ""onclick = "getVerify (this);"> </a> </div> </div>
JS
// 검증 코드 기능 getVerify (obj) {obj.src = httpurl + "/sys/getverify?" + math.random ();}이미지를 클릭하고 확인 코드 인터페이스를 처음 새로 고치면 getVerify () 메소드를 호출하십시오.
4. 검증 코드 확인
프론트 엔드는 사용자가 입력 한 검증 코드를 얻고 검증을 위해 배경으로 전달합니다.
배경 검증 코드
/*** 비밀번호 페이지 확인 코드*/@requestMapping (value = "/CheckVerify", method = requestmethod.post, headers = "accept = application/json") public bookelean checkverify (@requestbody map <string, object> requestmap, httpsession session) {session inputstrs = requestmap.get ( "inputstrent ("). String Random = (String) session.getAttribute ( "RandomValidateCodekey"); if (random == null) {return false; } if (random.equals (inputstr)) {return true; } else {return false; }} catch (예외 e) {logger.error ( "검증 코드 확인 실패", e); 거짓을 반환합니다. }}배경 확인 후 프론트 엔드 검증 결과를 참 또는 거짓으로 반환하십시오.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.