Código HTML para LOGIN

  • 11

 

1) Java Script para un solo usuario

 

<SCRIPT  language=JavaScript>
function go(){

if (document.form.password.value=='CONTRASEÑA && document.form.login.value=='USUARIO'){
        document.form.submit();
    }
    else{
         alert("Porfavor ingrese, nombre de usuario y contraseña correctos.");
    }
}
</SCRIPT>
<FORM name=form action="TU_PAGINA_WEB.HTML">

<P>Usuario:    <INPUT type=text name=login>
<P>Contraseña: <INPUT type=password name=password>
<INPUT onclick=go() type=button value=Acceder>

</FORM>

2) Java Script para varios usuarios

 

     <h1>Ingresa Tus Datos
</h1>
       <form name="login">
     <table width="200" border="0">
       <tr>
         <th scope="row"><h1>Usuario</h1></th>
         <td><span class="cnt">
           <input name="usuario" type="text" class="Input" value="" size="20" />
         </span></td>
       </tr>
       <tr>
         <th height="33" scope="row"><h2>Clave</h2></th>
         <td><span class="cnt">
           <input name="password" type="password" class="Input" value="" size="20" />
         </span></td>
         <td><span class="cnt">
           <input value="Entrar" target="_parent" onclick="Login()" type="button" class="boton"/>
         </span></td>
       </tr>
       <tr>
         <th scope="row"><input type="reset" name="Borrar" id="Borrar" value="Reset" class="boton" /></th>
       </tr>
     </table>
</form>

<script language="JavaScript">
function Login(){
var done=0;
var usuario=document.login.usuario.value;
var password=document.login.password.value;
if (usuario=="USUARIO" && password=="CONTRASEÑA") {
window.location="TU_PAGINA_WEB.HTML";
}
if (usuario=="" && password=="") {
window.location="errorpopup.html";
}
}
        </script>
</center>
<script language="Javascript">
<!-- Begin
document.oncontextmenu = function(){return false}
// End -->
</script>

¿Como proteger el Código?

El problema con estos códigos es que si el usuario por curiosidad desea ver el código fuente lo puede hacer con un simple clic así que para dificultar el acceso pueden usar el siguiente SCRIPT para que los curiosos (no expertos) pierdan esperanza alguna.

 

1) Bloquea el botón derecho del ratón.


<script language="JavaScript">
<!-- Begin
function right(e) {
var msg = " ¡ No permitido ! Por favor ingresa tu nombre de USUARIO y tu CLAVE de lo contrario deja vacio las casillas y presiona ENTRAR. ";
if (navigator.appName == 'Netscape' && e.which == 3) {
alert(msg); // Delete this line to disable but not alert user
return false;
}
else
if (navigator.appName == 'Microsoft Internet Explorer' && event.button==2) {
alert(msg); // Delete this line to disable but not alert user
return false;
}
return true;
}
document.onmousedown = right;
// End -->
</script>

2) Este segundo paso es más tedioso si no se hace de forma correcta pero el resultado es bastante bueno, el usuario se desalenta o le cuesta accesar a tu página.

 

a) POP-UP

Recomiendo usar un pop up ya que la opción de VER código por el menú del explorador ya no aparece.

 

<p>Para iniciar sesión da clic en el siguiente enlace:</p>
<a href="login.html"
onclick="window.open('LOGIN.HTML',
'addonchat','width=620,height=500,status=no,scrollbars=no,menubar=no,resizable=yes');
return false" class="boton">Login</a>

Puedes modificar 'width=620,height=500 deacuerdo al tamaño que necesiten es importante NO MODIFICARLO como width=”620” si no dejar el width=620 sin comillas ya que no siempre funciona.

Una vez abierto el LOGIN.HTML es la página donde esta tu código de inicio de sesión.

 

2) VALIDAR POP-UP

 

   <center><h2> Validando Usuario, por favor espere.... </h2></p></center>
<script language="JavaScript" type="text/javascript">
window.opener.location.href ="TU_PÁGINA_OCULTA.HTML";
var ventana = window.self;
ventana.opener = window.self;
ventana.close();
{
location.href=window
}
setTimeout ("redireccionar()",220);
</script><script type="text/javascript">

var pagina = 'PAGINA_DE_ERROR.HTML';
var segundos = 230;

function redireccion() {

document.location.href=pagina;

}

setTimeout("redireccion()",segundos);

</script>

Este código es muy sencillo pero es el candado de todo el código, al momento de que el LOGIN es CORRECTO, se redirecciona a esta página que tiene como finalidad VALIDAR QUE SE ABRA DESDE EL POP UP ya que si lo abre desde una página completa simplemente CADUCA y lo redirecciona a la página de ERROR.
Otra función importante es que al momento de que la validación sea correcta se cierra el pop up y la página oculta se abre en la página principal.

 

Es decir:

 

PÁGINA WEB > clic al botón de login > ABRE LOGIN.HTML > se ingresan datos correctos > PÁGINA DE VALIDACIÓN > BIENVENIDO

 

se ingresan datos incorrectos > PÁGINA DE ERROR

Evita que intrusos ingresen a la página Oculta

Debido a la sencillez del código es posible que se pueda ingresar fácilmente a la página ocultar para poder evitarlo o agregar otro candado de seguridad doy dos recomendaciones importantes.

Recuerda que la seguridad de tu página radica en la sencillez del código, esto se traduce que el funcionamiento es más simple de lo que parece pero nadie lo sospechara, haciendo difícil el acceso.

Usa el siguiente ejemplo:

image

La página Oculta 1, ponle un nombre excesivamente largo con números, así evitaremos que sea encontrada por motores de búsqueda, y el iframe Oculto 2 puedes llamarlo como tu quieras, si es posible también un nombre largo con números.

Una vez realizado esto, el truco es sencillo pero eficaz, al Iframe de página Oculta 2 inserta el siguiente código:

Con este código evitamos que abran el iframe, es decir, cuando intenten ingresar al iframe este los re direccionará a otra página, una que puedes crear de Seguridad, donde digas que el acceso esta restringido, así no será posible ingresar a tu página iframe oculta, la cual es más importante…

11 comentarios:

ॐ Smoosh!! ॐ dijo...

muy bien pero En donde lo inserto en La plantilla o en un nuevo Gadget?? aki les dejo mi correo
para que me avisen porfa!

frank911@live.com.mx

de agradesimiento les puedo publicar su banner en mi blogg!
muchas Gracias!!

Anónimo dijo...

amigo como insector esoo en publisher esq estoy haciendo una web en publisher y no me sale bn Escriveme ami correo : yandel-cesar@hotmail.com ayudame men

Daniiable dijo...

Smosh!!
Debes insertarlo dentro de la plantilla si lo usaras como Gadget te recomiendo un iFrame.

Daniiable dijo...

Debes insertarlo dentro de la plantilla si lo usaras como Gadget te recomiendo un iFrame.

Daniel Size dijo...

SI PERO COMO EVITAS QUE MEL USUARIO ENTRE A TU PAGIMNA OCULTA SIN TENER QUE LOGUEARSE?

Daniel S. Zempoaltecatl dijo...

Te recomiendo leer la parte donde dice "¿Como proteger el código?" ahí viene explicado como proteger a través de verificación de un POP-UP y debajo puse un nuevo paso de "
Evita que intrusos ingresen a la página Oculta"
Espero te sean de utilidad.

Daniel S. Zempoaltecatl dijo...

y como hacer para salir de la pagina

Daniel S. Zempoaltecatl dijo...

Saludos
Alguien tiene un archivo RAR con todos estos modelos de HTML para entender mejor este tema...? Gracias

Daniel S. Zempoaltecatl dijo...

hola por favor alguien me puede ayudar para convertir este codigo en un gadget o witdget dado que utilizo una pagina.jimdo y no me deja modificar la plantilla solo puedo agregar fracmentos html osea whitget o si alguien tiene algun codigo que se pueda utilizar en paginas jimdo en donde haya dos entradas de textos una de nombre y otra de contraseña junto con un boton entrar la funcion del boton es redireccionar a una pagina pero que este solo funcione y los datos son iguales a los verdaderos yo nose como hacerlo en html estube estudiando pero necesito tambien hacer el codigo en php dado que es la unica forma de usar condicionales if else les dejo un seudocodigo como para que tengan una idea de lo que necesito
boton.label= "entrar"
boton.action = redireccion http://pagina.a.redireccionar.com;
boton.enable = false;
text1 = usuario;
text2 = contraseña;
end if
if text1.text = "correcto" then;
boton.enable = true;
else boton.enable = false;
if text2.text = "1234" then;
boton.enabled = true
end if
espero que se entienda igual les deje la explicación recuerden que no puedo indexar ninguna base de datos ni nada por el estilo los datos del usuario tienen que estar en el mismo codigo

. porfavor ayuda les dejo mi face www.facebook.com/david.monterosok

Daniel S. Zempoaltecatl dijo...

Hola, Mil Gracias por el tutorial me ha servido mucho, pero tengo una inquietud, es posible que cuando se ingrese a la pagina mencionada, halla un botón de desconexión o retorno al login. Solo eso me falta Mil Gracias !!

Daniel S. Zempoaltecatl dijo...

Es sencillo, usa el mismo proceso de que usaste para validar el LOGIN solo que en lugar que uses un usuario y pasword usa una página que reedireccione de manera automática al LOG OUT y te recomiendo usar POP UP para evitar que dándole clic atrás tengan acceso a tu página privada.