Uso de la secuencia de comandos del medidor de fortaleza de contraseña incluida en WordPress

WordPress usa un script de seguridad de contraseña bastante ingenioso que se usa para mostrar si las contraseñas que ingresó en el administrador de WordPress son: no iguales, muy débiles, débiles, medias o fuertes. Actualmente, esta secuencia de comandos solo se utiliza al crear nuevos usuarios y al cambiar su contraseña en su administrador.

En este artículo, le enseñaré cómo usar el medidor de fuerza de contraseña de WordPress en sus propios formularios..

El script de fuerza de contraseña

La secuencia de comandos del medidor de fuerza no está documentada en el momento de este artículo, por lo que su uso requiere una pequeña investigación en el núcleo de WordPress. El script real se encuentra dentro de WordPress en wp-admin / js / password-strength-meter.js. Puedes verlo para aprender más sobre cómo funciona el script.

Lo primero que debemos hacer es incluir este guión en cola en nuestra funciones.php:

wp_enqueue_script ('password-strength-meter');

¿Qué hay en el guión??

El guión solo no hace todo por nosotros. Simplemente nos da estas dos funciones de JavaScript:

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

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

Nuestra forma de medidor de fuerza

Tomemos esto

Estaremos usando el campo nombres y ids Desde arriba en la función que crearemos..

Estos son los objetivos que queremos lograr cuando hayamos terminado:

1. Cuando se escribe algo en nuestros campos de contraseña, verificamos la fortaleza de la contraseña,
2. Luego mostramos los resultados de fortaleza debajo de los campos de contraseña similares a cómo lo hace WordPress,
3. Finalmente, habilitamos el botón de enviar si la contraseña se considera fuerte.

Nuestra función de medidor de fuerza

Permítame mostrarle primero la función jQuery finalizada que usaremos. Explicaré cada parte en detalle después:

 función checkPasswordStrength ($ pass1, $ pass2, $ strengthResult, $ submitButton, blacklistArray) var pass1 = $ pass1.val (); var pass2 = $ pass2.val (); // Restablecer el formulario y el contador $ submitButton.attr ('disabled', 'disabled'); $ strengthResult.removeClass ('short bad good strong'); // Extienda nuestra matriz de listas negras con las de las entradas y los datos del sitio blacklistArray = blacklistArray.concat (wp.passwordStrength.userInputBlacklist ()) // Obtenga la fuerza de contraseña var strength = wp.passwordStrength.meter (pass1, blacklistArray, pass2); // Agregue el interruptor de resultados del medidor de fuerza (fuerza) caso 2: $ strengthResult.addClass ('malo') .html (pwsL10n.bad); descanso; caso 3: $ strengthResult.addClass ('good') .html (pwsL10n.good); descanso; caso 4: $ strengthResult.addClass ('strong') .html (pwsL10n.strong); descanso; caso 5: $ strengthResult.addClass ('short') .html (pwsL10n.mismatch); descanso; predeterminado: $ strengthResult.addClass ('short') .html (pwsL10n.short);  // La función del medidor devuelve un resultado incluso si pass2 está vacío, // habilita solo el botón de envío si la contraseña es segura y // se llenan ambas contraseñas si (4 === strength && "! == pass2.trim ()) $ submitButton.removeAttr ('deshabilitado'); fuerza de retorno; jQuery (documento) .ready (función ($) // Encuadernación para activar checkPasswordStrength $ ('body') .on ('keyup', 'entrada [nombre = contraseña1], entrada [nombre = contraseña2]', función (evento) checkPasswordStrength ($ ('entrada [nombre = contraseña]'), // Primer campo de contraseña $ ('entrada [nombre = contraseña_retipiado]' ), // Segundo campo de contraseña $ ('# password-strength'), // Medidor de fuerza $ ('entrada [tipo = enviar]'), // Botón de envío ['negro', 'listado', 'palabra'] // palabras en la lista negra);););

1. Argumentos y restablecimiento del formulario

Hice que la función incorpore todos los objetos de los que modificaremos o necesitaremos información. Yo prefijo todos los objetos jQuery con una PS para que sea más fácil identificarlos desde los objetos JavaScript normales.

 var pass1 = $ pass1.val (); var pass2 = $ pass2.val (); // Restablecer el formulario y el contador $ submitButton.attr ('disabled', 'disabled'); $ strengthResult.removeClass ('short bad good strong');

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

También vamos a agregar estilos a nuestro medidor de fuerza dándole nombres de clase dependiendo de la puntuación de la contraseña más adelante, para el inicio de la función, vamos a borrar el estilo del medidor.

2. La matriz de la lista negra

 // Extienda nuestra matriz de listas negras con las de las entradas y los datos del sitio blacklistArray = blacklistArray.concat (wp.passwordStrength.userInputBlacklist ());

Las palabras en la lista negra del script del medidor de fuerza normalmente deberían estar bien. Pero en caso de que desee agregar más, nuestra función puede aceptar palabras adicionales. Ambos se fusionan aquí para ser ingresados ​​en el metro función.

3. Llamando al metro Función

 // Obtener la fuerza de la contraseña var strength = wp.passwordStrength.meter (pass1, blacklistArray, pass2);

Ahora llamamos al metro Función para obtener la puntuación de la fuerza de la contraseña. A continuación decidiremos qué hacer con el resultado..

4. Viendo los resultados del medidor

 // Agregue el interruptor de resultados del medidor de fuerza (fuerza) caso 2: $ strengthResult.addClass ('malo') .html (pwsL10n.bad); descanso; caso 3: $ strengthResult.addClass ('good') .html (pwsL10n.good); descanso; caso 4: $ strengthResult.addClass ('strong') .html (pwsL10n.strong); descanso; caso 5: $ strengthResult.addClass ('short') .html (pwsL10n.mismatch); descanso; predeterminado: $ strengthResult.addClass ('short') .html (pwsL10n.short); 

Ahora que tenemos la puntuación de fuerza, esta es la parte donde la mostramos. WordPress nos da el objeto JavaScript pwsL10n que mantiene las etiquetas para cada puntuación de fuerza. Mostramos la etiqueta dentro de la justo debajo de los campos de contraseña, también estamos asignando la clase de estilo correspondiente a la etiqueta.

5. Habilitar el botón Enviar

 // La función del medidor devuelve un resultado incluso si pass2 está vacío, // habilita solo el botón de envío si la contraseña es segura y // se llenan ambas contraseñas si (4 === strength && "! == pass2.trim ( )) $ submitButton.removeAttr ('disabled');

El final de la función es para habilitar nuestro botón de enviar. solamente si tenemos una contraseña segura.

6. Activando el Keyup

 jQuery (document) .ready (function ($) $ ('body') .on ('keyup', 'input [name = password1], input [name = password2]', function (event) checkPasswordStrength ($ ( 'input [nombre = contraseña]'), // Primer campo de contraseña $ ('input [nombre = password_retyped]'), // Segundo campo de contraseña $ ('# password-strength'), // Medidor de fuerza $ ('entrada [tipo = enviar] '), // Botón de envío [' negro ',' listado ',' palabra '] // Palabras en la lista negra);););

Por último, necesitamos una manera de activar cuándo ejecutar nuestro verificador de seguridad de contraseñas. Hacemos esto uniendo un controlador a la tecla Arriba eventos a los campos de contraseña.

Hemos terminado!

Cambiar las etiquetas de fuerza

WordPress carga las etiquetas del medidor de fuerza debajo del objeto pwsL10n.

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

 wp_localize_script ('password-strength-meter', 'pwsL10n', array ('empty' => __ ('indicador de fuerza'), 'short' => __ ('Very weak'), 'bad' => __ (' Débil '),' bueno '=> _x (' Medio ',' fortaleza de la contraseña '),' fuerte '=> __ (' Fuerte '),' desajuste '=> __ (' No coincidencia ')));

Conclusión

En este artículo, aprendimos cómo usar el script de seguridad de contraseña que se incluye con WordPress. Esto se puede usar en sus formularios de registro personalizados y en las páginas de perfil de front-end para los miembros de su sitio web.

Espero que hayan disfrutado este artículo. Aprecio altamente cualquier comentario, comentarios y sugerencias.

Avíseme si ha encontrado una manera genial de usar el medidor de fuerza de contraseña. Comparte tus pensamientos a continuación!