Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Creative Coding

Uso del script del medidor de seguridad de la contraseña incluido en WordPress

by
Read Time:7 minsLanguages:

Spanish (Español) translation by Marilu (you can also view the original English article)

WordPress utiliza un script bastante ingenioso de seguridad de contraseñas que se utiliza para mostrar si las contraseñas que has introducido en el administrador de WordPress son: no la misma, muy débil, débil, media o fuerte. Actualmente este script solo se utiliza cuando se crean nuevos usuarios y cuando se cambia la contraseña en el administrador.

En este artículo, te enseñaré a usar el medidor de seguridad de WordPress en tus propios formularios.

El script de la seguridad de la contraseña

El script del medidor de seguridad no está documentado al cierre de este artículo, así que usarlo requiere un poco de investigación en el core de WordPress. El script actual se encuentra dentro de WordPress en wp-admin/js/password-strength-meter.js. Puedes comprobarlo para saber más sobre cómo funciona el script.

Lo primero que tenemos que hacer es incluir este script poniéndolo en cola en nuestro functions.php:

¿Qué hay en el script?

El script por sí solo no lo hace todo por nosotros. Solo nos da estas dos funciones de JavaScript:

  • wp.passwordStrength.meter( password1, blacklist, password2 ). Esta es la función principal que usaremos. Analiza dos cadenas dadas, y luego da la fuerza de estas dos como un número del 1 al 5, siendo 1 el más débil y 5 el más fuerte. También toma una serie de palabras de la lista negra que se considerarán durante el cálculo como palabras débiles.
  • wp.passwordStrength.userInputBlacklist(). Esta función crea un array de palabras que deben ser consideradas como palabras débiles en las contraseñas. Esta función recopila las cadenas que se encuentran en el título, el eslogan y la URL de tu sitio. También comprueba ciertos campos de entrada en la página actual, y luego los añade a la lista.

Ya podemos medir la seguridad de las contraseñas con solo estas funciones de arriba. Sin embargo, hay más. El script no nos da un resultado que podamos mostrar. Tendremos que construir una función propia para hacerlo.

Nuestro formulario medidor de seguridad

Tomemos este <form> como punto de partida para implementar la función de medidor de seguridad:

Usaremos los campos names e ids de arriba en la función que crearemos.

Estos son los objetivos que queremos alcanzar cuando terminemos:

  1. Cuando se escribe algo en nuestros campos de contraseña, comprobamos la seguridad de la contraseña,
  2. Luego mostramos los resultados de la seguridad debajo de los campos de la contraseña de manera similar a como lo hace WordPress,
  3. Finalmente, activamos el botón de envío si la contraseña se considera fuerte.

La función de nuestro medidor de seguridad

Déjame primero mostrarte la función jQuery terminada que usaremos. Después explicaré cada parte en detalle:

1. Argumentos y restablecimiento del formulario 

Hice que la función tomara todos los objetos que modificaremos o de los que necesitaremos información. Prefijé todos los objetos de jQuery con un $ para que resulte más fácil de identificarlos de los objetos normales de JavaScript.

Estas primeras líneas son simples, obtenemos las contraseñas y luego reiniciamos nuestro formulario. Hacemos que el formulario siempre esté desactivado al principio para que podamos habilitarlo más tarde, después de obtener una buena puntuación de seguridad.

También vamos a añadir estilos a nuestro medidor de seguridad dándole nombres de clase dependiendo de la puntuación de la contraseña más tarde, para el inicio de la función, vamos a limpiar el estilo del medidor.

2. El array de la lista negra

El script del medidor de seguridad de las palabras de la lista negra normalmente debería bastar tal cual está. Pero por si quieres añadir más, nuestra función puede aceptar palabras adicionales. Ambas se fusionan aquí para ser introducidas en la función meter.

3. Llamar la función meter

Ahora llamamos a la función meter para obtener la puntuación de seguridad de la contraseña. A continuación decidiremos qué hacer con el resultado.

4. Mostrando los resultados del medidor

Ahora que tenemos la puntuación de la seguridad, esta es la parte donde la mostramos. WordPress nos da el objeto de JavaScript pwsL10n que contiene las etiquetas para cada puntuación de seguridad. Mostramos la etiqueta dentro del <span> justo debajo de los campos de contraseña, también asignamos la clase de estilo correspondiente a la etiqueta.

5. Activar el botón Envío

El fin de la función es para habilitar nuestro botón de envío solo si tenemos una contraseña fuerte.

6. Activar el teclado

Por último, necesitamos una forma de activar cuándo ejecutar nuestro comprobador de medidor de seguridad de la contraseña. Hacemos esto vinculando un controlador a los eventos keyup a los campos de la contraseña.

¡Hemos terminado!

Cambiar las etiquetas de seguridad

Las etiquetas del medidor de seguridad son cargadas por WordPress bajo el objeto pwsL10n.

Para cambiar y anular estas etiquetas, tendrías que localizar el script después de nuestro wp_enqueue_script en functions.php:

Puedes leer más sobre el paso de cadenas localizadas a JavaScript en el artículo: How to Pass PHP Data and Strings to JavaScript (Cómo pasar datos y cadenas PHP a JavaScript)

Conclusión

En este artículo, aprendimos a usar el script de seguridad de la contraseña que se incluye en WordPress. Puede utilizarse en los formularios de registro personalizados y en las páginas de perfil de los miembros de tu sitio web.

Espero que hayas disfrutado de este artículo. Aprecio mucho cualquier comentario o sugerencia.

Avísame si has encontrado una forma genial de usar el medidor de seguridad de la contraseña. ¡Comparte tus pensamientos a continuación!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.