[Código]Javascript Login

Iniciado por D4RKS0N1K, Abril 07, 2017, 08:40:47 PM

Tema anterior - Siguiente tema

0 Miembros y 1 Visitante están viendo este tema.

Abril 07, 2017, 08:40:47 PM Ultima modificación: Abril 07, 2017, 08:43:00 PM por D4RKS0N1K
Muy buenas!

He hecho un login en javascript con la posibilidad de añadir los usuarios que se desee mediante la utilización de una contraseña.
Como desconozco el método para que los usuarios que se insertan realmente se incluyan dentro del array del propio código(Imagino que necesitaré hacer uso de un servidor) los usuarios que incluyamos únicamente serán válidos hasta lo cerremos :(

(El diseño también es bastante cutrillo ::))


Código: javascript
<!DOCTYPE html>
     <html lang="es">
     <head>
     
    <title>Examen</title>
    <meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Wallpoet" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Clicker+Script" rel="stylesheet">

         <style>
     *{
         margin:0px;
         padding:0px;
     }
     .contenedor{
         background-color:#BDBDBD;
         width: 700px;
         height: 650px;
         margin:auto;
     }
     .login{
    margin-top:220px;
     }
       .pass{
    margin-top:250px;
           display:block;
           margin-top: auto;
           margin-top:200px;
     }
     .bypass{
         margin:auto;
         margin:80px;
         width: 90px;
         height: 30px;
     }
     .imagen{
         width: 120px;
position: absolute;
         left: 390px;
         top:160px;
     }
     .imagenkey{
         position: absolute;
         width: 120px;
         left:390px;
         top:380px;
     }
     .logon{
         width: 120px;
         top:15px;
         margin-left: 140px;
         position: absolute;
     }
     .titulo{
font-family: 'Wallpoet', cursive;
         font-size: 70px;
       margin-left: 260px;
         top:29px;
         position: absolute;
     }
             .add{
              margin-top: 120px;
                 left: 639px;
                 position: absolute;
                 width: 90px;
                 height: 43px;
             }
             .needz{
                 position: absolute;
                 bottom: 15px;
                 margin-left: 260px;
                 font-family: 'Clicker Script', cursive;
                 font-size: 20px;
                 bold;

             }
         </style>
         <script>
             var usuarios = ["Pepe Lija", "PunkyNegro", "Alcantara"]
                var password = ["123456", "bastardo" , "estructura"]
            function loguear()
             {
               
                var us1 = document.secure.login.value
                var ps1 = document.secure.pass.value
                for(x=0;x<usuarios.length;x++){
                    if((us1==usuarios[x]) && (ps1==password[x]))
                    {
                        alert("Bienvenido de nuevo " + us1)
                        break;
                    }
                   
                   
                }
                 
            }
             function limpiar(){
             document.getElementById("secure").reset();
                 
             }
             function add(){
                 var passx=prompt("Introduzca la contraseña para administrar usuarios")
                 if(passx=="LND"){
                     opcion=prompt("¿Cuantos usuarios desea añadir?")
                     for(i=0;i<opcion;i++){
                         var adx = prompt("Nombre de usuario")
                         var pxss = prompt("Contraseña")
                            usuarios[i] = adx
                           password[i] = pxss
                     }

                     
                 }
             }
                         
           
         </script>
    </head>
         <div class="contenedor">
             <p class="titulo">LOGIN V1</p>
                                  <img src="logger.png" class="logon">

             <center>
                 <form name="secure" ACTION="javascript:loguear()">
                     <img src="admin.png" class="imagen">
                                          <img src="key.png" class="imagenkey">

                 <input type="text" class="login" name="login"></input>
             <input type="text" class="pass" name="pass"></input>
           <button class="bypass">LOGIN</button>
                        <button class="bypass" name="clearx" onclick="limpiar()">CLEAR</button>
                        <button class="add" onclick="add()">ADD USER</button>
                        <p class="needz">Require administrator password</p>
         

             </form>

         </div>
</body>
</html>




Seguramente habré cometido bastantes torpezas, por lo que cualquier consejo que me puedan dar es bienvenido

Un saludo gente

Abril 09, 2017, 08:07:07 PM #1 Ultima modificación: Abril 09, 2017, 08:10:39 PM por Hu3c0
Hola @No tienes permitido ver los links. Registrarse o Entrar a mi cuenta no sé exactamente que pretendes hacer si me lo explicas un poco mejor seguramente te ayudaré. Lo que si te puedo decir que javascript no está  orientado a insertar código como creo tu pretendes hacer.

Javascript está orientado para quitarle trabajo al servidor es decir todo lo que pueda hacerse  en front-end es quitarle trabajo al back-end con lo cual estamos contribuyendo a la rapidez y gestión de recursos.

Te imaginas el poder que se tendría si se permitiera crear archivos txt donde almacenar esos usuarios y password sería un agujero de seguridad  inevitable, bueno después de esta  introducción  puedo decirte que existe una pequeña posibilidad a lo que pides

Te muestro el camino
No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

Las local storage es una forma de almacenar cookies en los directorios de los navegadores actuales, puedes usarlas para almacenar un array y en esos arrays  como usuarios y passwords.

Espero haberte sido de ayuda pero como te digo no es el método apropiado para el manejo de esos datos Saludos compañero
No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

Esta muy bien hacer cosas así para enseñarse pero Javascript no es el lenguaje que se encargue de validar usuarios, te recuerdo que es código que se ejecuta en el cliente por lo que este tiene cierto control sobre el js que ejecuta, además de que con un simple Inspeccionar elemento podríamos dar fácilmente con las contraseñas.
Si quieres hacer cosas así con javascript sin que suponga una perdida total de la seguridad de tu sitio usa NodeJS que te permite utilizar javascript de lado del servidor por lo que es idóneo para lo que quieres hacer.

Definirse es limitarse

No tienes permitido ver los links. Registrarse o Entrar a mi cuenta
Hola @No tienes permitido ver los links. Registrarse o Entrar a mi cuenta no sé exactamente que pretendes hacer si me lo explicas un poco mejor seguramente te ayudaré. Lo que si te puedo decir que javascript no está  orientado a insertar código como creo tu pretendes hacer.

Javascript está orientado para quitarle trabajo al servidor es decir todo lo que pueda hacerse  en front-end es quitarle trabajo al back-end con lo cual estamos contribuyendo a la rapidez y gestión de recursos.

Te imaginas el poder que se tendría si se permitiera crear archivos txt donde almacenar esos usuarios y password sería un agujero de seguridad  inevitable, bueno después de esta  introducción  puedo decirte que existe una pequeña posibilidad a lo que pides

Te muestro el camino
No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

Las local storage es una forma de almacenar cookies en los directorios de los navegadores actuales, puedes usarlas para almacenar un array y en esos arrays  como usuarios y passwords.

Espero haberte sido de ayuda pero como te digo no es el método apropiado para el manejo de esos datos Saludos compañero

No tienes permitido ver los links. Registrarse o Entrar a mi cuenta
Esta muy bien hacer cosas así para enseñarse pero Javascript no es el lenguaje que se encargue de validar usuarios, te recuerdo que es código que se ejecuta en el cliente por lo que este tiene cierto control sobre el js que ejecuta, además de que con un simple Inspeccionar elemento podríamos dar fácilmente con las contraseñas.
Si quieres hacer cosas así con javascript sin que suponga una perdida total de la seguridad de tu sitio usa NodeJS que te permite utilizar javascript de lado del servidor por lo que es idóneo para lo que quieres hacer.

Buenas, si, algo de eso ya me imaginaba, tener un sistema de verificación por la parte del cliente sería una locura.

Sigo viendo a ver que nuevas cosillas voy haciendo

Un saludo