A segurança online é mais crítica do que nunca, e uma das maneiras mais eficazes de proteger suas contas é utilizando senhas fortes e únicas. Neste post, você aprenderá a construir um gerador de senhas, uma ferramenta essencial para criar senhas seguras e difíceis de serem hackeadas.
Vamos construir um aplicativo chamado gerador-senhas.html utilizando tecnologias web padrão: HTML, CSS e JavaScript como pode ser visto no preview abaixo:
See the Pen Untitled by Código Fácil (@CodigoFacil) on CodePen.
1. Estrutura Básica do Projeto
Para começar, você precisará criar um arquivo HTML básico. Este arquivo servirá como a espinha dorsal do nosso gerador de senhas.
gerador-senhas.html
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gerador de Senhas</title>
<link rel="stylesheet" href="style.css"> <!-- Link para a folha de estilos CSS -->
</head>
<body>
<div id="gerador-senhas">
<h1>Gerador de Senhas</h1>
<input type="text" id="display-senha" readonly> <!-- Campo onde a senha gerada será exibida -->
<div>
<label for="tamanho">Tamanho da senha: <span id="valor-tamanho">12</span></label>
<input type="range" id="tamanho" min="4" max="50" value="12"> <!-- Slider para definir o tamanho da senha -->
</div>
<div>
<label><input type="checkbox" id="incluir-maiusculas" checked> Incluir Letras Maiúsculas</label>
<label><input type="checkbox" id="incluir-minusculas" checked> Incluir Letras Minúsculas</label>
<label><input type="checkbox" id="incluir-numeros" checked> Incluir Números</label>
<label><input type="checkbox" id="incluir-especiais" checked> Incluir Caracteres Especiais</label>
</div>
<button id="botao-gerar-senha">Gerar Senha</button> <!-- Botão para gerar a senha -->
<button id="botao-copiar-senha">Copiar Senha</button> <!-- Botão para copiar a senha gerada -->
</div>
<script src="script.js"></script> <!-- Link para o arquivo JavaScript -->
</body>
</html>2. Estilizando com CSS
O próximo passo é adicionar estilos ao nosso gerador de senhas para melhorar sua aparência e usabilidade.
style.css
body{
font-family:sans-serif;
}
#gerador-senhas {
width: 300px;
margin: auto;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Sombra ao redor do contêiner */
text-align: center; /* Centraliza o texto e os elementos dentro do contêiner */
}
#display-senha {
width: calc(100% - 40px);
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px; /* Bordas arredondadas para o campo de entrada */
display: inline-block;
}
input[type="range"] {
width: 100%;
margin: 10px 0;
}
button {
padding: 10px 20px;
margin-top: 10px;
border: none;
border-radius: 5px;
background-color: #0073aa; /* Cor de fundo para os botões */
color: white;
cursor: pointer; /* Cursor muda para indicar que o botão é clicável */
}
button:hover {
background-color: #005b8f; /* Mudança de cor no hover para feedback visual */
}
label {
display: block;
margin: 5px 0;
}3. Implementando a Lógica com JavaScript
Agora, vamos adicionar funcionalidades ao nosso gerador de senhas com JavaScript.
script.js
document.addEventListener('DOMContentLoaded', function() {
const tamanhoInput = document.getElementById('tamanho');
const valorTamanho = document.getElementById('valor-tamanho');
const displaySenha = document.getElementById('display-senha');
const incluirMaiusculas = document.getElementById('incluir-maiusculas');
const incluirMinusculas = document.getElementById('incluir-minusculas');
const incluirNumeros = document.getElementById('incluir-numeros');
const incluirEspeciais = document.getElementById('incluir-especiais');
const botaoGerarSenha = document.getElementById('botao-gerar-senha');
const botaoCopiarSenha = document.getElementById('botao-copiar-senha');
tamanhoInput.oninput = function() {
valorTamanho.textContent = this.value;
gerarSenha(); // Gera uma nova senha quando o slider é movido
};
[incluirMaiusculas, incluirMinusculas, incluirNumeros, incluirEspeciais].forEach(function(checkbox) {
checkbox.onchange = gerarSenha; // Gera uma nova senha quando qualquer checkbox é alterado
});
botaoGerarSenha.onclick = function() {
gerarSenha();
}
botaoCopiarSenha.onclick = function() {
copiarSenha();
}
function gerarSenha() {
const tamanho = parseInt(tamanhoInput.value); //pega o tamanho da senha no slider
const maiusculas = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; //listagem das letras maiúsculas que serão usadas para gerar a senha
const minusculas = 'abcdefghijklmnopqrstuvwxyz'; //listagem das letras minúsculas que serão usadas para gerar a senha
const numeros = '0123456789'; //listagem dos números que serão usadas para gerar a senha
const especiais = '!@#$%^&*()_+~`|}{[]:;?><,./-='; //listagem dos caracteres especiais que serão usadas para gerar a senha
let caracteres = '';
if (incluirMaiusculas.checked) caracteres += maiusculas; //checa se o checkbox de letras maiúsculas está selecionado e se estiver adiciona para a lista de caracteres
if (incluirMinusculas.checked) caracteres += minusculas; //mesma coisa do de cima só que para letras minúsculas
if (incluirNumeros.checked) caracteres += numeros; //mesma coisa do de cima para números
if (incluirEspeciais.checked) caracteres += especiais; //mesma coisa do de cima para caracteres especiais
if (caracteres === '') {
displaySenha.value = ''; // Evita gerar uma senha se nenhum conjunto de caracteres for selecionado
return;
}
let senha = '';
for (let i = 0; i < tamanho; i++) { //repete o que está dentro dos colchetes com base no número definido no slider
const indiceAleatorio = Math.floor(Math.random() * caracteres.length); //gera um número aleatório
senha += caracteres.charAt(indiceAleatorio); //pega o número aleatório e a lista com todos os caracteres disponíveis para pegar 1 caractere e adicionar a senha
}
displaySenha.value = senha; //define a senha no campo de senha
}
gerarSenha(); // Gera uma senha automaticamente ao carregar a página
function copiarSenha() {
displaySenha.select(); //seleciona o campo da senha
document.execCommand('copy'); //copia a senha
alert('Senha copiada para a área de transferência!');
}
});4. Testando e Finalizando
Após implementar o HTML, CSS e JavaScript, é hora de testar o gerador de senhas. Abra o arquivo gerador-senhas.html em seu navegador e experimente gerar diferentes senhas. Ajuste o tamanho e observe como as senhas são instantaneamente criadas e podem ser copiadas com um clique.
Conclusão
Este tutorial mostrou como você pode criar um gerador de senhas eficaz e personalizável. Esse tipo de ferramenta é vital para a gestão de segurança online, ajudando a garantir que suas contas estejam sempre protegidas com senhas fortes. Com essas habilidades, você não só melhora sua segurança online, mas também adquire a capacidade de criar outras ferramentas úteis com tecnologias web.
Você também encontrará uma versão ativa do gerador de senhas aqui.
