Notícias de dispositivos móveis, gadgets, aplicativos Android

Como construir um contador de senhas no React


Introdução

As senhas são comumente usadas para autenticar usuários na maioria dos aplicativos da web. Por isso, é importante que as senhas sejam armazenadas de forma segura. Ao longo dos anos, métodos como o unilateral hash de senha foram utilizados para ocultar a representação real das senhas armazenadas no banco de dados.

Embora o hash de senha seja um grande passo em direção à segurança de senha, o usuário ainda representa um grande desafio à segurança de senha: um usuário que usa uma palavra comum como senha torna as tentativas de hash infrutíferas porque ataque de força bruta pode quebrar rapidamente essas senhas.

Para resolver esse problema, muitas aplica√ß√Ķes web hoje insistem que os usu√°rios tenham senhas fortes, seja atrav√©s da imposi√ß√£o de um comprimento m√≠nimo de senha ou de alguma combina√ß√£o de caracteres alfanum√©ricos e s√≠mbolos na senha. Dropbox desenvolveu um algoritmo para medir a for√ßa da senha avalia√ß√£o realista for√ßa da senha com base em crackers de senha. Este algoritmo √© empacotado em uma biblioteca JavaScript chamada
zxcvbn
. Al√©m disso, o pacote cont√©m um dicion√°rio de palavras, nomes e senhas comumente usados ‚Äč‚Äčem ingl√™s.

Neste tutorial, criaremos um formulário com campos para nome completo, endereço de e-mail e senha usando o framework React JavaScript. Faremos uma validação leve do formulário e também usaremos
zxcvbn
biblioteca para avaliar a força da senha de um formulário e, ao mesmo tempo, fornecer feedback visual.

Olhar Demonstração do CodeSandbox sobre o que você criará ao final desta lição.

Pré-requisitos

Antes de começar, certifique-se de ter a versão mais recente instalada em seu sistema Nó .

Para seguir este tutorial você precisará do seguinte:

  • Voc√™ tem a vers√£o mais recente instalada no seu computador N√≥ . Para obter mais informa√ß√Ķes sobre como instalar isso, selecione sua distribui√ß√£o na cole√ß√£o Como instalar o Node.js.
  • fio
    Instalado para executar todos os seus scripts NPM e instalação de dependências para o projeto. Você pode acompanhar isso gerenciamento na instalação fio para instalar o yarn em seu sistema.

Etapa 1 ‚Äď Configura√ß√Ķes do aplicativo

Este guia usar√°
criar-reagir-app
pacote para criar um novo aplicativo React. Execute o seguinte comando para instalar o create-react-app em seu sistema, caso ainda n√£o o tenha instalado:

npm install -g create-react-app

Assim que a instalação for concluída, inicie um novo aplicativo React usando o seguinte comando:

create-react-app react-password-strength

Este comando chama esse nome de react-password-strength , mas você pode chamá-lo como quiser.

Observação. Se você estiver usando a versão npm 5.2 ou superior, ele vem com um binário npx adicional. Usando o binário npx, você não precisa instalar create-react-app globalmente em seu sistema. Você pode iniciar um novo aplicativo React usando este comando: . npx create-react-app react-password-strength

A seguir, você instalará as dependências necessárias para o aplicativo. Execute o seguinte comando para instalar as dependências necessárias:

yarn add zxcvbn isemail prop-types node-sass bootstrap

Este comando instala as seguintes dependências:

  • zxcvbn √© a biblioteca mencionada acima para avaliar a for√ßa da senha.

  • isemail ‚Äď Biblioteca de verifica√ß√£o de e-mail.

  • prop-types ‚Äď Verifica√ß√£o em tempo de execu√ß√£o dos tipos assumidos de propriedades passadas aos componentes.

  • node-sass ‚Äď Usado para compilar arquivos Sass para CSS.

Como você deve ter notado, você instalou o pacote bootstrap como uma dependência para o aplicativo obter o estilo padrão. Para incluir Bootstrap em seu aplicativo, edite o arquivo src/index.js e adicione a seguinte linha antes de cada instrução de importação:

src/index.js

import 'bootstrap/dist/css/bootstrap.min.css';Copy

Por fim, execute seu aplicativo:

yarn start

O aplicativo √© iniciado e o desenvolvimento pode come√ßar. Observe que uma guia do navegador com recurso de recarga em tempo real foi aberta para voc√™. Isso ser√° sincronizado com as altera√ß√Ķes no aplicativo √† medida que o desenvolvimento avan√ßa.

Neste ponto, seu aplicativo ficar√° assim:
Visualização inicial

Etapa 2 ‚Äď Montagem de componentes

Este aplicativo utilizará um formulário para nome completo, email e senha. Isso também fará uma leve verificação de forma nas margens. Nesta etapa você criará os seguintes componentes React:

  • FormField
    ‚Äď Envolve um campo de entrada de formul√°rio com seus atributos e modifica o manipulador de eventos.

  • Campo de e-mail
    ‚Äď Envolve o email com um FormField e adiciona l√≥gica de verifica√ß√£o de email a ele.

  • Campo de senha
    ‚Äď Encapsula a senha do FormField e adiciona l√≥gica de valida√ß√£o de senha a ela. Tamb√©m anexa um medidor de for√ßa da senha e algumas outras dicas visuais ao campo.

  • Junte-se ao Formul√°rio
    ‚Äď Um formul√°rio fict√≠cio de ingresso na equipe de suporte contendo campos de formul√°rio.

Crie um diretório de componentes dentro do diretório src do aplicativo para hospedar todos os componentes.

Componente FormField

Crie um novo arquivo FormField.js no diretório src/components e adicione o seguinte trecho de código a ele:

SRC/componentes/FormField.js


Fazemos v√°rias coisas neste componente. Vamos decomp√ī-lo um pouco:

Estado de entrada : primeiro, você inicializou o componente de estado do campo de formulário para controlar o valor atual do campo de entrada, o estado sujo do campo e qualquer verificação de erros existente. Um campo fica sujo assim que seu valor muda e permanece sujo.

Lidando com altera√ß√Ķes de entrada : voc√™ adicionou um manipulador de eventos hasChanged(e) para atualizar o estado do valor para o valor de entrada atual sempre que a entrada for alterada. No manipulador voc√™ tamb√©m define o estado sujo do campo. Voc√™ verifica se o campo obrigat√≥rio √© um campo baseado em adere√ßos e adiciona um erro de valida√ß√£o √† matriz de estado de erros se o valor estiver vazio.

No entanto, se o campo não for obrigatório ou for obrigatório, mas não vazio, você delega à função de validação passada na propriedade validadora opcional, chama-a com o valor de entrada atual e adiciona o erro de validação lançado à matriz de estado de erros (se houver algum erro).

Finalmente, você atualiza o estado e passa uma função de retorno de chamada para chamar após a atualização. A função de retorno de chamada chama a função passada na propriedade opcional onStateChanged, passando o estado atualizado como argumento. Isto será conveniente para propagar mudanças de estado fora do componente.

Renderização e adereços : é aqui que você visualiza o campo de entrada e seu rótulo. Você também exibe condicionalmente o primeiro erro na matriz de estado de erros (se houver algum erro). Observe como você define dinamicamente classes para o campo de entrada para exibir o status de validação usando classes integradas do Bootstrap. Você também exibe quaisquer nós filhos contidos no componente.

Como voc√™ pode ver no componente propTypes, os adere√ßos necess√°rios para um determinado componente s√£o type ( ‘text’ ou ‘password’ ) label , placeholder e fieldId . Os componentes restantes s√£o opcionais.

Componente EmailField

Crie um novo arquivo EmailField.js no diretório src/components e adicione o seguinte trecho de código a ele:

SRC/componentes/EmailField.js


No componente EmailField, você renderiza o componente FormField e passa a função de validação de email para os objetos validadores. Você usa o método activate() do pacote isemail para validar o email.

Voc√™ tamb√©m pode notar que todos os outros adere√ßos, exceto os adere√ßos type e validator, s√£o passados ‚Äč‚Äčdo componente EmailField para o componente FormField.

Componente PasswordField

Crie um novo arquivo PasswordField.js no diretório src/components e adicione o seguinte trecho de código a ele:

SRC/componentes/PasswordField.js


Este componente usa o pacote de avalia√ß√£o de for√ßa de senha JavaScript zxcvbn. O pacote exporta uma fun√ß√£o zxcvbn() que usa uma string de senha como primeiro argumento e retorna um objeto com diversas propriedades para avaliar a for√ßa da senha. Neste tutorial, estaremos interessados ‚Äč‚Äčapenas na propriedade Score, que √© um n√ļmero inteiro de

‚Äď
4
o que pode ser √ļtil para implementar um indicador visual de for√ßa.

Aqui est√° um resumo do que est√° acontecendo no componente PasswordField:

Inicializa√ß√£o : Em constructor() , voc√™ criou duas propriedades de inst√Ęncia, limiarLangth e minStrength de suas respectivas propriedades s√£o passadas para o componente. limiarLength O comprimento m√≠nimo de uma senha antes que ela possa ser considerada longa o suficiente. Por padr√£o
7
não pode ser menor. Este minStrength é a pontuação zxcvbn mínima antes que uma senha seja considerada forte o suficiente. Seu significado varia de
0-4
. Padr√£o,
3
se n√£o for especificado.

Você também inicializou o estado interno do campo de senha para armazenar a senha atual e a força da senha.

Lidando com altera√ß√Ķes de senha : voc√™ definiu uma fun√ß√£o de valida√ß√£o de senha que ser√° passada para a propriedade validadora do componente FormField subjacente. A fun√ß√£o garante que o comprimento da senha seja maior que o limiteLength e tamb√©m tenha uma pontua√ß√£o zxcvbn() m√≠nima do minStrength especificado.

Você também definiu uma função stateChanged() que será passada para a propriedade onStateChanged do componente FormField. Esta função recupera o estado atualizado do FormField do componente e o utiliza para calcular e atualizar o novo estado interno do PasswordField do componente.

A função de retorno de chamada será chamada após a atualização do estado interno. A função de retorno de chamada chama a função passada na propriedade opcional onStateChanged do componente PasswordField, passando o estado FormField atualizado como um argumento.

Renderização e adereços : aqui você renderizou um componente FormField básico junto com alguns elementos para um prompt de entrada, um indicador de força da senha e um contador de comprimento da senha.

O medidor de for√ßa da senha exibe a for√ßa do valor atual da senha dependendo do estado e √© configurado para alterar o comprimento da senha de forma din√Ęmica e invis√≠vel

. O medidor mostrará cores diferentes para diferentes níveis de força.

O contador de comprimento da senha indica quando a senha é longa o suficiente. Ele mostra o comprimento da senha se a senha não for maior que o limiteLength, caso contrário, mostra o limiteLength após plus(+) .

O componente PasswordField aceita dois campos opcionais adicionais, minStrength e limiarLength , conforme definido nos propTypes do componente.

Componente JoinForm

Crie um novo arquivo JoinForm.js no diretório src/components e adicione o seguinte trecho de código a ele:

SRC/componentes/JoinForm.js


O componente JoinForm envolve os componentes vazios do formul√°rio que comp√Ķem nosso formul√°rio. Estamos inicializando o estado para manter a validade de tr√™s campos do formul√°rio: fullname , email e password . Eles s√£o todos falsos ou inv√°lidos inicialmente.

Tamb√©m definimos fun√ß√Ķes de rastreamento de altera√ß√Ķes de estado para cada campo para atualizar o estado do formul√°rio de acordo. A fun√ß√£o watch verifica erros no campo de valor e atualiza o estado interno do formul√°rio para verdadeiro ou v√°lido para esse campo. Essas fun√ß√Ķes de observa√ß√£o s√£o ent√£o atribu√≠das ao onStateChanged de cada componente do campo de formul√°rio para rastrear altera√ß√Ķes de estado.

Por fim, o formulário é apresentado. Observe que você adicionou uma função de verificação ao campo nome completo para garantir que pelo menos dois nomes sejam fornecidos, separados por um espaço e contendo apenas letras alfabéticas.

Componente do aplicativo

Até este ponto, o navegador ainda estava renderizando o modelo do aplicativo React. Agora você alterará o arquivo App.js no diretório src para exibir o JoinForm dentro do AppComponent.

O arquivo App.js ser√° semelhante ao seguinte snippet:

SRC/App.js

import React from 'react';
import JoinForm from './components/JoinForm';
import './App.css';
function App() {
return (
);
}
export default App;Copy

Etapa 3 ‚Äď Estilo com Sass

Você está a um passo da aparência final do seu aplicativo. As coisas podem parecer um pouco fora de lugar neste momento. Nesta etapa, você definirá algumas regras de estilo para estilizar o formulário.

Para aproveitar as vantagens das variáveis, aninhamentos e loops poderosos do Sass, pré-instalamos a dependência node-sass. Você usa Sass para criar um arquivo CSS que os navegadores possam entender.

Há duas coisas que você precisa alterar para usar Sass em seu aplicativo após instalar a dependência:

  • Renomeie o arquivo src/App.css para src/App.scss .
  • Edite a linha de importa√ß√£o src/App.js para fazer refer√™ncia ao arquivo renomeado.

Depois de renomear o arquivo src/App.css, atualize o arquivo src/App.js para o seguinte:

SRC/App.js

import './App.scss';Copy

Salve e feche o arquivo.

Em seguida, substitua o conte√ļdo existente do arquivo App.scss pelo seguinte c√≥digo para formatar o aplicativo:

SRC/App.scss


Voc√™ adicionou com sucesso os estilos necess√°rios para seu aplicativo. Observe o uso do conte√ļdo CSS gerado nos pseudoelementos .strength-meter:before e .strength-meter:after para adicionar espa√ßos ao medidor de for√ßa da senha.

Você também usou a diretiva Sass code>@for para gerar dinamicamente cores de preenchimento para o medidor de força em diferentes níveis de força da senha.

A tela final do aplicativo ficar√° assim:
Olhar final
Com erros de validação, a tela ficará assim:
Visualização final com erros
Sem erros, quando todos os campos estiverem corretos, a tela ficar√° assim:
Aparência final sem erros

Conclus√£o

Neste tutorial, você criou um medidor de força de senha baseado na biblioteca JavaScript zxcvbn em um aplicativo React. Para obter um guia detalhado sobre como usar e documentar a biblioteca zxcvbn, consulte
zxcvbn
repositórios no GitHub. Para obter o código de amostra completo deste tutorial, confira demonstração de demonstração de força de senha e resposta no GitHub. Você também pode obter demonstração ao vivo deste tutorial no Code Sandbox .

Se você estiver interessado na versão AngularJS deste artigo, você pode dar uma olhada em: Medidor de força de senha AngularJS .

Como construir um contador de senhas no React 1 Fonte de gravação: https://techblog.sdstudio.top/kak-postroit-schetchik-parolja-v-react/

Fonte de gravação: https://www.digitalocean.com

N√≥s recomendamos:  10 melhores videogames retr√ī para iPhone e iPad