Como você cria uma página de login com campos de nome de usuário e senha?

Pergunta

* Rede de conhecimento computador >> Pergunta >> senhas >> Content

A criação de uma página de login envolve o front-end (HTML, CSS, JavaScript) para a interface do usuário e o back-end (linguagem e banco de dados do lado do servidor) para autenticação e gerenciamento de dados. Aqui está um detalhamento de como criar uma página de login, cobrindo o front-end e um exemplo simplificado de back-end.

1. Front -end (estrutura html - `login.html`)

`` `html

login

login

`` `

Pontos -chave:

* ``: Declara o tipo de documento como HTML5.
* ``: Especifica o caractere que codifica o documento.
* ``: Configura a viewport para um design responsivo.
* ``: Define o título que aparece na guia Browser. * ` <link rel ="Stylesheet" href ="style.css"> `: Links para o seu arquivo CSS para estilo. * `<div>`: Uma div contêiner para manter o formulário de login e seus elementos, facilitando o estilo. * ` <H2> login </h2> `: Um título para o formulário de login. * `<form id =" loginform "action ="/login "method =" post ">`: O núcleo do formulário: * `id =" loginform "`:fornece um identificador exclusivo para o formulário, permitindo manipulá -lo com JavaScript. * `Action ="/Login "`: crucialmente importante! Isso especifica o URL no seu servidor que lidará com a solicitação de login quando o formulário for enviado. Substitua `/login` pelo caminho real para o seu ponto de extremidade de login no lado do servidor. * `Method =" Post "`:indica que os dados do formulário serão enviados ao servidor usando o método HTTP Post, que geralmente é mais seguro para dados confidenciais, como senhas. * `<div>`: Recipientes para rótulos e campos de entrada, ajudando em estilo e organização. * `<Label para =" Nome de usuário ">` e `<input type =" text "id =" userName "name =" userName "requerido>`: * `Label`:fornece uma etiqueta de texto para o campo de entrada. O atributo `for` deve corresponder ao `id` do campo de entrada com o qual está associado. * `input type =" text "`:cria um campo de entrada de texto para o nome de usuário. `name =" nome de usuário "` é importante-o código do lado do servidor usará esse nome para acessar o valor inserido pelo usuário. `requerir` torna o campo obrigatório. * `<input type =" senha "id =" senha "name =" senha "necessária>`: Cria um campo de entrada de senha. O atributo `type =" senha "` mascara a entrada como os tipos de usuário. `name =" senha "` é usado pelo código do lado do servidor. `requerir` torna o campo obrigatório. * `<butter type =" submit "> login </botão> `: O botão Enviar que aciona o envio do formulário. * `<div> </div> `: Um espaço reservado para exibir mensagens de erro do servidor, se a autenticação falhar. * `<script src =" script.js "> </script> `: Links para o seu arquivo JavaScript para qualquer validação do lado do cliente ou outras interações. 2. Front -end (CSS Styling - `style.css`) `` `CSS corpo { Font-Family:Sans-Serif; Background-Color:#f4f4f4; exibição:flex; Justify-Content:Center; alinhado-itens:centro; Min-altura:100VH; } .Login-container { Background-Color:#FFF; preenchimento:20px; Radio de fronteira:8px; Box-Shadow:0 0 10px rgba (0, 0, 0, 0.1); Largura:300px; } .form-group { Margin-Bottom:15px; } rótulo { exibição:bloco; Bottom de margem:5px; } entrada [type ="text"], input [type ="senha"] { largura:100%; preenchimento:8px; borda:1px sólido #ccc; Radio de fronteira:4px; Timing de caixa:caixa de fronteira; / * Inclua preenchimento e borda na largura e altura total do elemento */ } botão { Background-Color:#4CAF50; Cor:Branco; preenchimento:10px 15px; fronteira:nenhuma; Radio de fronteira:4px; Cursor:Ponteiro; largura:100%; } Botão:Hover { Background-Color:#3E8E41; } .error-message { Cor:vermelho; Margin-top:10px; } `` ` Este CSS fornece um estilo básico para centralizar o formulário de login, estilizar os campos de entrada e o botão e fornecer um indicador visual para mensagens de erro. 3. Front -end (JavaScript - `script.js` - validação opcional do lado do cliente) `` `JavaScript Document.getElementById ('Loginform'). AddEventListener ('submit', function (event) { const userName =document.getElementById ('nome de usuário'). const senha =document.getElementById ('senha'). value; const errorMessagediv =document.getElementById ('errorMessage'); errorMessagediv.TextContent =''; // Limpe erros anteriores if (! Nome de usuário ||! Senha) { errorMessagediv.TextContent ='Por favor, insira o nome de usuário e a senha.'; event.preventDefault (); // impedir o envio do formulário retornar; } // Você pode adicionar uma validação mais complexa do lado do cliente aqui, como verificações de força de senha. }); `` ` Este JavaScript adiciona uma verificação de validação do lado do cliente que os campos de nome de usuário e senha foram preenchidos antes de enviar o formulário ao servidor. É opcional, mas melhora a experiência do usuário, fornecendo feedback imediato. 4. Back -end (node.js com expresso - exemplo) Este é um exemplo básico usando o Node.js e a estrutura expressa. Você precisará instalar estes: `` `BASH NPM Install Express Body-Parser BCRYPT `` ` * `express`: Uma estrutura de aplicativos da web para Node.JS. * `Body-Parser`: Middleware para analisar órgãos de solicitação. * `bcrypt`: Biblioteca para senhas de hash com segurança. (Importante para segurança!) `` `JavaScript const express =requer ('express'); Const BodyParser =requer ('Body-Parser'); const bcrypt =requer ('bcrypt'); const app =express (); Porta const =3000; // Banco de dados de usuário in-Memory (substitua por um banco de dados real como MongoDB ou PostgreSQL) const usuários =[]; // Matriz de objetos de usuário {nome de usuário, senhaHash} App.use (BodyParser.urlencoded ({estendido:false})); // Bodos codificados por URL de análise App.Use (BodyParser.json ()); // analisar os corpos JSON App.Use (Express.static ('Public')); // serve arquivos estáticos (html, css, js) do diretório 'público' App.get ('/', (req, res) => { Res.sendfile (__ Dirname + '/public/login.html'); // Sirva a página de login }); App.Post ('/Login', Async (req, res) => { const {Nome de usuário, senha} =req.body; const user =users.find (u => u.UserName ===Nome de usuário); if (usuário) { // Compare a senha fornecida com o hash de senha armazenada const passwordMatch =aguarda bcrypt.compare (senha, user.passwordhash); if (senha de senha) { // Autenticação bem -sucedida res.send ('Login bem -sucedido!'); // Em um aplicativo real, você redirecionaria para um painel ou definia um cookie de sessão. } outro { // Senha inválida res.status (401) .send ('nome de usuário ou senha inválidos'); } } outro { // Usuário não encontrado res.status (401) .send ('nome de usuário ou senha inválidos'); } }); App.Post ('/registra', assíncão (req, res) => { const {Nome de usuário, senha} =req.body; // Verifique se o nome de usuário já existe if (users.find (u => u.username ===nome de usuário)) { return res.status (400) .send ('nome de usuário já existe'); } // hash a senha const Saltrounds =10; // ou mais para hash mais forte const passwordHash =aguarda bcrypt.hash (senha, saltrounds); // armazenar o novo usuário no banco de dados users.push ({nome de usuário, senhaHash}); Res.status (201) .send ('Usuário registrado com sucesso'); }); App.Listen (Port, () => { console.log (`servidor ouvindo em http:// localhost:$ {porta}`); }); `` ` Explicação do código de back-end: 1. importações: Importa os módulos necessários:`express`,` Body-Parser` e `BCRYPT '. 2. Inicialização: Cria uma instância de aplicativo Express (`App`) e define a porta. 3. Middleware: * `BodyParser.urlencoded ({Extended:false})`:analisa os órgãos de solicitação codificados por URL (dados enviados dos formulários HTML). `estendido:false` usa a biblioteca de consultas embutida, enquanto` estendido:true` usa a biblioteca `qs`, que permite estruturas de objetos mais complexos. * `bodyparser.json ()`:analisa os órgãos de solicitação json. * `express.static ('public')`:serve arquivos estáticos (html, css, javascript) do diretório 'público'. É aqui que você colocaria os arquivos `login.html`,` style.css` e `script.js`. 4. Rota para servir a página de login (`/`): * `App.get ('/', ...)`:define uma rota que manipula solicitações no caminho raiz (`/`). * `res.sendfile (__ dirname + '/public/login.html')`:envia o arquivo `login.html` para o cliente. `__dirname` é o diretório atual do script, garantindo que o caminho do arquivo esteja correto. 5. Rota para manusear o envio de login (`/login`): * `App.Post ('/login', ...)`:define uma rota que lida com solicitações de postagem no caminho `/login`. É aqui que os dados do formulário de login são enviados. * `req.body`:contém os dados enviados do formulário. Graças ao `Body-Parser`, você pode acessar o nome de usuário e a senha usando` req.body.username` e `req.body.password`. * `users.find (u => u.UserName ===Nome de usuário)`:pesquise a matriz `usuários` por um usuário com o nome de usuário correspondente. (Em um aplicativo real, você consultaria seu banco de dados.) * hash de senha com `bcrypt`: * `bcrypt.compare (senha, user.passwordhash)`:Esta é a parte crucial da segurança. Ele compara a senha de texto simples inserido pelo usuário com o hash * armazenado * da senha. `BCrypt` lida com o processo de salga automaticamente. Isso é muito mais seguro do que armazenar senhas em texto simples. * Lógica de autenticação: * Se um usuário for encontrado e a senha corresponder, você normalmente definiria um cookie de sessão para autenticar o usuário e redirecioná-lo para uma área de login. Neste exemplo, ele apenas envia um "Login bem -sucedido!" mensagem. * Se o usuário não for encontrado ou a senha não corresponder, ele enviará uma resposta de erro (`401 não autorizada`). O JavaScript front-end pode exibir essa mensagem de erro ao usuário. 6. Rota para registro * Adicionado uma rota de registro para permitir que novos usuários sejam adicionados ao sistema * A senha não é armazenada, mas hash para garantir a segurança 7. Iniciando o servidor: * `App.Listen (Port, ...)`:inicia o servidor Express na porta especificada. Considerações importantes e práticas recomendadas de segurança: * Banco de dados : Substitua a matriz `usuários 'na memória por um banco de dados real (por exemplo, MongoDB, PostgreSQL, MySQL). Use uma biblioteca de banco de dados (como o Mongoose para MongoDB ou sequelizar para PostgreSQL/MySQL) para interagir com o banco de dados. * Hash de senha: * Nunca* armazene as senhas no texto simples. Sempre use um algoritmo de hash de senha forte como `bcrypt` (como mostrado no exemplo). `BCRYPT` inclui salga, o que torna muito mais difícil para os invasores quebrar senhas, mesmo que obtenham o banco de dados. Use `bcrypt.hash ()` para hash senhas quando os usuários se registrarem e `bcrypt.compare ()` para comparar a senha inserida com o hash armazenado durante o login. * Validação de entrada: Validar a entrada do usuário no lado do cliente (para experiência do usuário) e no lado do servidor (para segurança). Habilizar a entrada para evitar ataques de injeção (por exemplo, injeção de SQL, XSS). * Gerenciamento da sessão: Use sessões para manter o estado de login do usuário. Após o login bem -sucedido, armazene um ID da sessão em um cookie no navegador do cliente. Nas solicitações subsequentes, o servidor pode usar o ID da sessão para identificar o usuário sem exigir que ele faça login novamente. Bibliotecas como 'Express-Session` podem ajudar a gerenciar sessões. * https: Sempre use HTTPS (SSL/TLS) para criptografar a comunicação entre o cliente e o servidor. Isso impede ataques de escuta e homem no meio. Obtenha um certificado SSL de uma autoridade de certificado (por exemplo, vamos criptografar). * Manuseio de erro: Implementar o manuseio de erro adequado para impedir que informações confidenciais sejam expostas em mensagens de erro. Erros de log com segurança. * Proteção CSRF: Proteger contra ataques de falsificação de solicitação entre sites (CSRF) usando os tokens CSRF. * Limitação da taxa: Implementar limitação da taxa para evitar ataques de força bruta no terminal de login. Como executar o exemplo: 1. Criar diretório de projeto: Crie um diretório para o seu projeto (por exemplo, `Login-App`). 2. Crie arquivos: Crie os seguintes arquivos dentro do diretório do projeto: * `login.html` (copie o código HTML) * `style.css` (copie o código CSS) * `script.js` (copie o código JavaScript) * `server.js` (ou` App.js`, ou o que você quiser nomear seu arquivo do Node.js Server - copie o código Node.js) * Crie uma pasta `public` e coloque` login.html`, `style.css` e` script.js` dentro dele. 3. Instale dependências: Abra um terminal no diretório do projeto e execute: `` `BASH NPM Install Express Body-Parser BCRYPT `` ` 4. Execute o servidor: No terminal, execute: `` `BASH Node Server.js `` ` 5. aberto no navegador: Abra seu navegador da web e vá para `http:// localhost:3000`. Você deve ver a página de login. Lembre -se de que este é um exemplo básico. Para um aplicativo do mundo real, você precisará implementar a integração de banco de dados adequada, gerenciamento de sessões e medidas de segurança. <div class=ptad2><script language='javascript' src='/ad/p2.js'></script></div> </div> </div> <div class=ptnrx></div> <table width="91%" height="52" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="51%">Anterior : <a class='LinkPrevArticle' href='/Pergunta/passwords/333567.html' >Como você acessa a pasta de senha se o diretório estiver localizado no bloqueado. Eu me traquei de todas as minhas unidades usando a pasta. pode ganhar de novo? </a></li></td> </tr> <tr> <td width="49%"> Próximo : <a class='LinkNextArticle' href='/Pergunta/passwords/333574.html' >O que você esquece quando esquece sua senha no Whoshere? </a></li></td> </tr> </table></td> </tr> </table> <div class=bai7></div> <table width="770" height="246" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="375" height="246" valign="top"><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian"> <tr> <td height="244" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="img_dm/danmai_r4_c04 -.jpg" bgcolor="#DBE3EE"> <tr> <td width="4%" height="29"> </td> <td width="96%" class="lan_lm"> Os artigos relacionados </td> </tr> </table> <table width="95%" height="209" border="0" align="center" cellpadding="0" cellspacing="4"> <tr> <td height="201"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Pergunta/passwords/253292.html" title="Como redefinir o Kindle Fire de fábrica sem senha dos pais " target="_self">Como redefinir o Kindle Fire de fábrica sem senha dos …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Pergunta/passwords/198943.html" title="Como limpar a senha de configuração para um HP Vectra VLI8 DT " target="_self">Como limpar a senha de configuração para um HP Vectra…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Pergunta/passwords/252548.html" title="Galaxy S8/S8+ Esqueceu a senha do PIN O que fazer? " target="_self">Galaxy S8/S8+ Esqueceu a senha do PIN O que fazer? </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Pergunta/passwords/199125.html" title="Como Recuperar uma perdida Nome de usuário e senha no Windows XP " target="_self">Como Recuperar uma perdida Nome de usuário e senha no …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Pergunta/passwords/249392.html" title="Como criar uma senha forte e segura " target="_self">Como criar uma senha forte e segura </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Pergunta/passwords/334425.html" title="Você pode alterar a senha do administrador de não usuários no XP? " target="_self">Você pode alterar a senha do administrador de não usu…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Pergunta/passwords/199049.html" title="Como desbloquear um laptop da Apple Quando a senha for perdida " target="_self">Como desbloquear um laptop da Apple Quando a senha for …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Pergunta/passwords/288178.html" title="Que tipo de autenticação o DOD exige para criptografar dados sensíveis, incluindo PII e PHI em dispositivos móveis quando enviados por e-mail? " target="_self">Que tipo de autenticação o DOD exige para criptografa…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Pergunta/passwords/199009.html" title="Como definir um nome de usuário e senha em seu computador " target="_self">Como definir um nome de usuário e senha em seu computa…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Pergunta/passwords/334570.html" title="Como você lê essa pasta no Registro do Windows Vista para encontrar sua senha wifi ou sua chave de criptografia? " target="_self">Como você lê essa pasta no Registro do Windows Vista …</a></td></tr><tr></tr></table></td> </tr> </table></td> </tr> </table></td> <td width="20" valign="top"></td> <td width="375" valign="top"><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian"> <tr> <td height="244" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="img_dm/danmai_r4_c04 -.jpg" bgcolor="#DBE3EE"> <tr> <td width="4%" height="29"> </td> <td width="96%" class="lan_lm">Artigos em destaque </td> </tr> </table> <table width="95%" height="207" border="0" align="center" cellpadding="0" cellspacing="4"> <tr> <td height="199"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Pergunta/pc-troubleshooting/237667.html" title="Como bloquear um artista no Spotify " target="_self">Como bloquear um artista no Spotify </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Pergunta/pc-support/186693.html" title="Como remover programas ocultos e indesejados " target="_self">Como remover programas ocultos e indesejados </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Pergunta/pc-troubleshooting/191943.html" title="Como reparar a conexão SATA de plástico sobre a fonte de alimentação dentro de meu computador " target="_self">Como reparar a conexão SATA de plástico sobre a fonte…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Pergunta/pc-troubleshooting/246756.html" title="Como usar papéis de parede de vídeo ao vivo no Android? " target="_self">Como usar papéis de parede de vídeo ao vivo no Androi…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Pergunta/Google/248778.html" title="Como remover vírgulas no Planilhas Google " target="_self">Como remover vírgulas no Planilhas Google </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Pergunta/pc-troubleshooting/244567.html" title="Como espelhar um telefone, Mac ou PC Fire TV Stick " target="_self">Como espelhar um telefone, Mac ou PC Fire TV Stick </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Pergunta/pc-support/190671.html" title="Como consertar uma DLL " target="_self">Como consertar uma DLL </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Pergunta/computer-viruses/279113.html" title="Como você limpa um computador e o inicia do zero se seu vírus infestado? " target="_self">Como você limpa um computador e o inicia do zero se se…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Pergunta/pc-troubleshooting/250490.html" title="Por que cancelo o envio ou edito mensagens no iMessage " target="_self">Por que cancelo o envio ou edito mensagens no iMessage </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Pergunta/pc-troubleshooting/191676.html" title="Meu Dell Dimension E521 AMD 64 executa muito Slowly " target="_self">Meu Dell Dimension E521 AMD 64 executa muito Slowly </a></td></tr><tr></tr></table></td> </tr> </table></td> </tr> </table></td> </tr> </table></td> </tr> </table> <div class=bai7></div> <div class="ptbottom bs"> Cop e direita © Rede de conhecimento computador https://ptcomputador.com Todos os Direitos Reservados </div> </div> </body> </html>