Powered By Blogger

domingo, 19 de fevereiro de 2012

Login com JavaScript

Procurando na web encontrei um código de login em javascript muito criativo onde o usuário inseria o nome de  usuário e a senha, então o script procurava a página usuariosenha.html , por exemplo se o usuário fosse "joc" e a senha "123" exixtiria página joc123.html.
Deste modo o usuário só conseguiria acessar a página web se acertasse exatamente o nome da página, daí cada usuário teria uma página, o problema do script é que a senha ficava exposta, pois ficava salva na barra de endereço, então procurando aperfeiçoar criei um script melhorado, resolvendo a questão da segurança, desta vez a página aparesse em um iframe, assim não ficará mais salvo no histórico do navegador.

abaixo segue o código:

index.html:


<html>
<head>
<title>logar</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function logando() {
var login = document.form1.login.value;
var senha = document.form1.senha.value;
var logar = login +"-"+ senha + "/"+login + senha + ".html";
document.write("<iframe src="+logar+" width='100%' height='100%' frameborder=0 marginwidth=0 scrolling=NO>");
document.write("</iframe>");
}
</script>
</head>


<body>
<form name="form1" method="post" action="">
  <p>login 
    <input type="text" name="login">
  </p>
  <p>senha 
    <input type="text" name="senha">
  </p>
  <p>
    <input type="submit" name="Submit" value="Enviar" onClick="logando()">
  </p>
</form>


</body>
</html>




joc123.html - página protegida:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Esta e a pagina protegida</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>


<body>
<table width="703" height="120" border="0">
  <tr>
    <td bgcolor="#FF0000">ol&aacute; joc123 </td>
  </tr>
</table>
<table width="700" height="649" border="0">
  <tr>
    <td width="99" bgcolor="#999966"></td>
    <td width="591" valign="top" bgcolor="#990066"><a href="pagina2.html"><strong><font color="#FFFFFF">página2</font></strong></a></td>
  </tr>
</table>
<table width="701" border="0">
  <tr> 
    <td bgcolor="#666666">&nbsp;</td>
  </tr>
</table>
</body>
</html>


abaixo segue o link para baixar os arquivos e no exemplo vem uma segunda página "pagina2.html" para demonstrar como criar link para outras páginas:

para criar um novo usuário siga as instruções:

1. criar uma pasta e renomear 
2. copiar os arquivos e colar na pasta
3. renomear a página protegida
4. editar a página protegida: olá; tr123.
5. na página 2 editar o link: <a href="tr123.html"><strong><font color="#FFFFFF">home</font></strong></a>




Nenhum comentário:

Postar um comentário