No mundo de hoje, a segurança online é mais importante do que nunca. Com tantas contas online para acompanhar, é essencial ter uma senha forte e única para cada uma.

Se você estiver construindo um site, é ainda mais importante garantir que as senhas sejam o mais seguras possível. Você pode apresentar uma lista de verificação para aqueles que usam seu site e garantir que a senha atenda aos seus requisitos antes de aceitá-la.

Saiba como implementar uma lista de verificação de senha usando o Next.js.

Por que usar uma lista de verificação de senha?

Há muitas razões pelas quais você pode querer usar uma lista de verificação de senha.

Em primeiro lugar, pode ajudá-lo a garantir que as senhas de seus usuários sejam fortes e exclusivas. Ao ter uma lista de verificação de requisitos, você pode ter certeza de que cada senha atende a um determinado padrão.

Seus usuários podem não agradecer por isso, mas você estará fazendo um favor a eles. Ao incentivar senhas fortes, você diminuirá a probabilidade de um hacker obter acesso a uma das contas de seus usuários.

instagram viewer

Em segundo lugar, uma lista de verificação de senha pode ajudar a transmitir uma sensação de segurança. Ao publicar requisitos, você está dizendo a seus usuários que leva a sério a segurança de senhas.

Você deve estar ciente, no entanto, que uma lista de verificação de senha não é uma solução milagrosa para problemas de senha. Na verdade, se você tornar suas senhas muito restritivas, poderá tornar mais fácil para os hackers restringir suas opções e forçar uma senha com força bruta. Por fim, senhas seguras e exclusivas que os usuários armazenar em um gerenciador de senhas são melhores.

Como criar uma lista de verificação de senha

Há duas maneiras de criar uma lista de verificação de senha no Next.js. Você pode usar os recursos integrados ou pode usar um módulo externo.

O que você vai precisar

Para criar uma lista de verificação de senha no Next.js, você precisará do seguinte:

  • Node.js instalado
  • um editor de texto
  • Um projeto Next.js

Método 1: Usando recursos integrados

Next.js vem com recursos integrados como ganchos e contexto. Há diferentes tipos de ganchos que você pode usar para criar uma lista de verificação de senha.

Primeiro, crie um novo arquivo em seu aplicativo Next.js e nomeie-o senhaChecklist.js. Nesse arquivo, você pode inserir a senha dos usuários e verificar se a senha atende aos requisitos.

importar Reagir, { useState } de 'reagir'
funçãoLista de Verificação de Senhas() {
 const [senha, setPassword] = useState('')
const [erro, setError] = useState(falso)


funçãolidar com mudança(e) {
configurar senha(e.alvo.valor)
 }


funçãomanipularEnviar(e) {
e.preventDefault()


// Requisitos de senha
const requisitos = [
// Deve ter pelo menos 8 caracteres
 comprimento da senha >= 8,
// Deve conter pelo menos 1 letra maiúscula
 /[A-Z]/.teste(senha),
// Deve conter pelo menos 1 letra minúscula
 /[a-z]/.teste(senha),
// Deve conter pelo menos 1 número
 /\d/.teste(senha)
 ]


// Se todos os requisitos forem atendidos, a senha é válida
const isValid = requisitos.every(boleano)
 if (é válido) {
 alerta('A senha é válida!')
 } outro {
 setError(verdadeiro)
 }
 }


retornar (
<formulário onSubmit={handleSubmit}>
<rótulo>
 Senha:
<entrada
 tipo="senha"
 valor={senha}
 onChange={handleChange}
 />
</label>
<tipo de entrada ="enviar" valor="Enviar" />
 {erro &&<p>A senha não é válida!</p>}
</form>
 )
}
exportarpadrão Lista de Verificação de Senhas

No código acima, primeiro você precisa obter a entrada de senha dos usuários. Você pode fazer isso usando o useState gancho. Esse gancho permite criar uma variável de estado e uma função para atualizar essa variável. Neste caso, a variável de estado é senha e a função para atualizá-lo é configurar senha.

Em seguida, você precisa criar uma função para lidar com o envio do formulário. Esta função impedirá a ação padrão do formulário (que é enviar o formulário) e verificará se a senha atende aos requisitos.

Os requisitos de senha são que ela deve:

  • ter pelo menos oito caracteres
  • contém pelo menos uma letra maiúscula
  • conter pelo menos uma letra minúscula
  • conter pelo menos um número

Você pode usar o todo método para verificar se uma senha atende a todos os requisitos. Em caso afirmativo, a senha é válida. Caso contrário, o código exibirá uma mensagem de erro.

Método 3: Usando o módulo react-password-checklist

Outra maneira de criar uma lista de verificação de senha em Next.js é usando o lista de verificação de senha de reação módulo. Este módulo é fácil de usar e vem com muitos recursos.

Primeiro, instale o módulo usando o seguinte comando:

npm instalar reagir-senha-lista de controle --salvar

Em seguida, importe o módulo em seu senhaChecklist.js arquivo:

importar Reagir, {useState} de "reagir"
importar Lista de Verificação de Senhas de "lista de verificação de senha de reação"
const Aplicativo = () => {
 const [senha, setPassword] = useState("")


retornar (
<forma>
<rótulo>Senha:</label>
<tipo de entrada ="senha" onChange={e => setPassword (e.target.value)}/>


<Lista de Verificação de Senhas
 regras={["minLength","specialChar","número","capital"]}
 minComprimento={5}
 valor={senha}
 />
</form>
 )
}
exportarpadrão Aplicativo

Este código passa os props minLength, specialChar, number e capital para o Lista de Verificação de Senhas componente. O componente usará essas props para verificar se a senha atende aos requisitos.

Você também pode adicionar mensagens traduzidas ao componente passando o mensagens suporte. Essas strings substituem os erros padrão para que você possa usá-las para outros idiomas ou variações.

importar Reagir, {useState} de "reagir"
importar Lista de Verificação de Senhas de "lista de verificação de senha de reação"
const Aplicativo = () => {
 const [senha, setPassword] = useState("")


retornar (
<forma>
<rótulo>Senha:</label>
<tipo de entrada ="senha" onChange={e => setPassword (e.target.value)}/>


<Lista de Verificação de Senhas
 regras={["minLength", "specialChar", "número", "capital"]}
 minComprimento={5}
 valor={senha}
 mensagens={{
 comprimento min: "La contraseñum tiene más de 8 caracteres.",
 caractere especial: "La contraseñum tiene caracteres especialmente.",
 número: "La contraseña tiene un número.",
 capital: "La contraseña tiene una letra mayúscula.",
 corresponder: "Las contraseñcomo coincidência.",
 }}
 />
</form>
 )
}
exportarpadrão Aplicativo

No código acima, o mensagens prop armazena mensagens de erro alternativas. O componente exibirá essas mensagens quando a senha não atender aos requisitos.

Este método é mais conveniente porque você não precisa escrever o código para verificar se a senha atende aos requisitos. Há também muitos outros benefícios de usar este módulo, como:

  • Exibindo a força da senha: lista de verificação de senha de reação pode exibir a força da senha para que os usuários possam ver a força de sua senha.
  • Exibindo a mensagem de erro: lista de verificação de senha de reação também pode exibir a mensagem de erro se a senha não for válida.
  • Estilo: você não precisa adicionar nenhum estilo extra à lista de verificação. O módulo fornece estilo padrão que você pode usar em seu aplicativo. Se você deseja adicionar algum estilo adicional, pode usar CSS normal ou outro estruturas de estilo como CSS tailwind.

Melhore a segurança do usuário com uma lista de verificação de senha

Uma senha forte é a chave para a segurança online. É importante ter uma senha forte e exclusiva para cada conta online. Ao usar uma lista de verificação de senha, você pode ter certeza de que cada senha atende a um determinado padrão.

Os usuários do seu aplicativo também apreciarão poder ver a força da senha. Dessa forma, eles podem ter certeza de que suas senhas são fortes o suficiente. Isso melhorará a experiência do usuário do seu aplicativo e também aumentará a segurança dos usuários do seu aplicativo. Da mesma forma, você também pode validar os formulários em seu aplicativo Next.js.