Recientemente, los códigos de verificación deslizantes se han vuelto populares gradualmente en muchos sitios web. Por un lado, es relativamente novedoso para la experiencia del usuario y fácil de operar. Por otro lado, la seguridad no se ha reducido considerablemente en comparación con los códigos de verificación gráficos. Por supuesto, hasta ahora, no hay una verificación de seguridad absoluta, pero solo está aumentando el costo de la derivación para los atacantes.
A continuación, analice el proceso central del código de verificación deslizante:
Genera aleatoriamente recortes e imágenes de fondo con sombras de corte en el backend, y guarda coordenadas de posición de recorte aleatorias en el fondo.
El front-end realiza la interacción deslizante, pone el corte en la sombra de corte y obtiene el valor de distancia deslizante del usuario, como el siguiente ejemplo
El front-end pasa el valor de distancia deslizante del usuario al back-end, y el back-end verifica si el error está dentro del rango permitido.
Aquí, simplemente verificar la distancia deslizante del usuario es la verificación más básica. Por razones de seguridad más altas, también se puede considerar toda la trayectoria del deslizamiento del usuario, el comportamiento de acceso del usuario en la página actual, etc. Estos pueden ser complejos, e incluso con la ayuda de los modelos de análisis de datos de comportamiento del usuario, el objetivo final es aumentar la dificultad de la simulación ilegal y el omisión. Estas son las oportunidades que se pueden resumir y resumir métodos de uso común. Este artículo se centra en cómo generar códigos de verificación deslizantes paso a paso en función de Java.
Se puede ver que el código de verificación gráfica deslizante consta de dos imágenes importantes, el corte de bloques y la imagen original con la sombra de corte de bloques. Aquí hay dos características importantes para garantizar la dificultad de ser forzada bruta: la forma del corte del bloque y la posición de la imagen original donde se encuentra el bloque es aleatorio. Esto permite que se creen emparejamientos de recortes e imágenes originales que se encuentran en un conjunto limitado de imágenes.
¿Cómo usar el código para extraer una imagen pequeña con una forma aleatoria específica de una imagen grande?
El primer paso es determinar el esquema de la imagen de corte para facilitar la ejecución real de la operación de procesamiento de imágenes en el futuro.
La imagen está compuesta de píxeles, y cada punto de píxel corresponde a un color. El color se puede representar en forma RGB, más una transparencia, y comprender una imagen como una figura plana, con la esquina superior izquierda como origen, al eje X derecho, y al eje y hacia abajo, un valor de coordenada corresponde al color del punto de píxel en la posición correspondiente, de modo que una imagen se puede convertir en una matriz bip-dimensional. Según esta consideración, el esquema también está representado por una matriz bidimensional, con el valor del elemento dentro del contorno 1, y el valor del elemento fuera del contorno es 0.
En este momento, debes pensar en cómo generar esta forma de esquema. Hay sistemas de coordenadas, rectángulos y círculos. Sí, se utilizan funciones gráficas matemáticas. Por lo general, las funciones que usan la ecuación de funciones de un círculo y la función de línea lateral de un rectángulo, similar a:
En (xa) ²+(yb) ² = r², hay tres parámetros A, B y R, es decir, la coordenada central es (a, b) y el radio r. Estos recortes se colocan en el sistema de coordenadas descrito anteriormente y es fácil calcular los valores específicos del gráfico.
El código de muestra es el siguiente:
private int [] [] getBlockData () {int [] [] data = new int [TargetLength] [TargetWidth]; doble x2 = TargetLength-Circler-2; // La posición del círculo generado aleatoriamente H1 = CIRCLER + MATH.RANDOM () * (TargetWidth-3 * Circler-R1); doble po = Circler*Circler; doble xbegin = TargetLength-Circler-R1; doble ybegin = TargetWidth-Circler-R1; for (int i = 0; i <targetLength; i ++) {for (int j = 0; j <targetwidth; j ++) {// derecho ○ dupo d3 = math.pow (i - x2,2)+math.pow (j - h1,2); if (d1 <= po || (j> = ybegin && d2> = po) || (i> = xbegin && d3> = po)) {data [i] [j] = 0; } else {data [i] [j] = 1; }}} Datos de retorno; }El segundo paso es que después de este esquema, puede determinar el recorte en función del valor de esta matriz bidimensional y agregar una sombra a la posición de corte en la imagen original.
La operación es la siguiente:
privado vacío CutbyTemplate (bufferedImage oriImage, bufferedImage TargetImage, int [] [] TemplateImage, int x, int y) {for (int i = 0; i <targetLength; i ++) {for (int j = 0; j <targetwidth; j ++) {int rgb = Templateimage [i] [j]; // El proceso de decoloración de color en la posición correspondiente en la imagen original int rgb_ori = oriimage.getRgb (x + i, y + j); if (rgb == 1) {// Copie el valor de color correspondiente en la imagen de corte TargetImage.setRgb (i, y + j, rgb_ori); int r = (0xff & rgb_ori); int g = (0xff & (rgb_ori >> 8)); int b = (0xff & (rgb_ori >> 16))); rgb_ori = r + (g << 8) + (b << 16) + (200 << 24); // El cambio de color de la posición correspondiente de la imagen original oriimage.setRgb (x + i, y + j, rgb_ori); }}}}Después de los dos primeros pasos, obtendrá el corte y la imagen original con sombra de corte. Para aumentar la confusión y mejorar el efecto de carga de la red, también se necesita procesamiento adicional de imágenes. En general, hay dos cosas que hacer. Una es difuminar la imagen y aumentar la dificultad del reconocimiento de la máquina, y la otra es realizar una compresión adecuada de la misma calidad. El procesamiento difuso es fácil de pensar en la confusión gaussiana, y el principio es fácil de entender. Puedes ir a Google para aprender sobre eso. Específicamente para la implementación de Java, hay muchas versiones. Ahora, no hay frascos de terceros para proporcionar un ejemplo:
Public static convoleop getgaussianblurfilter (int radio, horizontal booleano) {if (radio <1) {tirar nueva ilegalargumentException ("Radius debe ser> = 1"); } int size = radio * 2 + 1; float [] data = new float [size]; flotante sigma = radio / 3.0f; flotante twosigmasquare = 2.0f * Sigma * Sigma; float sigmaroot = (float) math.sqrt (twosigmasquare * math.pi); Total flotante = 0.0f; para (int i = -radius; i <= radius; i ++) {float distancia = i * i; int index = i + radio; datos [index] = (float) Math.EXP (-Distance / Twosigmasquare) / Sigmaroot; Total += Data [índice]; } for (int i = 0; i <data.length; i ++) {data [i] /= total; } Kernel kernel = null; if (horizontal) {kernel = nuevo kernel (tamaño, 1, datos); } else {kernel = nuevo kernel (1, tamaño, datos); } return new Convolveop (kernel, convolveop.edge_no_op, null); } public static void simple (bufferedImage src, bufferedImage dest) {bufferedImageOp op = getGaussianblurFilter (2, falso); op.filter (src, des); }El efecto desenfmo fue muy bueno después de la prueba. Además, es compresión de imagen, y no se utilizan herramientas de terceros para realizar una compresión homogénea.
Public static byte [] from BufferedImage2 (BufferedImage img, String imageType) lanza IOException {bos.reset (); // Obtenga el escritor Iterator <ImageWriter> iter = ImageIO.GetImageWritersByFormatName (ImagType); ImageWriter Writer = (ImageWriter) iter.next (); // Obtenga la configuración de parámetros de salida del escritor especificado (ImageWriteParam) ImageWriteParam iwp = Writer.getDefaultWriteParam (); iwp.setCompressionMode (ImageWriteParam.Mode_Explicit); // Establecer si debe comprimir iwp.setCompressionQuality (1f); // Establecer parámetros de calidad de compresión iwp.setProgressiveMode (ImageWriteParam.Mode_DISABLED); Colormodel colormodel = colormodel.getRgbDefault (); // Especificar el modo de color utilizado durante la compresión iwp.setDestinationType (new Javax.imageio.ImagetyPespecifier (Colormodel, Colormodel.CreateCompatibleMplemodel (16, 16))); Writer.setOutput (imageIO .CreateEmageOutputStream (BOS)); Iioimage iiamge = new iioimage (img, null, null); Writer.Write (NULL, IIAMGE, IWP); byte [] d = bos.tobytearray (); regresar D; }En este punto, se ha completado el proceso de procesamiento de código del núcleo del código de verificación deslizante. Hay muchos detalles que se pueden pulir y optimizar continuamente, para que la experiencia deslizante pueda ser mejor. Espero que pueda ayudar a algunos estudiantes que se están preparando para construir su propio código de verificación deslizante.
Las implementaciones de código anteriores son muy refinadas. Por un lado, para garantizar el rendimiento y, por otro lado, es fácil de entender. Además, debido a varias razones, no es conveniente introducir demasiados detalles. Si tiene alguna pregunta, puede dejar un mensaje para comunicarse. Después de la prueba, el tiempo de respuesta del proceso de la generación de gráficos deslizantes se puede controlar a aproximadamente 20 ms. Si la resolución de imagen original está por debajo de 300px*150px, puede alcanzar aproximadamente 10 ms, que está dentro de un rango aceptable. Si hay una manera más eficiente, espero darme algunos consejos. También espero que todos apoyen más a Wulin.com.