Nueva publicación
Artículo
· 23 ago, 2022 Lectura de 3 min

Generar y validar código CAPTCHA

#CSP #Frontend #ZEN #Caché

Supongamos que has desarrollado tu propia aplicación web con las tecnologías de InterSystems y ahora quieres realizar una validación de Captcha en el lado del cliente para saber si el usuario es humano o no y hacerla más segura. Existen algunos frameworks modernos para abordar el problema de Captcha, pero la mayoría de ellos necesita acceso a Internet para generar códigos y, a veces, son complejos de implementar. Toma esto como un ejemplo básico, teniendo en cuenta que el reconocimiento de imágenes se ha vuelto demasiado bueno. Por eso hoy en día se tiende a ver más Captchas de reconocimiento de patrones que de solo lectura. (Por ejemplo, hacer clic en todas las imágenes que tengan un escaparate). Si necesitas algo más complejo, adelante, desarrolla, mejora este código y compártelo. Sigue leyendo para descubrir cómo usar este ejemplo básico:

  

Demo.Captcha clase
 

Usando esta clase, puedes crear archivos de imagen Captcha en un directorio físico para que se muestren en tu aplicación. Ten en cuenta que el directorio de imágenes donde se crean las imágenes debe estar disponible para que tu aplicación web acceda a esas imágenes. Para crear la imagen Captcha, llama al siguiente método pasando el nombre completo del archivo como parámetro:

 

Crear archivo de imagen

Set tCount = $Increment(^CacheTemp("CAPTCHA",0))
        
Set tPath  = "C:\InterSystems\Ensemble201710\CSP\user\images\captcha\"
If '##class(%File).DirectoryExists(tPath) {
    Set tSC = ##class(%File).CreateDirectoryChain(tPath) 
}         
         
Set tFileName = %session.SessionId_tCount_".bmp"        
Set tFullName = tPath_tFileName
Set tCaptcha = ##class(Demo.Captcha).CreateImage(tFullName) 
Write tCaptcha,!

 

En tu Sistema > Administración de seguridad > Aplicaciones web > Editar aplicación web, ten en cuenta que el CSP Files Physical Path es el mismo en el código anterior añadiendo la pieza "\images\captcha\".

 

 

Después de ejecutar el código anterior para crear las imágenes Captcha, echa un vistazo a esa ruta. Verás así todas las imágenes Captcha generadas (ten en cuenta que necesitarás un objeto %session):

 

 

El método CreateImage() de la clase Demo.Captcha también devolverá el código Captcha generado que te permitirá validar contra el código Captcha introducido por el usuario en tu aplicación web.

 

Ejemplo

Para hacerlo más sencillo, he preparado un archivo CSP simple que representa una imagen Captcha y la valida. Puedes importar el archivo XML adjunto y verificar y cambiar las rutas según sea necesario para que coincidan con tu aplicación web CSP.

  • Instalando en el namespace USER, abre Studio e importa el archivo XML;
  • Abre el archivo captcha.csp en tu navegador;
    • Haz clic en el botón "cambiar imagen" para crear y mostrar una nueva imagen Captcha si es necesario;
  • Introduce el código de la imagen en el cuadro de entrada en blanco;
  • Haz clic en el botón validar y verifica el mensaje;

 

Importación de clases

  • Abre Studio;
  • Selecciona el namespace USER;
  • Ve a Herramientas->Importar local y selecciona el archivo captcha.xml que has descargado;
  • Importa esas clases según la imagen siguiente;

  • Cambia la ruta de las imágenes Captcha según tu aplicación web CSP;

  • Abre los archivos captcha.csp en tu navegador web haciendo clic en el botón Ver página web , en Studio;

  • Si necesitas cambiar la imagen, haz clic en el botón Cambiar imagen;
    • Mira el directorio de imágenes Captcha;
  • Introduce el código Captcha en el cuadro de entrada en blanco y haz clic en validar;
    • Mira los resultados;
    • Repite estos pasos tanto como quieras;

No dudéis en poneros en contacto conmigo si tenéis alguna duda.

Espero que os resulte útil.

Comentarios (0)1
Inicie sesión o regístrese para continuar