A geração e a verificação das imagens do código de verificação front-end são implementadas no Springboot para sua referência. O conteúdo específico é o seguinte
1. Efeito
Clique no código de verificação para obter o novo código de verificação
2. Princípio
O plano de fundo gera uma imagem do código de verificação e passa a imagem para a recepção.
O plano de fundo salva o conteúdo do código de verificação na sessão.
Depois de inserir o código de verificação na recepção, ele será passado para o segundo plano e recuperou o código de verificação salvo na sessão para verificação.
Observe que o texto simples do código de verificação não pode ser transmitido para o front -end. O conteúdo front-end é transparente e inseguro. O código de verificação é usado para evitar robôs e não apenas pessoas. Se o código de verificação for claramente transmitido para o front -end, ele será facilmente rachado.
3. Geração de imagens
Código de verificação da classe de geração de ferramenta RandomValidateCodeutil
public class RandomValidateCodeutil {public static final string aleatomcodekey = "RandomValidateCodeKey"; // Key Private String RandString = "0123456789"; // gerar aleatoriamente uma string com apenas números privados string // private string randstring = "abcdefhijklmnopqrvuvwxy" "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"; // FORÇAS GERADAS ALENTES DE NÚMEROS E LETRAS PRIVADAS INT LIDUSTA = 95; // Largura da imagem Private int alting = 25; // Altura da imagem Private Linesize = 40; Número de linhas de interferência private Int Stringnum = 4; LoggerFactory.getLogger (RandomValidateCodeutil.class); Random aleatório privado aleatório = novo aleatório (); / *** Get Font*/ Private Font GetFont () {Return New Font ("FILLSYS", FONT.CENTER_BASELINE, 18); } / *** Obtenha cor* / color privado getRandcolor (int fc, int bc) {if (fc> 255) fc = 255; if (bc> 255) bc = 255; int r = fc + aleatoriamente.nextInt (bc - fc - 16); int g = fc + aleatoriamente.nextInt (bc - fc - 14); int b = fc + aleatoriamente.nextInt (bc - fc - 18); retornar nova cor (R, G, B); } / *** Gere imagem aleatória* / public void getRandCode (solicitação httpServletRequest, httpServletResponse resposta) {httpssession session = request.getSession (); // A classe BufferEdImage é uma classe de imagem com um buffer e a classe de imagem é uma classe usada para descrever informações da imagem bufferImage imagem = new bufferImage (largura, altura, bufferImage.type_int_bgr); Gráficos g = image.getGraphics (); // gerar objeto gráfico do objeto de imagem. Você pode executar várias operações de desenho na imagem modificando o objeto G.FillRect (0, 0, largura, altura); // Tamanho da imagem G.setFont (new Font ("Times New Roman", Font.Roman_Baseline, 18); i ++) {drawline (g); } // desenhe aleatomstring aleatomstring = ""; for (int i = 1; i <= stringnum; i ++) {aleatherstring = drawstring (g, RandomString, i); } logger.info (RandomString); // Salvar a string aleatória gerada para sessão session.removeattribute (RandomCodeKey); session.setAttribute (RandomCodeKey, RandomString); G.Dispose (); tente {// emitir a imagem na memória para o cliente através do fluxo de formulário imageio.write (imagem, "jpeg", resposta.getOutputStream ()); } catch (Exceção e) {Logger.error ("Falha ao produzir a imagem na memória para o cliente através do fluxo >>>>", e); }} / *** Draw string* / private string drawstring (gráficos g, string aleatomstring, int i) {g.setFont (getFont ()); g.setColor (nova cor (Random.NextInt (101), Random.NextInt (111), Random .Nextint (121))); String rand = string.valueof (getrandomString (aleatom.nextInt (randString .Length ()))); RandomString += rand; G.Translate (Random.NextInt (3), Random.NextInt (3)); G.DrawString (Rand, 13 * i, 16); retornar Randomstring; } / *** Desenhe a linha de interferência* / private void DrawLine (gráficos g) {int x = aleatom.nextInt (largura); int y = random.nextint (altura); int xl = random.nextint (13); int yl = random.nextint (15); G.Drawline (x, y, x + xl, y + yl); } / *** Obtenha caracteres aleatórios* / public string getRandomString (int num) {return string.valueof (randstring.charat (num)); }}No controlador chama o método para gerar imagem do código de verificação e passar a imagem para o front -end
/*** Gere código de verificação*/@requestmapping (value = "/getVerify") public void getVeify (solicitação httpServletRequest, httpServletResponse resposta) {try {Response.setContentType ("imagem/jpeg") // definir o tipo correspondente e dizer ao corredor para o correio para o correio (o correio, o correio ("Image/") // Set. "Sem cache"); // Defina as informações do cabeçalho da resposta para dizer ao navegador para não armazenar em cache esta resposta de conteúdo.setheader ("controle de cache", "sem cache"); Response.setDateHeader ("Expire", 0); RandomValidateCodeutil RandomValidateCode = new RandomValidateCodeutil (); RandomValidateCode.getRandCode (request, resposta); // Código de verificação de saída Método da imagem} Catch (Exceção e) {Logger.error ("Falha ao obter o código de verificação >>>>", e); }} Front-end Obtenha a imagem do código de verificação
html
<div> <div> <input type = "tel" id = "verify_input" placeholder = "Por favor, digite o código de verificação" maxlength = "4"> </div> </div> <div> <a href = "javascript: void (0);" rel = "Nofollow externo"> <img id = "imgVerify" src = "" onclick = "getVerify (this);"> </a> </div> </div>
JS
// Obtenha função do código de verificação getVerify (obj) {obj.src = httpurl + "/sys/getVerify?" + Math.random ();}Cada vez que você clica na imagem e atualize a interface do código de verificação pela primeira vez, basta ligar para o método getVerify ().
4. Verificação da verificação Verificação
O front-end obtém o código de verificação inserido pelo usuário e o passa em segundo plano para verificação.
Código de verificação de segundo plano
/*** Esqueceu o código da verificação da página de senha*/@requestMapp (value = "/checkVerify", método = requestMethod.post, headers = "aceitam = aplicação/json") public boolean checkVerify (@requestbody map <string, object> requestMap, httpsession) {try {// obtring do string <string, no string, no stringMapMap, o stringMapMapMAP, o stringMapMAP (stringMPTR = stringMapMAp, o stringMapMAP, o stringMapMAP (stringMpTStrestststr = stringMap). String aleatória = (string) session.getAttribute ("RandomValidAtecodeKey"); if (aleatoriamente == null) {return false; } if (random.equals (inputStr)) {return true; } else {return false; }} catch (Exceção e) {Logger.error ("Verificação de verificação de verificação falhada", e); retornar falso; }}Após a verificação de segundo plano, retorne o resultado da verificação front-end verdadeiro ou falso.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.