En el mundo actual, la seguridad en línea es más importante que nunca. Con tantas cuentas en línea para realizar un seguimiento, es esencial tener una contraseña segura y única para cada una.

Si está creando un sitio, es aún más importante asegurarse de que las contraseñas sean lo más seguras posible. Puede presentar una lista de verificación a quienes usan su sitio y asegurarse de que su contraseña cumpla con sus requisitos antes de aceptarla.

Aprenda a implementar una lista de verificación de contraseñas con Next.js.

¿Por qué usar una lista de verificación de contraseñas?

Hay muchas razones por las que es posible que desee utilizar una lista de verificación de contraseñas.

Primero, puede ayudarlo a asegurarse de que las contraseñas de sus usuarios sean seguras y únicas. Al tener una lista de verificación de requisitos, puede estar seguro de que cada contraseña cumple con un estándar determinado.

Puede que tus usuarios no te lo agradezcan, pero les estarás haciendo un favor. Al fomentar el uso de contraseñas seguras, será menos probable que un hacker obtenga acceso a una de las cuentas de sus usuarios.

instagram viewer

En segundo lugar, una lista de verificación de contraseñas puede ayudar a transmitir una sensación de seguridad. Al publicar los requisitos, les está diciendo a sus usuarios que se toma en serio la seguridad de las contraseñas.

Sin embargo, debe tener en cuenta que una lista de verificación de contraseñas no es una solución milagrosa para los problemas de contraseñas. De hecho, si hace que sus contraseñas sean demasiado restrictivas, puede facilitar que los piratas informáticos reduzcan sus opciones y forcen una contraseña por fuerza bruta. En definitiva, contraseñas seguras y únicas que los usuarios almacenar en un administrador de contraseñas son mejores.

Cómo crear una lista de verificación de contraseñas

Hay dos formas de crear una lista de verificación de contraseñas en Next.js. Puede usar las funciones integradas o puede usar un módulo externo.

Que necesitarás

Para crear una lista de verificación de contraseñas en Next.js, necesitará lo siguiente:

  • Node.js instalado
  • un editor de texto
  • Un proyecto Next.js

Método 1: uso de funciones integradas

Next.js viene con características integradas como ganchos y contexto. Hay diferentes tipos de ganchos que puede usar para crear una lista de verificación de contraseñas.

Primero, cree un nuevo archivo en su aplicación Next.js y asígnele un nombre contraseñaChecklist.js. En este archivo, puede tomar la entrada de contraseña de los usuarios y puede verificar si la contraseña cumple con los requisitos.

importar Reaccionar, { estado de uso } de 'reaccionar'
funciónLista de comprobación de contraseñas() {
 const [contraseña, establecer Contraseña] = useState('')
constante [error, establecerError] = usarEstado(FALSO)


funciónmanejarCambiar(mi) {
configurar la clave(mi.objetivo.valor)
 }


funciónmanejarEnviar(mi) {
mi.preventDefault()


// Requisitos de contraseña
constante requisitos = [
// Debe tener al menos 8 caracteres
 longitud de la contraseña >= 8,
// Debe contener al menos 1 letra mayúscula
 /[A-Z]/.prueba(contraseña),
// Debe contener al menos 1 letra minúscula
 /[a-z]/.prueba(contraseña),
// Debe contener al menos 1 número
 /\d/.prueba(contraseña)
 ]


// Si se cumplen todos los requisitos, la contraseña es válida
constante isValid = requisitos.cada(booleano)
 si (es válido) {
 alerta('¡La contraseña es válida!')
 } demás {
 establecerError(verdadero)
 }
 }


devolver (
<formulario onSubmit={handleSubmit}>
<etiqueta>
 Contraseña:
<aporte
 tipo ="contraseña"
 valor={contraseña}
 onChange={manejarCambio}
 />
</label>
<tipo de entrada ="entregar" valor="Entregar" />
 {error &&<pag>¡La contraseña no es válida!</pag>}
</form>
 )
}
exportarpor defecto Lista de comprobación de contraseñas

En el código anterior, primero debe tomar la entrada de contraseña de los usuarios. Puedes hacer esto usando el useState gancho. Este gancho le permite crear una variable de estado y una función para actualizar esa variable. En este caso, la variable de estado es contraseña y la funcion para actualizarlo es configurar la clave.

A continuación, debe crear una función para manejar el envío del formulario. Esta función evitará la acción predeterminada del formulario (que es enviar el formulario) y verificará si la contraseña cumple con los requisitos.

Los requisitos de la contraseña son que debe:

  • tener al menos ocho caracteres
  • contener al menos una letra mayúscula
  • contiene al menos una letra minuscula
  • contener al menos un número

Puedes usar el cada método para comprobar si una contraseña cumple con todos los requisitos. Si lo hace, la contraseña es válida. De lo contrario, el código mostrará un mensaje de error.

Método 3: Usar el módulo de lista de verificación de contraseña de reacción

Otra forma de crear una lista de verificación de contraseñas en Next.js es mediante el lista de verificación de contraseña de reacción módulo. Este módulo es fácil de usar y viene con muchas características.

Primero, instale el módulo usando el siguiente comando:

npm instalar reaccionar-contraseña-Lista de Verificación --ahorrar

Luego, importe el módulo en su contraseñaChecklist.js archivo:

importar Reaccionar, {usar estado} de "reaccionar"
importar Lista de comprobación de contraseñas de "reaccionar-contraseña-lista de verificación"
constante Aplicación = () => {
 const [contraseña, establecer Contraseña] = useState("")


devolver (
<forma>
<etiqueta>Contraseña:</label>
<tipo de entrada ="contraseña" onChange={e => setPassword (e.objetivo.valor)}/>


<Lista de comprobación de contraseñas
 reglas={["longitud mínima","carácter especial","número","capital"]}
 minLength={5}
 valor={contraseña}
 />
</form>
 )
}
exportarpor defecto aplicación

Este código pasa los accesorios minLength, specialChar, number y capital al Lista de comprobación de contraseñas componente. El componente utilizará estos accesorios para verificar si la contraseña cumple con los requisitos.

También puede agregar mensajes traducidos al componente pasando el mensajes apuntalar. Estas cadenas anulan los errores predeterminados para que pueda usarlas para otros idiomas o variaciones.

importar Reaccionar, {usar estado} de "reaccionar"
importar Lista de comprobación de contraseñas de "reaccionar-contraseña-lista de verificación"
constante Aplicación = () => {
 const [contraseña, establecer Contraseña] = useState("")


devolver (
<forma>
<etiqueta>Contraseña:</label>
<tipo de entrada ="contraseña" onChange={e => setPassword (e.objetivo.valor)}/>


<Lista de comprobación de contraseñas
 reglas={["longitud mínima", "carácter especial", "número", "capital"]}
 minLength={5}
 valor={contraseña}
 mensajes={{
 longitud mínima: "La contrariaña tiene más de 8 caracteres.",
 carácter especial: "La contrariaña tiene caracteres especialmente.",
 número: "La contrariaña tiene un número.",
 capital: "La contrariaña tiene una letra mayúscula.",
 fósforo: "Las contrasñcomo coincidencia.",
 }}
 />
</form>
 )
}
exportarpor defecto aplicación

En el código anterior, el mensajes prop almacena mensajes de error alternativos. El componente mostrará estos mensajes cuando la contraseña no cumpla con los requisitos.

Este método es más conveniente porque no tiene que escribir el código para verificar si la contraseña cumple con los requisitos. También hay muchos otros beneficios de usar este módulo, tales como:

  • Visualización de la seguridad de la contraseña: lista de verificación de contraseña de reacción puede mostrar la seguridad de la contraseña para que los usuarios puedan ver qué tan fuerte es su contraseña.
  • Mostrando el mensaje de error: lista de verificación de contraseña de reacción también puede mostrar el mensaje de error si la contraseña no es válida.
  • Estilo: no tiene que agregar ningún estilo adicional a la lista de verificación. El módulo proporciona un estilo predeterminado que puede usar en su aplicación. Si desea agregar un estilo adicional, puede usar CSS normal u otro Marcos de estilo como Tailwind CSS.

Mejore la seguridad del usuario con una lista de verificación de contraseñas

Una contraseña segura es la clave para la seguridad en línea. Es importante tener una contraseña fuerte y única para cada cuenta en línea. Al usar una lista de verificación de contraseñas, puede estar seguro de que cada contraseña cumple con un estándar determinado.

Los usuarios de su aplicación también apreciarán poder ver la seguridad de la contraseña. De esta manera, pueden estar seguros de que sus contraseñas son lo suficientemente seguras. Esto mejorará la experiencia del usuario de su aplicación y también mejorará la seguridad de los usuarios de su aplicación. Del mismo modo, también puede validar los formularios en su aplicación Next.js.