Crie um gerador de senha aleatória configurável com JavaScript

Até agora, criamos um modelo de interface do usuário HTML e CSS estático:

Adicionando comportamento com JavaScript

A geração de caracteres aleatórios, strings e números em JavaScript pode ser realizada usando recursos integrados da API JavaScript. Estes são confusos à primeira vista, mas com bastante prática, você pode se tornar mais confortável com eles em pouco tempo.

1. Elementos HTML de destino

Vou começar direcionando todos os elementos HTML necessários usando identificadores exclusivos. Eles ficarão no topo do meu arquivo JavaScript.

const result = document.querySelector("#result");
const passLength = document.querySelector("#length");
const passLengthResult = document.querySelector("#length-result");
const includeNumbers = document.querySelector("#numbers");
const includeSymbols = document.querySelector("#symbols");
const generateBtn = document.querySelector("#generate");
const copyPass = document.querySelector("#copy");

Consulte o HTML com o ID do que passamos para cada variável constante acima. Precisaremos segmentar todos os elementos e controles do formulário, e existem alguns!

Podemos começar configurando o campo de comprimento da senha com as variáveis ​​em vigor. Este é um HTML entrada de intervalo. Podemos manipulá-lo com JavaScript e exibir a configuração atual conforme ela é atualizada.

// Listen for password range change
passLength.addEventListener("change", (event) => {
  passLengthResult.innerText = event.target.value;
});

Se o controle deslizante de intervalo for alterado, desejo atualizar o número exibido na página para refleti-lo. Esse número é puramente um aprimoramento visual, para que o usuário final saiba em primeira mão o número de caracteres que está configurando sua senha.

2. Funções de randomização

Em seguida, adicionaremos um conjunto de funções que podemos chamar que retornarão valores aleatórios com base no que for configurado.

function getRandomLower() {
  return String.fromCharCode(Math.floor(Math.random() * 26) + 97);
}

function getRandomNumber() {
  return String.fromCharCode(Math.floor(Math.random() * 10) + 48);
}

function getRandomSymbol() {
  const symbols = "!@#$%^&*(){}[]=<>/,.";
  return symbols[Math.floor(Math.random() * symbols.length)];
}

Deixe-me começar dizendo que eu sei que isso é muito confuso de entender! Cada função retorna um valor de string. O embutido String.fromCharCode O método pode criar uma nova string a partir de um código de caractere existente. Isso significa que um caractere de string pode simbolizar um número adicionado.

Para entender melhor, você pode abrir a guia do console do seu navegador e colar o return linha de uma dessas funções. Altere o número no final e você verá novos caracteres aparecerem cada vez que ele for executado.

Usando JavaScript Math.floor() e Math.random() podemos ter certeza de que retornamos caracteres únicos a cada vez.

3. Iterar sobre o comprimento da senha, adicionando caracteres gerados

Vamos agora iterar em um loop em JavaScript, com base no tamanho da senha configurada, e usar nossos caracteres gerados aleatoriamente.

generateBtn.addEventListener("click", () => {
  const length = passLength.value;
  const numbers = includeNumbers.checked;
  const symbols = includeSymbols.checked;
  result.value = generatePassword(numbers, symbols, length);
});

function generatePassword(number, symbol, length) {
  let generatedPassword = "";
  let variationsCount = [number, symbol].length;

  for (let i = 0; i < length; i += variationsCount) {
    if (number) {
      generatedPassword += getRandomNumber();
    }
    if (symbol) {
      generatedPassword += getRandomSymbol();
    }
    generatedPassword += getRandomLower();
  }

  const finalPassword = generatedPassword.slice(0, length);

  return finalPassword;
}

O código acima é acionado quando o Gerar botão é clicado. Obtemos os valores dos campos que já consultamos e os passamos para uma nova função chamada generatePassword. Esta função retorna uma senha exclusiva que atribuímos à entrada do resultado final para uso.

result.value = generatePassword(numbers, symbols, length);

o generatePassword função aceita três parâmetros, number, symbol, e length, que mapeiam para os controles em nosso formulário de gerador.

Esta parte fica confusa, mas dentro da função, usamos um loop for que percorre o comprimento que a senha é configurada para ser. Então, se a senha tivesse vinte caracteres, ela faria um loop vinte vezes.

Durante cada iteração, podemos verificar se os valores da caixa de seleção para as opções de número ou símbolo estão marcados. Se estiverem marcados, adicionamos a e atribuir uma variável chamada generatedPassword que inicialmente não tinha valor.

Esse novo valor pode ser atribuído e reatribuído com base nas opções definidas e na iteração atual do loop.

Por padrão, sempre incluiremos letras minúsculas no gerador de senhas para que a linha venha por último sem nenhuma instrução condicional.

Por fim, dividiremos () a senha no comprimento para o qual ela foi configurada e retornaremos a senha recém-gerada.

Ainda comigo? A parte difícil acabou, eu prometo.

4. Clique para Copiar (Experiência do Usuário)

O que é um gerador de senha sem uma maneira prática de copiar a senha gerada? Para aprimorar nossa ferramenta, podemos usar JavaScript para acessar algumas APIs internas. Isso copiará dinamicamente o texto da entrada do resultado.

// Listen for copy button
copyPass.addEventListener("click", () => {
  copy(result.value);
});

// Copy generated password in more secure way
function copy(text) {
  const input = document.createElement("input");
  input.setAttribute("value", text);
  document.body.appendChild(input);
  input.select();
  let copiedResult = document.execCommand("copy");
  document.body.removeChild(input);

  const alert = document.createElement("div");
  alert.classList.add("alert");
  alert.textContent = "Copied!";
  document.body.appendChild(alert);

  setTimeout(() => {
    document.querySelector(".alert").style.display = "none";
    document.body.removeChild(alert);
  }, 1000);
  return result;
}

Para copiar corretamente a senha com o clique de um botão, precisaremos criar um novo campo de entrada, selecionar a área dinamicamente, copiar a senha para ela e removê-la rapidamente da página para que tudo funcione bem.

Você pode pensar que isso parece complexo e desajeitado, e eu concordo 100% com você, mas funciona muito bem e é bastante seguro.

Para pegar carona nesse código, adicionei um pequeno alerta de interface do usuário que podemos adicionar e remover dinamicamente após um curto período. Tudo isso é feito criando HTML com JavaScript e removendo-o rapidamente da visualização após a conclusão da ação de “copiar”.

Se você se lembra, eu adicionei um .alert class com alguns estilos de volta ao nosso CSS. Aqui é onde tudo isso entra em jogo.

5. Gere uma senha no carregamento da primeira página

Até agora, você precisava clicar no Gerar botão para obter uma senha gerada para aparecer. Eu acho que seria bom se um aparecesse assim que você carregasse a página. Podemos reutilizar o generatePassword função e definir algumas novas variáveis ​​para tornar isso uma realidade, e também definirei um comprimento de senha padrão no carregamento da página.

// Set default password length 20 max on load
document.addEventListener("DOMContentLoaded", () => {
  passLength.value = 20;
  passLengthResult.innerText = "20";

  let onLoadLength = passLength.value;
  let onLoadNumbers = includeNumbers.checked;
  let onLoadSymbols = includeSymbols.checked;
  result.value = generatePassword(onLoadNumbers, onLoadSymbols, onLoadLength);
});

6. Amarrando tudo junto!

Aqui está todo o JavaScript em sua forma final. Há uma quantidade decente de código aqui, mas espero que não seja muito assustador. Esse gerador de senha pode ser ótimo para um formulário de inscrição para ajudar a convencer os usuários a optar por uma senha mais forte.

const result = document.querySelector("#result");
const passLength = document.querySelector("#length");
const passLengthResult = document.querySelector("#length-result");
const includeNumbers = document.querySelector("#numbers");
const includeSymbols = document.querySelector("#symbols");
const generateBtn = document.querySelector("#generate");
const copyPass = document.querySelector("#copy");

// Set default password length 20 max on load
document.addEventListener("DOMContentLoaded", () => {
  passLength.value = 20;
  passLengthResult.innerText = 20;

  let onLoadLength = passLength.value;
  let onLoadNumbers = includeNumbers.checked;
  let onLoadSymbols = includeSymbols.checked;
  result.value = generatePassword(onLoadNumbers, onLoadSymbols, onLoadLength);
});

// Listen for password range change
passLength.addEventListener("change", (event) => {
  passLengthResult.innerText = event.target.value;
});

// Listen for copy button
copyPass.addEventListener("click", () => {
  copy(result.value);
});

generateBtn.addEventListener("click", () => {
  const length = passLength.value;
  const numbers = includeNumbers.checked;
  const symbols = includeSymbols.checked;
  result.value = generatePassword(numbers, symbols, length);
});

function generatePassword(number, symbol, length) {
  let generatedPassword = "";
  let variationsCount = [number, symbol].length;

  for (let i = 0; i < length; i += variationsCount) {
    if (number) {
      generatedPassword += getRandomNumber();
    }
    if (symbol) {
      generatedPassword += getRandomSymbol();
    }
    generatedPassword += getRandomLower();
  }

  const finalPassword = generatedPassword.slice(0, length);

  return finalPassword;
}

function getRandomLower() {
  return String.fromCharCode(Math.floor(Math.random() * 26) + 97);
}

function getRandomNumber() {
  return String.fromCharCode(Math.floor(Math.random() * 10) + 48);
}

function getRandomSymbol() {
  const symbols = "!@#$%^&*(){}[]=<>/,.";
  return symbols[Math.floor(Math.random() * symbols.length)];
}

// Copy generated password in more secure way
function copy(text) {
  const input = document.createElement("input");
  input.setAttribute("value", text);
  document.body.appendChild(input);
  input.select();
  let copiedResult = document.execCommand("copy");
  document.body.removeChild(input);

  const alert = document.createElement("div");
  alert.classList.add("alert");
  alert.textContent = "Copied!";
  document.body.appendChild(alert);

  setTimeout(() => {
    document.querySelector(".alert").style.display = "none";
    document.body.removeChild(alert);
  }, 1000);
  return result;
}

Conclusão

E terminamos! Vamos nos lembrar do que construímos:

Este código tem uma quantidade considerável de complexidade, então não pense que você precisa entender tudo se você for um novato em JavaScript. No entanto, espero que este tutorial tenha ajudado você a entender alguns casos de uso avançados para JavaScript e o capacite a continuar construindo.

Se você ficar confuso, dê um passo para trás e pesquise na web por alguns métodos integrados, como Math.floor() e as abordagens vistas aqui. Com bastante prática e repetição, usar esses métodos integrados virá naturalmente!