How to adapt this login system to Javascript?

Asked

Viewed 17,110 times

1

I need to create a simple internal login system to apply to a blog. I can’t make my code work at all, and I need help.

This is the Code: 

<script language="JavaScript">
	function Login(){
		var done=0;
		var usuario=document.login-inputs.usuario.value;
		usuario=usuario.toLowerCase();
		var senha=document.login-inputs.senha.value;
		seha=senha.toLowerCase();
		if (usuario=="admin" && senha=="admin") {
			window.location="/p/admin.html"; done=1;
		}
		if (done==0) { alert("Dados incorretos, tente novamente"); }
	}
	</script>
<div id="all">
	<div id="login-box">
		<div id="login-header">
			Faça login no sistema
		</div>
		<div id="login-inputs">
			<input type="text" placeholder="Nome de usuário" name=usuario>
			<br />
			<input type="password" placeholder="Senha" name=senha>
		</div>
		<div id="enviar">
			<input type="button" onclick="Login()" class="botao" value=Login>
			<a href="#">Esqueceu a sua senha?</a>
		</div>
	</div>
</div>

Will someone please tidy up the script? (I can’t modify the HTML)

javascript html login

2 answers

8


First one alert: avoid authenticating through Javascript, because it is extremely insecure, an example, just someone view the source code of the page to see the user and password, and other problems. As warned the bfavaretto is almost like having no authentication.

Well, you say you can’t change the HTML, but there are some errors in it, like missing quotation marks in the attribute value name of inputs. I also changed the way you capture the inputs in the script. I recommend you define an ID for us inputs, because if you take the name, if there are more with the same name, there may be problems.

function Login() {
  var done=0;
  var usuario = document.getElementsByName('usuario')[0].value;
  usuario=usuario.toLowerCase();
  var senha= document.getElementsByName('senha')[0].value;
  seha=senha.toLowerCase();
  if (usuario=="admin" && senha=="admin") {
    window.location="/p/admin.html";
    done=1;
  }
  if (done==0) { alert("Dados incorretos, tente novamente"); }
}
<div id="all">
  <div id="login-box">
    <div id="login-header">
      Faça login no sistema
    </div>
    <div id="login-inputs">
      <input type="text" placeholder="Nome de usuário" name="usuario">
      <br />
      <input type="password" placeholder="Senha" name="senha">
    </div>
    <div id="enviar">
      <input type="button" onclick="Login()" class="botao" value="Login">
      <a href="#">Esqueceu a sua senha?</a>
    </div>
  </div>
</div>

  • 1

    If you really do it for Javascript, it’s good that you obfuscate the script after you’re done, but remember to keep a readable copy

  • Yes, in this case this login system would be for internal use even in a school content blog. My idea was to link the JS and encrypt the src just to not leave exposed.

  • 2

    @Danielbonifacio, never doubt the craftiness of the User, they are capable of amazing things to break or bular a system. Believe me, there’s always a curious one to poke around the JS.

  • @Tobymosque, I understand that. It turns out that there really is no one who has this knowledge who will access the blog, and aside from that there will be no need to grab the password of X or Y user, since they are only redirected to a page with their pending notes and notices / work pending.

  • @Danielbonifácio, perhaps a viable way out, is to create a domain for your school (if it doesn’t exist), associate it with google apps and authenticate using Google Oauth.

  • @Tobymosque, did not know this tool. Interesting and efficient. Thanks for the tip :D

Show 1 more comment

-3

function Login() {
  var done=0;
  var usuario = document.getElementsByName('usuario')[0].value;
  usuario=usuario.toLowerCase();
  var senha= document.getElementsByName('senha')[0].value;
  seha=senha.toLowerCase();
  if (usuario=="admin" && senha=="admin") {
    window.location="/p/admin.html";
    done=1;
  }
  if (done==0) { alert("Dados incorretos, tente novamente"); }
}
<div id="all">
  <div id="login-box">
    <div id="login-header">
      Faça login no sistema
    </div>
    <div id="login-inputs">
      <input type="text" placeholder="Nome de usuário" name="usuario">
      <br />
      <input type="password" placeholder="Senha" name="senha">
    </div>
    <div id="enviar">
      <input type="button" onclick="Login()" class="botao" value="Login">
      <a href="#">Esqueceu a sua senha?</a>
    </div>
  </div>
</div>

Browser other questions tagged javascript html login

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